欢迎使用CSDN-markdown编辑器

谈谈对浏览器渲染html文件的理解

最近在准备找工作，总结一下浏览器渲染的步骤，发现好多博客说的都不是很明白，我自己也总结了好多个版本，都感觉有哪里不怎么对，最近好像有点理清了，记录一下，不保证完全正确，如果有错误欢迎指出。

1.浏览器对html文档下载的顺序和渲染的顺序都是自上而下进行的。
2.在渲染到html页面的某一部分的时候，其页面上所有的部分都已经下载完（这里不包括所有相关元素奥）
3.在下载的过程中肯定会遇到外链的css和js，这时候对于他们的处理是不同的，对于css,浏览器会启动单独连接进行下载，并不会停止此时html页面的解析。
4.这样，在样式表下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前的所有元素（包括已经渲染了的元素）重新渲染。
5.上面说完了css,现在说说js，正常情况下，下载js时候，页面会阻塞后边内容的下载和渲染，等待js下载完成后，会立即执行js脚本，这也是为什么我们提倡把js脚本放在最后的原因。
6.但是js的下载和解析方式是可以改变的，如果外链的js含有defer=”true”属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本。

• 浏览器开始解析HTML网页
• 解析过程中，发现带有defer属性的script标签
• 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
• 浏览器完成解析HTML网页，此时再执行下载的脚本

对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。
7.同样还有一个：外链的js如果含有async=”true”属性，将不会依赖于任何js和css的执行，此js下载完成后立刻执行，不保证按照书写的顺序执行。因为async=”true”属性会告诉浏览器，js不会修改dom和样式，故不必依赖其它的js和css。async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

• 浏览器开始解析HTML网页
• 解析过程中，发现带有async属性的script标签
• 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
• 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
• 脚本执行完毕，浏览器恢复解析HTML网页

async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。