.浏览器页面渲染的流程与兼容知识点

.浏览器页面渲染的流程与兼容知识点

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

答： 首先 dns 解析 IP，建立 tcp 链接下载资源，构建 dom 树，当遇到 link 标签，会下载并执行

解析 css（不会阻止 dom 树的构建）当遇到 script 标签的是，dom 树构建会暂停，下载并执行完 js

才会继续（defer（下载延迟执行），async（异步下载并执行）） 然后再布局和绘制（layout,paint）

最后在 render

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

答：reflow：回流，当元素的尺寸、DOM 结构发生改变时，浏览器会重新渲染页面，称为回流。

repain：重绘，当元素的样式（布局不发生，color，opacity，visibility）发生改变的时候。

以下常见操作都会触发：

浏览器窗口大小改变

元素尺寸、位置、内容发生改变

元素字体大小变化

添加或者删除可见的 dom 元素

激活 CSS 伪类（例如：:hover）等

通过 class 的方式集中改样式，documentFragment 缓存节点，避免使用 table、calc，做动画的节点

脱离文档流（新创建图层）。总结：减少 DOM 操作！

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

答：语义化标签(header,nav 等)，video、audio，获取 dom 的方式（queryselector），websocket

Canvas，svg，requestAnimationFrame，Geolocation，stroage ，notification，

file API，Orientation

API 用于检测手机的摆放方向等

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

答：现在市面上 IE678 基本已经停止使用了，所以尽量不要说这方面的兼容性。

有些浏览器支持的，有些呢 不支持；或者是支持的方式不一致。

1、不同浏览器的默认 margin 和 padding 不一致

2、图片的默认间距不一致

3、获取视口的宽高 window.innerheight/width

4、CSS3 的动画，过渡，渐变，flex 也有，grid

5、Canvas，SVG

6、IE9 以下不能的 opacity，使用 filter: alpha(opacity = 50);

7、event.offsetX/Y

8、绑定事件 IE9 才支持（addEventListener）

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

答：当浏览器访问过后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，如果没有过

期，直接读取缓存，加快浏览器的加载效率。

http 缓存机制：1、Expires：通过设置最大缓存时间，当时间超过了就去服务器下载，

2、http1.1，cache-control：max-age = time ，当 time 过期后，检测 etag 带上 etag 往

服务器发请求，如果 etag 没变，直接告诉浏览器读本地缓存，如果没有 etag 就会 检测

Last-Modified，判断 如果 上一次更改的时候，距离本次访问时间比较久，说明文件没有

发生改变，返回 304。

强缓存就是当前访问时间还在设置的最大时间范围内。

协商缓存就是时间过了，通过检查 etag 或者 last-modifed 来使用缓存的机制。

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

答： 老：标记清除算法，GC 会检测当前对象有没有被变量所引用，如果没有就回收。

新： Scavenge ，把内存空间分为两部分，分别为 From 空间和 To 空间。当一个空间

满了以后，会把空间中活动对象转移到另外一个空间，这样互换。

七.什么是事件委托

答：事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并

且父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点

的监听函数统一处理多个子元素的事件，这种方式称为事件代理。使用事件代理我们可以不必要为每一

个子元素都绑定一个监听事件，这样减少了内存上的消耗，也是常见的 JS 性能优化的一个点。

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

答：书写一套 CSS 样式适配 PC 和移动端，让 PC 和移动端都能正常的浏览器页面。

使用 mate 控制 viewport，再配合 media query 的 screen 来设置断点样式。

注意：做相应式 不能使用固定单位，要使用 max-width、min-width 等能自动缩放的单位。