代码位置优化

1
2
3
4
5
6
<head>
 // css ....
</head>
<body>
  // js ...
</body>

上文说到，CSS 要放在上面，JS 要放到下面，因为一些阻塞关系

1
2
3
4
            HTML
不会相互影响/    \相互阻塞
        CSS ————— JS
           相互阻塞
  • CSS 为什么放在上面？
  1. 不阻塞 HTML 解析，尽早下载
  2. 防止被外部 JS 阻塞（虽然和 JS 是相互阻塞关系，但是对于用户来说要先看到界面的样子，如果先加载 JS 那么界面可能会白屏、闪烁）
  • JS 为什么放在下面？
  1. 可以直接访问 DOM，无须监听 DOM Ready
  2. 避免阻塞 HTML 解析

内联 JS 放在哪里？最上面，越快执行越好

代码拆分（Code Split）

  • JS
  1. runtime-xxx.js // webpack 提供的库（里面有 require 等）
  2. rendor-xxx.js // 第三方库（Vue、Vuex 等）
  3. common-xxx.js // 共用 JS
  4. page-index-xxx.js // 每个页面的 JS
  • CSS
  1. reset / normolize.css
  2. rendor-xxx.css
  3. common-xxx.css
  4. page-index-xxx.css

具体配置在这里

JS 动态导入

1
2
3
4
const array = [1, 2, 3]
import('lodash').then(_ => {
  const clone = _.cloneDeep(array)
})
1
2
3
4
5
6
7
8
9
10
11
// https://cn.vuejs.org/v2/guide/components-dynamic-async.html
const router = new VueRouter({
  routes: [
    {path: '/x', component: () => import('./xxx.vue')}
    {path: '/', component: () => ({
      component: import('./xxx.vue),
      loading: LoadingComponent,
      error: ErrorComponent,
    })}  
  ]
})

图片懒加载

1
<img src="placeholder.png" data-src="product.jpg">

预加载

比如图片懒加载时，用户滚动过快还是加载过慢，所以当用户快滚到的时候就提前开始加载
或者像 UC 浏览器一样，看小说的时候，在点击下一页之前，就提前加载好下一页内容

CSS 优化技巧

  1. 删除无用的 CSS（使用 webpack 的插件或者 Coverage 工具找到无用的代码，不推荐这种优化，无法确保正确删除）
  2. 使用更高效的选择器（即使 * 通配符不高效，但是这已经是十几年钱的技术了，浏览器早就优化了，只有当写出 * * div * 这种才会导致低效）
  3. 减少重拍（reflow / relayout）
  4. 不要使用 @import url.css （因为这是串行，会阻塞下面的 CSS，直接用 Link 标签并行加载）
  5. 启用 GPU 硬件加速（transform: translate3d(0,0,0); 这行代码不会对元素产生任何影响，但是当有动画的时候会有 GPU 加速）
  6. 使用缩写（#ffffff => #ff，0.1 => .1，0px => 0）
  7. 看需求，减少无意义的动画，一般动画用户看了三次以后就会看腻

JS 优化技巧

  1. 尽量不用全局变量（因为全局变量太多会使变量查找变慢）
  2. 尽量少操作 DOM（比如说 10 个节点不要一个一个插入，而是一次性插入）
  3. 不要往页面插入大量的 HTML（分片插入，比如 facebook Fiber 等）