JS的阻塞
1、所有浏览器在下载JS的时候,会阻止其他的一切活动(比如其他资源的下载,内容的呈现等等)。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载还是会阻止其他资源的性爱在(图片、css文件等等)
2、原因:浏览器为了防止出现JS修改DOM树,需要重构DOM树的情况,就会阻止其他资源的下载和呈现
3、嵌入JS会阻止所有内容的呈现,但是外部JSD只会阻止其后内容的显示
CSS阻塞
1、IE6下的CSS都是会阻止加载的
2、当CSS后边跟着嵌入的JS的时候,该CSS就会出现阻止后边资源下载的情况。
解决方法:把嵌入的JS放在CSS前边
3、原因:浏览器会维持html中css和js的顺序,样式表必须在嵌入放入JS执行前先加载、解析完,而嵌入的JS会阻塞后边的资源加载,所以就会出现CSS阻塞
嵌入的JS应该放在什么位置
1、放在底部,只会阻塞所有内容的呈现,但是不会则阻塞资源的下载(js放在</body>前)
2、如果嵌入JS放在head中,则嵌入JS放在css头部
3、使用defer
4、不要在嵌入的JS中调用执行时间较长的函数,如果一定要用,可以用setTimeout来调用
5、动态脚本元素使用js动态创建HTML的几乎全部文档内容