浅析浏览器工作原理

Hello Alibaba!

Hello Alibaba!

```上述代码是最普通也是最简单的一个HTML模板页面，也遵循了样式表置于head、脚本置于与底端这些基本准则，下面我们来分析一下浏览器如何按时间一步一步的加载出这个页面：```1. 浏览器接收到HTML模板文件浏览器工作原理是怎样的，开始从上到下依次解析HTML；2. 遇到样式表文件style1.css，这时候浏览器停止解析HTML，接着去请求CSS文件；3. 服务端返回CSS文件，浏览器开始解析CSS；4. 浏览器解析完CSS，继续往下解析HTML，碰到DOM节点，解析DOM；5. 浏览器发现img，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；6. 服务器返回图片文件，由于图片占用了一定面积，影响了页面排布浏览器工作原理是怎样的，因此浏览器需要回过头来重新渲染这部分代码；7. 碰到脚本文件，这时停止所有加载和解析，去请求脚本文件，并执行脚本；8. 加载完所有的HTML、CSS、JS后，页面就出现在屏幕上了。```浏览器在解析HTML页面，是从上到下依次执行的，如果在head中引用了js 文件，而这个文件很大，js 为阻塞式加载，那么浏览器会停止渲染页面，等js 文件加载完之后才会继续渲染。这就会导致白屏问题，CSS 文件也一样，因为CSS文件队DOM的样式，布局有影响，所以浏览器会等CSS文件下载完。为了避免白屏问题，如果页面的初始渲染不依赖CSS 和 JS，建议把外部引用的文件写在最后。那么问题又来了，如果CSS 文件组后加载的话，会出现短暂无样式的页面。因为JS为阻塞式的加载，加载过程按照文档顺序从上到下，因此有依赖关系的JS 要按顺序放好，并且把不必要的JS 放在底部加载。如何避免白屏和无样式的页面问题:> * 带有defer属性 的script 标签>> * 带有async属性 的script 标签> 即使把外部脚本写在前面也不怕了，浏览器会继续向下解析HTML网页，解析完就渲染到页面上，同时并行下载script标签中的外部脚本。defer 和async 的区别在于，前者会保证外部脚本的执行顺序，async 无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。参考资料：[浏览器的工作原理：新式网络浏览器幕后揭秘]()[白屏问题与FOUC无样式内容闪烁/加载异步]()