前端面试知识点复盘——浏览器篇

1.浏览器内核

1）浏览器内核是浏览器的核心组件，负责解析 HTML、CSS，执行 JavaScript，并将网页内容呈现到用户的屏幕上。

浏览器内核主要包括两部分：渲染引擎和 JavaScript 引擎。{

        渲染引擎是负责解析 HTML 和 CSS 等网页元素，然后将它们转换为可视化的页面。渲染引擎通常会先解析 HTML，构建出 DOM（文档对象模型）树，然后根据 CSS 样式信息，计算出每个元素在页面上的位置和尺寸，最终将所有元素渲染到屏幕上。

        JavaScript 引擎则负责解释和执行 JavaScript 代码，为网页提供动态交互和数据处理能力。常见的 JavaScript 引擎包括 V8、SpiderMonkey、JavaScriptCore 等

}

 常见：

 2）浏览器的渲染和资源解析过程

浏览器渲染过程：

• 构建DOM树：浏览器从上到下解析 HTML 文档生成DOM节点树；
• 构建CSSOM树：浏览器解析遇到样式时，会进行异步下载，下载完成后构建 CSSOM树；
• 值得一提的是，浏览器解析过程中遇到 图片时，会进行异步下载；当遇到不带 async 和 defer 的 script 时，会阻止解析HTML并进行下载和执行；
• 并且CSS和DOM渲染，JS和DOM解析之间是有阻塞关系的；
• 构建渲染树：根据DOM节点树和CSSOM树构建渲染树（Render）；
• 布局（Layout）：根据渲染树将DOM节点树每一个节点布局在屏幕上的正确位置；【回流发生在这个阶段】
• 绘制（Paint）：绘制所有节点，为每一个节点适用对应的样式，绘制到屏幕上；【重绘发生在这个阶段】

浏览器渲染优化

• 优化javaScript，JavaScript会阻塞HTML的解析，改变JavaScrip加载方式。

  • 将JavaScript放到body最后面
  • 尽量使用异步加载JS资源，这样不会阻塞DOM解析，如defer、async

• 优化CSS加载，

  • CSS样式少，使用内嵌样式
  • 导入外部样式使用link，而不是@import，因为它会阻塞渲染。

• 减少回流重绘

  • 避免频繁操作样式
  • 避免频繁操作DOM
  • 复杂动画使用定位脱离文当流
  • 使用transform替代动画

浏览器解析过程：

• 浏览器开始解析HTML，此时document.readystate为loading
• 解析中遇到不带async和defer的script脚本时，需要等待 script脚本 下载完成并执行后，才会继续解析 HTML；
• 当文档完成解析，document.readyState变成 interactive，触发 DOMContentLoaded事件
• 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readyState变为 complete，window 触发 load 事件

浏览器解析 不同资源 时的行为

• 浏览器解析遇到 CSS样式资源 时，CSS会异步下载，不会阻塞浏览器构建DOM树，但是会阻塞渲染，在构建渲染树时，会等css下载解析完毕后才进行（防止css规则不断变化）

• 浏览器解析遇到 JS脚本资源 时，需要等待JS脚本下载完成并执行后才会继续解析HTML；但是当脚本加上defer与async时又不一样，defer是延迟执行，async是异步执行；

• CSS加载会阻塞后面的的JS语句的执行，因为HTML5标准中有一项规定，浏览器在执行Script脚本前，必须保证当前的的外联CSS已经解析完成，因为JS可能会去获取或者变更DOM的CSS样式，如果此时外联CSS还没解析好，获取到的结果就是不准确的；

• 解析遇到 Img图片 时，直接异步下载，不会阻塞解析；下载完毕后用图片替换原有src的地方；

• 总结：

  • CSS 会阻塞浏览器渲染；
  • JS 会阻塞浏览器解析；
  • CSS 会阻塞后面的JS执行；
  • IMG 不会阻塞；

3)阻塞相关内容

async 和 defer 的解析过程

