页面渲染吧

25 阅读2分钟
  • js脚本会阻塞页面的渲染,浏览器从上到下解析html文档并渲染,遇到js脚本,会将渲染线程挂起,以去执行js脚本。

    • 所以为了防止页面加载js脚本被阻塞,导致网站出现大量的空白时间。可以采用异步加载js脚本的技术。

      • 具体方法是使用deferasync。使得在浏览器解析html和渲染的同时,能够加载js脚本。因为使用deferasync,主线程会异步加载,继续解析html,async会在异步加载完成之后,会立即执行。defer会在html解析完成之后立即执行。
    • 也可以采用将js脚本放在html文档底部。这样它会在在HTTP请求的所有其他组件之后加载并执行,并且渲染过程将不会被阻塞。

    • 或者压缩和合并js文件的大小。减小文件大小,以加快文件下载和执行速度

  • 使用link标签引入css文件,遇到css文件的时候,并不会阻塞浏览器解析html的。因为通过标签引入的css文件是异步加载和解析的,它不会阻塞dom树的构建,但是由于css毕竟是样式文件,它会影响页面的渲染,所以如果外部css过大,会影响页面的加载速度。

  • 使用内联样式:内联样式会影响浏览器解析html的,因为浏览器从上到下依次加载,必须解析完内联样式,才能继续解析下面的内容,虽然内联样式减少了http请求数,如果内联样式非常复杂或者过多,可能会显著影响页面的加载性能,导致页面加载速度变慢。