412   CSS HTTP JS

一,浏览器生成页面的过程:
1,解释 HTML,生成 DOM Tree,同时解释 CSS,生成 CSSOM Tree
3,DOM 和 CSSOM 合成 Render Tree
4,根据 Render Tree 计算每个节点的位置
5,最后将节点进行布局,生成页面
 
WeChat Image_20190826085858
二,页面生成过程的注意事项:
1, DOM Tree和CSSOM Tree同时解析,所以不会相互阻塞,即加载css文件的时候,可以看到html标签和内容,但是样式比如颜色,可能是看不到的,因为还没开始渲染页面。
2,JavaScript 可能修改之前生成 DOM 和 CSSOM ,所以CSS加载会阻塞JS执行,而JS修改了DOM后,会重新渲染页面。
三,页面生成优化的建议:
1,HTML和CSS编写要符合规范,有开始和结束标志,避免不规范的语法导致渲染过程耗时变长
2,CSS文件放在前面,即head里,避免HTML生成DOM时出现CSS网络请求,导致页面卡住
3,CSS选择器尽量简短,否则遍历CSSOM的查询会耗时很长
4,JavaScript放到最后加载,即body后面,避免JS文件加载而中断页面渲染
5,尽量减少JavaScript修改HTML和CSS,会导致页面重复渲染



Leave a Reply

Your email address will not be published. Required fields are marked *