优化网页渲染

• css的文件放在头部&＃xff0c;js文件放在尾部或者异步
• 尽量避免內联样式

「css文件放在头部加载」&＃xff0c;可以保证解析DOM的同时&＃xff0c;解析css文件。因为&＃xff0c;CSS&＃xff08;外链或内联&＃xff09;会阻塞整个DOM的渲染&＃xff0c;然而DOM解析会正常进行&＃xff0c;所以将css文件放在头部进行解析&＃xff0c;可以加快网页的构建速度。假设将其放在尾部&＃xff0c;那时DOM树几乎构建结束&＃xff0c;这时就得等到CSSOM树构建完成&＃xff0c;才能够继续下面的步骤。
「js放在尾部」&＃xff1a;js文件不同&＃xff0c;将js文件放在尾部或者异步加载的原因是JS&＃xff08;外链或内联&＃xff09;会阻塞后续DOM的解析&＃xff0c;后续DOM的渲染也将被阻塞&＃xff0c;而且一旦js中遇到DOM元素的操作&＃xff0c;很可能会影响。
「避免使用内联样式」&＃xff0c;可以有效的减少html的体积&＃xff0c;一般考虑内联样式的时候&＃xff0c;往往是样式本身体积比较小&＃xff0c;往往加载网络资源的时间会大于它的时候。