前端面试题 HTML（一）

1.前端与后端数据交互的格式有哪些，为何大部分如今都用json而不用xml。

答：XML：<person><name>小明</name><age>3岁</age></person>
JSON：{ name:”小明”,age:3}
JSON书写方便节省字节，更轻量，先后台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。

2.Flex布局熟悉吗，说几个经常使用的属性。

答：这个几乎天天都在用，仍是挺熟悉的。
display：flex
align-items 多个
align-content：单个
justify-content
justify-items
flex-direction
flex-wrap：
flex-basic：初始盒子宽度 flex
flex-grow：增加因子 200 440=160 1,1,1,2 1/540 flex
flex-shrink :缩减因子 200 60*4=240

3.说一下CSS盒模型

答：CSS的盒模型包含了一下几个内容margin,padding,border,content。
在计算盒子宽高的时候，IE和Chrome会有一些区别，IE算到border，Chrome的宽度只包含content区域，所以CSS3提供了box-sizing这个属性来修改。

4.CSS经常使用选择器，选择器权重问题。

答：*(has，not，target，root。。。。)通配符， ID，class，attr属性，element，子代（ > + ~ ）,
UI状态伪类选择器（hover,active,link,seceted..，checked），
结构性伪类选择器(nth-child,fist-child,last,nth-of-type...before,after....)

!important > style > id > class > elemnet > 伪类和属性

5.请用5种方式实现元素垂直居中。

答：一、flex

二、Tranform

三、定位+margin负值（知道子节点宽高）

四、定位+margin:auto

五、JS动态计算top、left值

6.什么是BFC？垂直margin重叠是为何？怎么解决这个问题？

答：概念：BFC全称Block Formatting Context ，中文意思为块级格式上下文。
通俗的来讲：BFC是一个独立的布局环境，咱们能够理解为一个箱子（其实是看不见摸不着的），箱子内部的元素不管如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（咱们每每利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。好比清除浮动）而且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

如何触发 BFC

1.浮动元素，float 除 none 之外的值
2.position的值不为static或者relative
3.display不为none
4.overflow 除了 visible 之外的值

BFC的应用

1.解决浮动塌陷问题
2.自适应两栏布局（咱们还能够运用BFC能够阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其余元素的关系和相互做用。

7.什么是浮动，有什么做用，有何反作用，以及如何清除浮动？

答：浮动是使用给节点添加float属性，最初的设计是用来实现文字环绕的。
添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。
当一个父节点的子节点所有浮动，就会形成父节点高度塌陷，
解决的办法首先是能够给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（一般使用伪元素before，after），再者还能够触发父节点的bfc，经常使用的定位，或者overflow：hidden。

8.CSS里面有哪些相对单位？都是相对什么的？

答：REM,EM,VW,VH等
REM：相对于根节点html的font-size
EM：父节点的font-size
VW：视口的宽度为 100VW，相对于把视口分为100份。
VH：视口高度为100VH，同理

以上单位均可以在移动端作页面适配，但一般使用REM和VW

9.fixed是相对于谁定位的？若是加上transform会出现问题吗？

答：fixed定位相对于浏览器视口来定位的
添加上transform之后，fixed定位会失效（如今这个bug已经不存在啦！
）。若是fixed元素的祖先有transform属性,则fixed元素会相对与这个祖先计算,而不是视口（问题还在）。

10.为何不推荐用style内联元素？内联元素有什么缺点？（css文件能够缓存）

答：首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协做开发的时候。可是若是一个页面的style样式足够少的时候，可使用style元素，由于一次请求最多携带14K的数据，若是足够小，还能够节约一次请求。

11.简单描述http或https协议，以及为何要三次握手？什么是长连接

答：http（https）是超文本传输协议，基于TCP请求与相应的模式，无状态的，是目前主流的web传输协议。通常包含请求头，请求体，响应头等
目前http协议已经发展到2.0阶段，支持长连接Connection: keep-alive，断点续传，cache 缓存策略，多路复用，服务器推送等。
https相对于http更安全，增长了证书SSL加密，端口是433。

三次握手其实就是三次网络链接，客户端携带SYN=1,Seq = x信息给服务端，服务端接受到后，服务端就知道了，有一个客户端要连接我，而后服务器就会开启一个TCP socket的端口，而后返回数据给前端也是SYN=1,SEQ=Y,ACK = x+1，客户端接受到后，在发一个seq，和ACK+1.主要是为了防止开启无用的连接，或者网络延迟丢包，服务器没法肯定到底客户端有没有收到消息

