浏览器加载和渲染html的顺序

浏览器加载和渲染html的顺序

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它； (浏览器发出js文件请求并一直等待请求的的返回，因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有改变DOM树结构的代码，如append等，所以就会阻塞其他的下载和呈现)
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了＜/html＞的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
11. 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

JS CSS的加载影响

1、js的加载会阻塞此js文件下面的图片的加载，但不会阻塞其他js，css的加载
2、js的加载会阻塞浏览器的渲染，需要等待js加载执行完毕后才可以继续渲染
3、js的加载虽然是异步进行的，但是执行仍然会保持从上到下的顺序
(以上三点就是为何phpwind9.0采用了js文件底部异步加载的原因)
4、alert 直接会阻止页面的渲染，ff中不阻塞其他的js,css加载，但是会阻止img加载，chorme中会阻塞其他所有的加载。
5、边解析边更新DOM树和Style Object且重新绘制页面。
6、js的执行加载都会阻塞网页的渲染。
7、javascript会因为顺序执行而阻塞之后js的代码。
8、image、flash等组件的加载不会阻塞网页的解析。
9、css的加载也会阻止图片的加载和浏览器的渲染当不会阻止js的加载。
10、js的文件的加载会阻止dom的加载，但css文件则不会。

加快HTML页面加载的方法

1、页面减肥
页面的肥瘦是影响加载速度最重要的因素了，所以我可以删除不必要的空格、注释，内部的script
2、减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数，可以合并的js和css文件尽量合并，图片可以用CSS Sprite技术合并拼接
3、优化页面元素加载顺序
与页面最初展示相关的js和css放在页面前面使其优先加载，与之无关的放到最后使其最后加载
4、指定图片和tables的大小
如果浏览器渲染的时候知道了图片或tables的大小，那么它可以给图片和tables做好布局，而不是图片拿到后回退重绘布局
5、减少域名查询
DNS查询和解析域名也是消耗时间的，所以尽量减少对外部JS、CSS、图片等资源的引用