1. 常规方案

原则：

• 多使用内存、缓存或者其他方法
• 减少CPU计算、较少网络

从哪里入手：

• 加载页面和静态资源
• 页面渲染

1.1 加载资源优化

• 静态资源的压缩合并

  <script src="a.js"></script>
  <script src="b.js"></script>
  <script src="c.js"></script>
  <script src="abc.js"></script>

• 静态资源缓存（Cache-Control、Etag）
  • 通过连接名称控制缓存
  • <script src="abc_1.js"></script>
  • 只有内容改变的时候，链接名称才会改变
  • <script src="aba.2.js"></script>
• 使用CDN让资源加载更快
• 使用SSR后端渲染，数据直接输出到HTML中
• 页面中的空 href 和 src 会阻塞其他资源的加载（阻塞下载进程）
• 服务器 gzip

1.2 渲染优化

• CSS放前面，JS放后面（JS 会阻塞页面的渲染，但是加载还是与其他资源一样处于并行）
• 懒加载（图片懒加载、下拉加载更多）
  • 懒加载原理：
  • 将图片的默认src都设置为一张加载图片
  • 把图片标签的属性中添加一个值存放图片的真实地址
  • 当图片需要加载时，再将图片的真实地址替换原有的默认src

    <img id="img1" src="preview.png" data-realsrc="abc.png"/>
    <script type="text/javascript">
      var img1=document. getElementById(' img1')
      img1. src=img1. getAttribute(' data-realsrc')
    </script>

• 减少DOM查询，对DOM查询做缓存（将要重复使用的DOM存放在一个变量中）
  • 
  • 
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作（如DOMContentLoaded）
• 禁止使用 iframe
  • iframe 会阻塞页面的 onload 事件
  • 不利于SEO
  • iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  • 使用 iframe 最好通过 javascript
  • 动态给 iframe 的 src 赋值

2. 非常规方案

2.1 使用preload与prefetch对页面资源进行预加载

MDM文档

• 使用 preload 可以预先加载资源文件
• 预加载的资源不会对后面的资源造成阻塞
• preload 不阻塞 onload 事件（<script async> 会阻塞 onload 事件）
• 预加载的 script 不会被执行，需要在页面中领用创建 <script> 标签的方式动态调用
• prefetch用来加载下一个页面将要使用的资源，所以优先级最低

preload 是个好东西，能告诉浏览器提前加载当前页面必须的资源，将加载与解析执行分离开，做得好可以对首次渲染带来不小的提升，但要避免滥用，区分其与 prefetch 的关系，且需要知道 preload 不同资源时的网络优先级差异。