Web性能优化-代码优化

2021-09-09  本文已影响0人  littleyu

代码位置优化

<head>
 // css ....
</head>
<body>
  // js ...
</body>

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

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

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

代码拆分（Code Split）

  1. runtime-xxx.js // webpack 提供的库（里面有 require 等）
  2. rendor-xxx.js // 第三方库（Vue、Vuex 等）
  3. common-xxx.js // 共用 JS
  4. page-index-xxx.js // 每个页面的 JS
  1. reset / normolize.css
  2. rendor-xxx.css
  3. common-xxx.css
  4. 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 优化技巧

  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 等）
上一篇下一篇

猜你喜欢

热点阅读