Rni-L Blog

Appearance

前端优化 ​

要根据实际项目的情况进行对应的优化，下列为通用的

外链资源 ​

  1. 雅虎军规
  2. http 缓存

静态资源优化 ​

减少 http 请求的文件资源 ​

  1. 合并 css、js 等文件
  2. 将小图片转成 base64
  3. 将 icon 转为字体文件
  4. 代码分割
    1. 按照路由分割，webpack 的 splitChunk 等工具
    2. 首屏资源懒加载，首屏不需要的资源，不加载

减少资源体积 ​

  1. 压缩图片
  2. 压缩代码文件
  3. 采用 gzip 压缩
  4. 使用 css Sprites，将多张图片合成一张图片，再使用 background 进行控制，从而显示图片

优化请求 ​

  1. 使用 cdn
  2. 减少 dns 查询
  3. 使用域名分发。因为每个浏览器，同时并行请求资源的数量有限（chrome 是 6 个，移动端更少），可以使用不同的域名，使并行请求的资源更多
  4. 使用缓存
    1. 浏览器的强缓存
    2. 服务器的缓存
    3. 对一些不常变化的资源（图片等媒体资源），通过配置 cache-controll 或 expires(http 1.0 的字段)，设置资源的缓存
  5. 代码文件放置的位置
    1. 主要的样式文件，要放在 head 里面，不然 html 内容加载后，但是没样式会很丑
    2. js 文件放在 </body> 前，等 html 内容加载完后，再加载 js 文件，这样会减少首屏白屏的时间
  6. 预加载资源
    1. 当网络空闲时，可以请求一些虽未用到，但比较重要或将要用到的资源
      1. 比如在页面的 onload 或一些比较前的节点，进行加载
  7. 减少 404 请求的出现，因为 404 也算是一个 http 的请求
  8. 减少 cookie 的体积，因为每个请求都会带上 cookie，所以会影响传输的速度
    1. 对一些没有权限、自由的静态资源，有条件的情况，可以使用另外的域名，不带 cookie 的，这会减少一部分的大小

代码优化 ​

  1. 减少 dom 操作
  2. 减少 dom 的数量
  3. 使用事件委托，减少添加的事件
    1. 找到需要添加事件的节点的父节点，添加相对应的事件，根据触发回调的事件对象中的 target 判断实际点击的是哪个节点
  4. 尽量减少 reflow 和 repaint （重排和重绘）
    1. reflow: 节点的某些属性发生变化了（颜色、背景、opacity等），是重绘
    2. repaint：部分节点需要重新计算的，是重排
      1. 修改某节点的 margin、padding、width、height、相对定位的 left、top、right、bottom、line-height 等属性
    3. 对某个节点添加动画时，使用 trasnform 代替 margin、left、top；给该节点添加绝对定位，会减少 repaint 时影响到的节点
  5. 减少 css 级联
    1. css 级联的查询，是从右到左开始
  6. 避免使用全局变量
  7. 避免 img 标签 src 是空值
    1. 这会导致浏览器向当前域名的服务器发送请求（旧的浏览器）

使用工具，进行针对性的优化 ​

javascript
var timing = window.performance.timing
timing.domLoading  //浏览器开始解析 HTML 文档第一批收到的字节
timing.domInteractive  // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕
timing.domContentLoadedEventStart //DOM 解析完成后，网页内资源加载开始的时间
timing.domContentLoadedEventEnd // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
timing.domComplete //网页上所有资源（图片等）下载完成,且准备就绪的时间

服务端渲染优化 ​

服务端渲染有多个入口，将每个页面有重复的模块抽出来进行额外的打包（至于重复的数量是多少，按实际需求，比如只有几个页面是需要某个库的，那这几个页面才会加载这个额外的文件）