• 浏览器解析到带 async 属性的 script 标签时，不会中断 html 解析，而是并行下载脚本；当脚本下载完成后，中断解析并执行脚本；
• 浏览器解析到带 defer 属性的 script 标签时，不会中断 html 解析，而是并行下载脚本；当浏览器解析完HTML时、DOMContentLoaded 事件即将被触发时，此时再执行下载完成的脚本；

async 和 defer 的区别

• async 和 defer 都仅对外部脚本有效
• async 标志的脚本文件一旦加载完成就立即执行；而 defer 标志的脚本文件会在 HTML解析完成且DOM构建完毕后再执行；（也就是说defer是延迟执行，async是异步执行）
• 如果有多个js脚本，async标记的脚本哪个先下载结束，就先执行那个脚本。而defer标记则会按照js脚本书写顺序执行。
• 如果同时使用async和defer属性，defer不起作用，浏览器行为由async属性决定。
• DOMContentLoaded 事件会等待 defer 的脚本执行完后才触发；

 css 加载会造成阻塞吗？

• 在 Chrome 上，css 加载不会阻塞 HTML 解析，但会阻塞 DOM 渲染。

  • html 和 css 是同时解析的，所以不阻塞 HTML 解析。
  • html 生成 dom，css 生成 cssom，两者结合才能生成 render tree 渲染树，所以阻塞 DOM 渲染

• css 加载会阻塞后面 js 的执行。 由于 JavaScript 是可操纵 DOM 和 css 的，如果在修改这些元素属性同时渲染界面，会造成冲突。

  • 为了防止渲染出现不可预期的结果，浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系。所以 css 会阻塞后面 js 的执行。

4）重排（回流）和重绘有什么区别

概念

• 重排（回流）：当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次的回流，也就是页面第一次加载的时候。
• 重绘：当页面元素样式的改变并不影响他在文档流中的位置时，这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称之为重绘。

引发重排的原因：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等）
• 元素字体大小变化
• 添加或者删除可见的 DOM 元素
• 激活 CSS 伪类（:hover）
• 设置 style 属性
• 查询某些属性或调用某些方法

引发重绘的原因：

• 字体颜色改变
• 边框样式改变
• 背景颜色、图片、定位、尺寸改变
• 外边框颜色、样式
• 外发光改变

如何避免触发回流和重绘

• 避免频繁使用 style，而是采用修改class的方式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 使用 display: none 做DOM离线处理，减少回流重绘次数。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
• 对于 resize、scroll等进行防抖/节流处理。
• 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速。

5）事件机制

事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

过程如下：

1. 捕获阶段：事件从最外层的节点，也就是文档对象开始，逐级向下传播，直到事件的目标节点上。
2. 目标阶段：事件到达目标节点，触发目标节点上的事件处理函数。
3. 冒泡阶段：事件从目标节点开始，逐级向上传播，直到到达最外层节点（文档对象）

如何阻止事件

• 阻止冒泡、捕获事件： e.stopPropagation(); 或e.stopImmediatePropagation()。

  • 但是前者只会阻止冒泡和捕获
  • 而后者除此之外还会阻止该元素的其它事件发生；（比如元素绑定了多个捕获事件）。

• 阻止默认事件： e.preventDefault();（比如a标签的跳转事件）

对事件委托的理解

利用浏览器事件冒泡机制。事件在冒泡的过程中会传到父节点，并且父节点可以通过事件对象获取到目标节点，可以吧子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件

6）事件循环（详见我宏任务和微任务那篇博客）

JavaScript的任务分为两种 同步 和 异步：

• 同步任务：在主线程上排队执行的任务，只有一个任务执行完毕，才能执行下一个任务，
• 异步任务：不进入主线程，而是放在任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到执行栈然后主线程执行调用栈的任务。

部分内容来自下面链接，原文查看可以点击如下链接

作者：一只小锦李_
链接：https://juejin.cn/post/7308170668113838132
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。