-
js脚本会阻塞页面的渲染,浏览器从上到下解析html文档并渲染,遇到
js
脚本,会将渲染线程挂起,以去执行js
脚本。-
所以为了防止页面加载
js
脚本被阻塞,导致网站出现大量的空白时间。可以采用异步加载js脚本的技术。- 具体方法是使用
defer
和async
。使得在浏览器解析html和渲染的同时,能够加载js脚本。因为使用defer
和async
,主线程会异步加载,继续解析html,async
会在异步加载完成之后,会立即执行。defer
会在html解析完成之后立即执行。
- 具体方法是使用
-
也可以采用将js脚本放在html文档底部。这样它会在在HTTP请求的所有其他组件之后加载并执行,并且渲染过程将不会被阻塞。
-
或者压缩和合并js文件的大小。减小文件大小,以加快文件下载和执行速度
-
-
使用link标签引入css文件,遇到css文件的时候,并不会阻塞浏览器解析html的。因为通过标签引入的css文件是异步加载和解析的,它不会阻塞dom树的构建,但是由于css毕竟是样式文件,它会影响页面的渲染,所以如果外部css过大,会影响页面的加载速度。
-
使用内联样式:内联样式会影响浏览器解析html的,因为浏览器从上到下依次加载,必须解析完内联样式,才能继续解析下面的内容,虽然内联样式减少了http请求数,如果内联样式非常复杂或者过多,可能会显著影响页面的加载性能,导致页面加载速度变慢。