浏览器渲染简述 · web前端基础资料

## 1. 关于浏览器我们理应想的更多 ```JS HTML 源代码是如何在浏览器中是如何转变成绚丽多彩的一面的？ JS 如何在浏览器中执行？修改页面的 DOM 样式，浏览器如何响应并更新的呢？ ``` ## 2. 浏览器和渲染引擎 ```JS 浏览器包括哪些功能？ HTML解释器 CSS解释器布局 JS引擎网络存储 2D/3D图形音频和视频图片解码器下面被说成渲染引擎 HTML解释器 CSS解释器布局 JS引擎操作系统支持(文件读写等) Blink浏览器是Webkit 浏览器衍生出来的渲染引擎 Blink Trident Webkit Gecko Blinkoe 谷歌 Edge/IE Safari 火狐 Opera ``` ## 3. HTML 和 DOM 树构建 ```JS HTML （文本）==》 DOM 树（对象） ==》页面 HTML;CSS;JS ===》词法解析===》词法解析===》DOM 树先是词法解析，将大段文本拆解成最小单元的 token 然后是语法解析，在语法规范的基础上，扫描 token 完成语义语法解析的复杂语法包括 .语法构成:表达式、项和运算符 ·表达式: "项”接“运算符”,再接“项, ·项:一个整数或表达式 ·运算符:加号或者减号 ·语言:任意数量的表达式 ``` ## 4. 渲染过程概述 ```JS 边加载边解析边渲染 JS会阻塞解析，阻塞渲染样式表不会阻塞页面的加载和解析，因为它不会影响 DOM 结构，JS 不同，因为它会影响 DOM 结构，所以浏览器的策略都是等脚本执行完了再继续解析。 DOM HTML→解析 → DOM → DOM Tree → JS → DOM → Attachment → Layou → Render Tree → Painting → Display CSS → 解析 → 样式规则 → Attachment → Layou → Render Tree → Painting → Display → DOM Tree 遇到 Style 会走 CSS 流程，不停的丰富DOM Tree 、Render Tree DOM Tree 遇到 JS 脚本时 JS 有可能改变DOM结构的，JS会阻塞解析，阻塞渲染，需要等 JS 处理完 DOM 后，才解析渲染 JS 脚本一定要放在底部，放在头部会阻塞 ``` ## 5. DOM 树和渲染树 ```JS DOM 树和渲染树自然不会所有节点都对应，渲染树中通常是可显示的节点，<head> 这类元素不存在，当然，设置了 display:none 的元素也不存在。渲染树在构建过程中会给元素布局（Layout），也叫重排（Reflow），之后就开始绘制（Painting）。 DOM Tree 、 Render Tree 一般情况下会一一对应可显示的元素，渲染树中通常是可显示的节点，<head> 这类元素只在DOM 树定位元素，绝对定位，渲染树会脱离常规的render 流程，只是一个占位符，会在其他地方render，DOM 树看不出区别操作DOM 树的时候将元素 display:none 的元素，就会减少对render tree 的干扰，早操作Painting 的时候就会更快非常复杂的动画，定位元素位置设置为绝对定位，就会脱离正常的 render 流程，去其他地方渲染，对render tree 干扰就比较少 DOM 树和渲染树自然不会所有节点都对应，渲染树中通常是可显示的节点，<head> 这类元素不存在，当然，设置了 display:none 的元素也不存在。渲染树在构建过程中会给元素布局（Layout），也叫重排（Reflow），之后就开始绘制（Painting）。 ``` ## 6. 重排与重绘 ```JS 重排（谷歌：Layout,火狐：Reflow）、重绘（谷歌：Painting，或repaint）重排耗性能涉及到元素的几何属性，一般都会触发重排，比如位置、高宽、内外边距等等。有重排就一定会重绘，重绘不一定非要重排。背景颜色、颜色等这些与几何属性无关的属性，通常不重排但重绘。 ``` ```JS 几何属性: 页面第一次渲染浏览器窗口尺寸改变元素位置和尺寸新增和删除可见元素内容改变 ``` ```JS 重绘 repain t比如color, background-color ``` ## 7. 从输入地址到页面渲染 ```JS HTML ===》 ke.qq.com ===》缓存 ===》 DNS ===》IP地址 ===》 HTTP ===》TCP ===》 Server HTML ===》 DOM Tree ===》Layout===》 Render Tree ===》Paint ===>页面 ```