js和css文件位置对页面性能的影响

时间:2022-02-11 14:38:50

  翻译了一篇Performance上的关于页面性能的文章《DecIPhering the critical rendering path》,原文在这里。需要进一步整理和了解有关js、css等脚本位置对性能的影响。以下总结了几点原理:

  • 同步脚本会阻止页面中其他内容的加载与显示。例如dom树的构建,因为js可能会有document.write操作,所以必须等到同步js脚本下载执行完毕之后,页面的解析才会继续
  • js脚本可能会被css阻塞,例如js需要获取dom元素的计算样式,就需要等待CSSOM的完成。有一些隐式使用计算样式的情况,例如使用jquery获取dom元素的width,源码中就是使用的js获取计算样式
  • <head>中包含的js脚本,必须等待js脚本都被下载、解析和执行完成之后,才开始呈现页面(浏览器遇到<body>标签才开始显示内容)
  • defer属性,只适用于外部脚本文件。脚本会立即下载,但是会延迟到整个页面都解析完毕之后再运行。defer多个脚本是按照顺序执行的,如果有依赖关系,需要特别注意脚本顺序。
  • async属性,同样只适用于外部脚本。浏览器立即下载脚本,但是下载完毕之后立即执行。使用async主要是脚本下载时并不影响页面的渲染。多个async脚本之间不能保证运行顺序。
    js和css文件位置对页面性能的影响
  • window.load事件在页面的一切加载完毕时触发
  • HTML5的DOMContentLoaded事件则在形成DOM树完成后触发,在页面进入domInteractive状态之后立即触发(DOM树构建完成之后,页面进入domInteractive状态,domInteractive状态意味着用户可以与页面产生交互)
  • 待续

参考文档

1、HTML5官方文档关于defer和async的部分

2、HTML5官方文档关于DOM树完成之后,脚本的执行以及状态的变化的部分