网页的渲染及加载的时间线

1、渲染过程

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染
解析：

• 浏览器会将HTML解析成一个DOM树，DOM Tree
• 将CSS解析成 CSS Rule Tree
• 根据DOM Tree和CSS Tree来构造Rendering Tree
• 再下一步就是绘制，即遍历Rendering Tree，并使用UI后端层绘制每个节点

2、渲染过程的概念

• Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
• Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。

Reflow要比Repaint更花费时间，也就更影响性能。要尽量避免过多的Reflow。

3、同步加载和异步加载

3.1 什么是同步加载

加载到js文件时会等待js文件加载完成且执行完成 再继续执行后面的代码（html css js）

同步加载，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

3.2 什么是异步加载

异步加载就是在执行过程同时加载，通常会使图片之类重要性较次的东西，可以先忽略掉，比如游戏论坛网站制作中，网页游戏经常会在玩的过程中，玩家都是黑影（未加载图形，由其他黑影模型代替），如果另一个线程完成加载了，在贴上去，就是异步

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

4、加载时间线

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，这个阶段document.readyState = ‘loading’.

2、遇到link外部css，创建线程加载，并继续解析文档。

3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，
等待js加载完成并执行该脚本，然后继续解析文档。
    -解析的同步js文件-
    
4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。    

异步禁止使用document.write()，因为document.write()有可能会清空文档流
chrome浏览器禁止了外部异步的js文件使用document.write()方法

5、遇到img等，先正常解析dom结果，然后浏览器异步加载src（图片资源），并继续解析文档。

6、当文档解析完成，document.readyState = ‘interactive’.

7、文档解析完成后，所有设置有defer的脚本按照顺序执行。

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转换为事件驱动阶段。
    -事件驱动阶段:浏览器正常发挥功能-

9、当所有async的脚本的加载完成并执行后、img等加载完成后，`document.readyState = ‘complete’,window`对象触发load事件页面所有的内容解析完成 加载完成
    
10、从此，以异步响应式处理用户输入、网络事件等。