浏览器页面渲染机制

本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~

参考资料：
前端之巅：深入了解浏览器的页面渲染机制
原文：

浏览器页面渲染机制

网络请求

1. 域名解析为IP地址
2. 向ip地址所在的服务器发送请求
3. 服务器处理请求并返回结果
4. 浏览器得到请求内容

浏览器渲染流程

1. 解析

• 解析HTML/SVG/XHTML --> DOM 树形结构
• 解析css – CSS 规则树
• 解析js脚本 — js操作DOM Tree 和 CSS Rule Tree

2. render

• dom tree 和 css rule tree结合成rendering tree

3. 绘制

• JavaScript 的加载、解析与执行会阻塞 DOM 的构建
• JS 文件不只是阻塞 DOM 的构建，它会导致 CSSOM 也阻塞 DOM 的构建。
• 浏览器的layout是lazy的，也就是说：在js脚本执行时，是不会去更新DOM的，任何对DOM的修改都会被暂存在一个队列中，在当前js的执行上下文完成执行后，会根据这个队列中的修改，进行一次layout。–博客园-为什么说DOM操作很慢

js脚本的 async 和 defer 的区别

• async：js加载与dom构建并行，但执行仍然会阻塞；
• defer：js加载与dom构建并行，在dom构建完毕后执行，js加载和执行都不阻塞dom构建

• 回流必定会发生重绘，重绘不一定会引发回流