1.前后端数据交互的格式是什么，为什么现在大多使用json而不是xml回答：XML：<人>知道唐3岁JSON:{name:"ZhiLiaotang",age:3}JSON易写，节省字节，轻量级，前后JSON方法直接解析（JSON.stringfity/parse）易于使用。2、你熟悉Flex布局吗？先说一些常用的属性。答：这个几乎天天用，我也挺熟悉的。display:flexalign-itemsmultiplealign-content:singlejustify-contentjustify-itemsflex-directionflex-wrap:flex-basic:初始框宽度flexflex-grow:增长因子2004*40=1601,1,1,21/5*40flexflex-shrink:reductionfactor20060*4=2403.说说CSS盒模型答：CSS盒模型包括margin,padding,border,content几个内容。在计算框的宽高时，IE和Chrome有些差异。IE算到边框，Chrome的宽度只包括内容区域。因此CSS3提供了属性box-sizing来修饰。4.CSS常用选择器、选择器权重问题答案：*(has,not,target,root...)通配符、ID、class、attr属性、元素、child(>+~)、UI状态伪类选择器（hover、active、link、seceted..、checked）、结构伪类选择器（nth-child、fist-child,last,nth-of-type...before,after....)!important>style>id>class>elemnet>pseudo-classesandattributes5.请使用5种方式实现元素垂直居中：1.flex2.Tranform3.定位+margin负值（知道子节点宽高）4.定位+margin：auto5，JS动态计算top和left值6.什么是BFC？为什么垂直边距重叠？如何解决这个问题呢？答：概念：BFC的全称是BlockFormattingContext，中文意思是块级格式化上下文。通俗地说：BFC是一个独立的布局环境，我们可以把它理解为一个盒子（其实是看不见摸不着的），盒子里面的元素再多铺天盖地也不会影响到外面。转换为BFC的理解是：BFC中元素的布局不受外界影响（我们经常利用这个特性来消除浮动元素对其非浮动兄弟元素及其子元素的影响。例如，clearfloating)而在BFC中，块元素和行元素都沿其父元素的边界垂直排列。如何触发BFC1。浮动元素，float是none以外的值2.position的值不是static或relative3.display不是none4.overflow是visibleBFC应用以外的值1.解决浮动塌陷问题2.自适应两列布局（我们也可以利用BFC的特性，防止元素被浮动元素覆盖，实现自适应的两列布局。方法：给不浮动的元素添加overflow:hidden。）3.解决margin值重叠的问题.总结：BFC在页面上是一个隔离独立的容器，容器里面的子元素不会影响外面的元素。它指定元素与其他元素的关系和交互。7、什么是浮漂，有什么作用，有什么副作用，如何清除浮漂？答：浮动是给节点加上浮动属性，最初的设计是为了实现文字换行。添加float的节点脱离文档流，同时触发该节点的BFC，使节点向一个方向倾斜并排成一行。当一个父节点的所有子节点都浮动时，父节点的高度就会塌陷。解决方法是先主动给父节点添加一个高度值，然后利用只有一个子节点不浮动的原则添加一个非浮动节点（通常使用伪元素before和after），就可以了也会触发父节点的bfc，常用的定位，或者overflow:hidden。8.CSS中有哪些相对单位？它们都与什么有关？答：REM、EM、VW、VH等REM：相对于根节点html的font-sizeEM：父节点的font-sizeVW：viewport的宽度为100VW，相对于划分将视口分成100个部分。VH：视口高度为100VH。同样的，上面的单位在移动端也可以适配，但是REM和VW9.fixed一般是相对于定位谁使用的？加上transform会不会有问题？答：固定定位是相对于浏览器视口定位的。添加transform后，固定定位就失效了。如果固定元素的祖先具有变换属性，则固定元素将相对于该祖先而不是视口进行计算。10、为什么不推荐使用样式内联元素？行内元素有什么缺点？（css文件可以缓存）答：首先，style是一个节点的属性，不能缓存；代码的可读性和可维护性都比较弱，尤其是多人协作开发时。但是如果一个页面的style足够小，可以使用style元素，因为一个request最多可以携带14K的数据，如果足够小，可以保存一个request。11、简述http和https协议，为什么要进行三次握手？什么是长链接答：http和https都是目前主流的传输协议。目前http协议已经发展到2.0阶段，支持长链接、断点续传、缓存缓存策略、多路复用、服务器推送等。相比http，https更安全，加入证书SSL加密，端口为433.ClientSYN=1，Seq=x，server收到后，server就会知道有client要连接我，然后server会打开一个TCPsocket端口，然后返回数据给前端同样是SYN=1，SEQ=Y，ACK=x+1，client收到后，发送一个seq，ACK+1。主要目的是防止无用的连接被打开，或者网络延迟和丢包。服务器无法确定客户端是否已经在接收消息并使用长连接的情况下，当打开网页时，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭。当客户端再次访问服务器时，会继续使用这个。连接已建立。Keep-Alive不会永远保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设置。要实现长连接，客户端和服务端都需要支持长连接。为什么我们需要长连接？长连接可以省去更多的TCP建立和关闭操作，减少浪费，节省时间。12、HTTP常见的状态码有哪些？301和302有什么区别？304是什么意思？答：404：找不到资源；500内部服务器错误;200：请求成功，返回数据；301：永久重定向；302：临时移动，可以使用原来的URI；304：资源未修改，可以使用缓存；400：请求语法错误（一般为参数错误）；403：无权限访问。..etc.13.浏览器页面渲染的过程是怎样的（输入url后页面会发生什么）？答：首先dns解析IP，建立tcp链接下载资源，构建dom树。遇到link标签，会下载并执行解析css（不会阻止dom树的构建）。当遇到script标签时，就会构建dom树。暂停、下载执行js再继续（defer（下载延迟执行）、async（异步下载执行））然后布局绘制（layout、paint）最后render14。什么是回流焊和重新喷涂？哪些操作会触发回流，如何避免回答：回流：回流，当元素的尺寸、结构或某些属性被触发时，浏览器会重新渲染页面，这称为回流。repain：重绘，当元素的样式（不发生布局）改变时。将触发以下常见操作：浏览器窗口大小更改元素大小、位置、内容更改元素字体大小更改添加或删除可见的dom元素激活CSS伪类（例如：悬停）等最小化DOM操作。15、HTML5中常用的API有哪些？你用过哪些？Answer:video,audio,获取dom的方式(queryselector),websocketCanvas,svg,requestAnimationFrame,Geolocation,stroage,notification,OrientationAPI用于检测手机的方向等16.请列举几个常见的浏览器兼容性问题？答：IE678现在市场上基本不用了，所以尽量不要在这方面谈兼容性。1、不同浏览器默认的margin和padding不一致。2.图片默认间距不一致。3、获取视口window.innerheight/width4的宽高，CSS3动画、transition、gradient、flex也有5，Canvas、SVG6、IE9及以下对于不能使用的opacity，使用filter:alpha(opacity=50);7.event.offsetX/Y8，绑定事件只有IE9支持。17、什么是浏览器缓存（知道什么是强缓存和协商缓存）？答：当浏览器访问资源时，会被浏览器缓存到本地。下次访问该页面时，如果还没有过期，则直接读取缓存，加快浏览器的加载效率。Http缓存机制：1.过期：通过设置最大缓存时间，当超过时间，去服务器下载。2、http1.1，cache-control:max-age=time，当时间到期时，检测etag，并带上etag给server发送请求。如果etag没变，会直接告诉浏览器读取本地缓存。如果没有etag，它将检测Last-Modified。如果判断为上次更改，则距离本次访问已经过了很长时间，说明该文件没有更改。返回304，强缓存是指当前访问时间还在设置的最大时间范围内。协商缓存意味着时间已经过去，通过检查etag或last-modifed来使用缓存机制。18.说说浏览器垃圾回收机制Answer:Old:markclearalgorithm，GC会检查当前对象是否被某个变量引用，如果没有就回收。新增：Scavenge，将内存空间分为两部分，即From空间和To空间。当一个空间已满时，该空间中的活动物品将被转移到另一个空间中，以便进行交换。
