【性能优化笔记1】加载阶段页面优化

加载阶段优化

阻塞首次渲染的因素有：【能阻塞网页首次渲染的资源称为关键资源】

1. 关键资源个数【根据上图关键资源一共是3个】
2. 关键资源大小【根据上图关键资源大小一共是23KB】
3. 关键资源 RTT 数（Round Trip Time）TCP一次传输大概是14kb 【按照上图分析，需要2个RTT（JavaScript 和 CSS 是同时发起请求的，计算它们的 RTT 时，只需要计算体积最大的那个数据）】

系统优化的总体原则：减少关键资源个数，降低关键资源大小，降低关键资源的 RTT 次数。

如何减少关键资源个数？

• 内联 JavaScript 和 CSS
• 不操作 DOM 或者 CSSOM 的 JavaScript，<script>标签加上 async 或者 defer
• 如果CSS只在特定场景需要，可 添加media属性，只在满足媒体条件的情况下才被加载进来
• 如果css不需要在DOM构建之前加载,可以添加disabled标记

如何减少关键资源的大小？

• 压缩 CSS 和 JavaScript 资源
• 移除 HTML、CSS、JavaScript 文件中一些注释内容和没用的代码
• 减少关键资源个数第2，3，4条

如何减小关键资源 RTT 数？

• 减少关键资源的个数和减少关键资源的大小搭配
• CDN

在优化实际的页面加载速度时，可以先画出优化之前关键资源的图表，优化完成之后再画出优化之后的关键资源图表,两者可以进行对比