JesseZhao1990
commented
4 years ago script 标签的defer和async属性
-
defer 该布尔属性被用来设定用来通知浏览器，该脚本将在文档完成解析后，触发DomContentLoad事件之前执行
-
async 该布尔属性指示浏览器是否在允许的情况下异步执行该脚本
看一下HTML规范对其的定义：
There are several possible modes that can be selected using these attributes, and depending on the script's type.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
For module scripts, if the async attribute is present, then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing. (The defer attribute has no effect on module scripts.)
再来看一下规范中的图示
1. 资源的合并和压缩相关的优化
2. 图片相关的优化
3. css和js的装载和执行相关的优化
3.1 css和js的装载和执行的特点
3.2 根据css和js的装载和执行的特点来进行对应的优化
4. 懒加载和预加载相关的优化
5. 重排和重绘相关的优化
重排
当render tree由于元素的规模、尺寸、布局、隐藏等改变而需要重新构建，这就叫重排 什么条件下会触发页面的重排呢？
重绘
当render tree中的元素需要更新属性，而这些属性只是影响外观风格，而不影响布局的时候，比如背景色的改变。这就叫重绘 什么条件下会触发页面的重绘呢？
那么我们应该如何在重绘和重排这方面去优化页面的性能呢？
说到新建图层。那接下来我们探讨一下新建图层的方法有哪些。
6. 浏览器存储相关的优化
7. 缓存相关的优化
8. ssr相关的优化