身为强迫症,要对自己写的代码负责,所以了解一下前端优化是有必要的~~~

  1. 文件压缩与合并
    html css js 压缩 文件合并 gzip 压缩(webpack构建工具了解一下)
    主要减少 http 请求数,文件大小的方式优化

  2. 图片压缩
    一种是雪碧图,核心也是减少 http 请求数
    一种就是压缩图片大小,这里推荐一个压缩工具图片压缩

  3. 文件加载和懒加载和预加载
    (注意:同一个 cdn 最大请求数有限制,所以有些情况会同时存在几个 cdn 用来分发资源文件)
    css 阻塞页面渲染,所以放在 head 里面
    如果 js 操作 dom,需要放在前面,方面 dom 操作
    图片等资源如果数量巨大(常见电商网站),图片在进入可视区域以后再开始加载即懒加载
    一些页面为了保证流畅度(比如用了大量图片的 h5 活动页),需要等资源全部加载结束后再开始渲染,即预加载

4) 重绘与回流
回流: 触发页面重布局(消耗很大)
重绘: 不改变布局,只改变样式,比如颜色(消耗小)
优化点:

  • 尽量减少会引起回流的操作,限制回流在一个图层
  • 使用 translate 替代 top 操作
  • 使用 opacity 替代 visibility
  • 不要一条条改变 css,而是封装成 className 整体替换
  • 复杂的操作先将 dom 结构 display:none 然后操作后显示
  1. 游览器储存
    cookie cdn 的域名和主站的域名要分开,避免请求 cdn 携带 cookie 的流量损耗
    Worker 可以把非常耗费性能的操作放在 worker 里运行,防止 js 堵塞

  2. 游览器缓存(主要是通过服务端设置)
    cache-control

    • max-age 服务端设置最大有效时间(直接游览器缓存拿)
    • s-maxage 最大有效时间(public private 公共还是私有 no-cache 不缓存 no-store)
    • expores 等同于 max-age,权重低于它
      缓存验证
    • last-modified 与 if-midified-since 与服务端协商的一个过期时间(需要请求服务端确认是缓存还是新文件 304 缓存 200 新文件)
    • eTag 文件 hash 值 等同于 last-modified 更准确的缓存策略
  3. 服务端优化
    首屏加载问题通过服务端渲染 ssr 解决(要考量平衡服务端与客户端的计算能力)