在使用长链接的状况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP链接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经创建的链接。
Keep-Alive不会永久保持链接，它有一个保持时间，能够在不一样的服务器软件（如Apache）中设定这个时间。实现长链接须要客户端和服务端都支持长链接。
为什么须要长连接?长链接能够省去较多的TCP创建和关闭的操做，减小浪费，节约时间。

12.http常见状态码有哪些？301和302的区别是什么？304是指什么？

答： 404：找不到资源；
500：服务器内部错误；
200：请求成功，并返回数据；
301：永久重定向；
302： 临时移动，可以使用原有URI；
304：资源未修改，可以使用缓存；
400：请求语法错误（通常为参数错误）；
403：没有权限访问。。。等

13.浏览器页面渲染的流程是什么（输入url后页面发生什么）？

答： 首先dns解析IP，创建tcp连接下载资源，构建dom树，当遇到link标签，会下载并执行解析css（不会阻止dom树的构建）当遇到script标签的是，dom树构建会暂停，下载并执行完js才会继续（defer（下载延迟执行），async（异步下载并执行）） 而后再布局和绘制（layout,paint）最后在 render

14.什么是reflow与repain？哪些操做会触发reflow，如何避免

答：reflow：回流，当元素的尺寸、DOM结构发生改变时，浏览器会从新渲染页面，称为回流。
repain：重绘，当元素的样式（布局不发生，color，opacity，visibility）发生改变的时候。

如下常见操做都会触发：

浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的 dom 元素
激活 CSS 伪类（例如：:hover）等

经过class的方式集中改样式，documentFragment缓存节点，避免使用table、calc，作动画的节点脱离文档流（新建立图层）。总结：减小DOM操做！

15.HTML5经常使用的特性（API）有哪些？你用过哪些？

答：语义化标签(header,nav等)，video、audio，获取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage ，notification，file API，Orientation API用于检测手机的摆放方向等

16.请列举出几个常见的浏览器兼容性问题？

答：如今市面上IE678基本已经中止使用了，因此尽可能不要说这方面的兼容性。
有些浏览器支持的，有些呢 不支持；或者是支持的方式不一致。
一、不一样浏览器的默认margin和padding不一致
二、图片的默认间距不一致
三、获取视口的宽高window.innerheight/width
四、CSS3的动画，过渡，渐变，flex也有，grid
五、Canvas，SVG
六、IE9如下不能的opacity，使用filter: alpha(opacity = 50);
七、event.offsetX/Y
八、绑定事件IE9才支持（addEventListener）

17.什么是浏览器缓存（知道什么是 强缓存 和 协商缓存）？

答：当浏览器访问事后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，若是没有过时，直接读取缓存，加快浏览器的加载效率。

http缓存机制：一、Expires：经过设置最大缓存时间，当时间超过了就去服务器下载，
二、http1.1，cache-control：max-age = time ，当time过时后，检测etag 带上etag往服务器发请求，若是etag没变，直接告诉浏览器读本地缓存，若是没有etag 就会 检测 Last-Modified，判断 若是 上一次更改的时候，距离本次访问时间比较久，说明文件没有发生改变，返回304。

强缓存就是当前访问时间还在设置的最大时间范围内。
协商缓存就是时间过了，经过检查etag或者last-modifed来使用缓存的机制。

18.说一下浏览器垃圾回收机制

答： 老：标记清除算法，GC会检测当前对象有没有被变量所引用，若是没有就回收。
新： Scavenge ，把内存空间分为两部分，分别为 From 空间和 To 空间。当一个空间满了之后，会把空间中活动对象转移到另一个空间，这样互换。

19.什么是事件委托

答：事件委托本质上是利用了浏览器事件冒泡的机制。由于事件在冒泡过程当中会上传到父节点，而且父节点能够经过事件对象获取到目标节点，所以能够把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。使用事件代理咱们能够没必要要为每个子元素都绑定一个监听事件，这样减小了内存上的消耗，也是常见的JS性能优化的一个点。

20.什么是响应式布局？如何实现

答：书写一套CSS样式适配PC和移动端，让PC和移动端都能正常的浏览器页面。 使用mate 控制viewport，再配合media query 的 screen 来设置断点样式。 注意：作相应式 不能使用固定单位，要使用max-width、min-width等能自动缩放的单位。