代码位置优化
<head>
// css ....
</head>
<body>
// js ...
</body>
上文说到，CSS 要放在上面，JS 要放到下面，因为一些阻塞关系
HTML
不会相互影响/ \相互阻塞
CSS ————— JS
相互阻塞
- CSS 为什么放在上面？
- 不阻塞 HTML 解析，尽早下载
- 防止被外部 JS 阻塞（虽然和 JS 是相互阻塞关系，但是对于用户来说要先看到界面的样子，如果先加载 JS 那么界面可能会白屏、闪烁）
- JS 为什么放在下面？
- 可以直接访问 DOM，无须监听 DOM Ready
- 避免阻塞 HTML 解析
内联 JS 放在哪里？最上面，越快执行越好
代码拆分（Code Split）
- JS
- runtime-xxx.js // webpack 提供的库（里面有 require 等）
- rendor-xxx.js // 第三方库（Vue、Vuex 等）
- common-xxx.js // 共用 JS
- page-index-xxx.js // 每个页面的 JS
- CSS
- reset / normolize.css
- rendor-xxx.css
- common-xxx.css
- page-index-xxx.css
JS 动态导入
const array = [1, 2, 3]
import('lodash').then(_ => {
const clone = _.cloneDeep(array)
})
// 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,
})}
]
})
图片懒加载
<img src="placeholder.png" data-src="product.jpg">
预加载
比如图片懒加载时，用户滚动过快还是加载过慢，所以当用户快滚到的时候就提前开始加载
或者像 UC 浏览器一样，看小说的时候，在点击下一页之前，就提前加载好下一页内容
CSS 优化技巧
- 删除无用的 CSS（使用 webpack 的插件或者 Coverage 工具找到无用的代码，不推荐这种优化，无法确保正确删除）
- 使用更高效的选择器（即使
*通配符不高效，但是这已经是十几年钱的技术了，浏览器早就优化了，只有当写出* * div *这种才会导致低效） - 减少重拍（reflow / relayout）
- 不要使用 @import url.css （因为这是串行，会阻塞下面的 CSS，直接用 Link 标签并行加载）
- 启用 GPU 硬件加速（transform: translate3d(0,0,0); 这行代码不会对元素产生任何影响，但是当有动画的时候会有 GPU 加速）
- 使用缩写（#ffffff => #ff，0.1 => .1，0px => 0）
- 看需求，减少无意义的动画，一般动画用户看了三次以后就会看腻
JS 优化技巧
- 尽量不用全局变量（因为全局变量太多会使变量查找变慢）
- 尽量少操作 DOM（比如说 10 个节点不要一个一个插入，而是一次性插入）
- 不要往页面插入大量的 HTML（分片插入，比如 facebook Fiber 等）