JS性能优化

好多年前写的笔记移动到博客上

1.资源合并与压缩

  • 减少http请求
  • 减少请求资源大小

html压缩

  1. 在线网站压缩(现代浏览器不再使用)
  2. node.js html-minifier 工具
  3. 后端模板引擎压缩

css 压缩

  1. 在线网站压缩(现代浏览器不再使用)
  2. html-minifier 工具
  3. clean-css 对css进行压缩

js压缩与混乱

  • 无效字符的删除
  • 剔除注释
  • 代码语义保护
  • 代码保护
  1. 在线网站压缩(现代浏览器不再使用)
  2. html-minifier 工具
  3. uglifyjs2 对js进行压缩

文件合并

  • 首屏渲染
  • 缓存失效
  1. 在线网站压缩(现代浏览器不再使用)
  2. 使用node.js 实现文件合并

fis3 类似 webpack 工具。

效果是有的

图片相关优化

  • 图片压缩
  • css雪碧图(不常用了) 一次加载比较慢 — 合适的
  • image inline base64格式转化
  • 矢量图 svg iconfont
  • tinypng.cpm 图片压缩
  • 智图 把png转成webp格式 整体压缩%40+

雪碧图

svg

css js加载过程 页面渲染

  • 顺序执行 并发加载
  • 是否阻塞
  • 依赖关系
  • 引入方式

css阻塞

  • 会阻塞页面渲染 加载并分析完才渲染
  • css不阻塞外部脚本加载 阻塞执行

js阻塞

  • 直接引入的js阻塞页面的渲染
  • js不阻塞资源加载
  • js 顺序执行，阻塞后续js逻辑执行
  • js不阻塞资源加载 阻塞后续代码执行

懒加载和预加载

  • 图片进入可视区域之后才请求 = 懒加载
  • 电商图片很多
  • 减少无效资源加载
  • 并发加载的资源过多会阻塞js加载

预加载

  • 图片等静态资源提前请求
  • 资源使用到时能产品能够缓存中加载，提示用户体验
  • 页面展示的一览关系维护

实现方式

  • 懒加载 监听scroll事件当元素到达可视区域的时候再进行请求加载数据
  • 预加载
  1. 可以用img标签src提前下载好图片 设置display none
  2. new Image() 对象然后对src属性进行赋值(需要预加载的资源)
  3. xmlhttprequest() 也可以

重绘与回流

  • 元素的规模尺寸,布局,隐藏等改变而需要改变需要重新构建 这就称为回流(reflow)

  • 当页面布局和几何属性改变时就需要回流

  • 代价很大 少用

  • 重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观,风格，而不会影响布局的，比如color 则称之为重绘

  • 回流必定会引起重绘

  • 而重绘不一定会引起回流

  • 新建图层 transform: tansitionZ(0) will-change:transform

  • translate 替换position-top
  • opacity替换visibility 借助transform: tansitionZ(0)
  • js修改css使用class动态修改 减少回流与重绘
  • 多条样式修改时先display:none 改完在显示
  • 不要在循环内多次获取dom元素属性
  • 不要使用table布局
  • 动画平滑度
  • 启用gpu硬件加速transform: tansitionZ(0) will-change:transform

localStorage SessionStorage会话(关闭就无法使用了)

IndexedDB 存储客户端大量的结构化数据

缓存优化

  • chache-Control 缓存策略

    1
    2
    3
    4
    5
    6
    max-age
    s-maxage
    private
    public
    no-chache
    no-store

  • expires

  • last-modified/if-modified-Since

  • etag/If-None-Match 文件内容的hash值

服务端性能优化

  • 构建层模板编译
  • 数据无关的prerender的方式
  • 服务端渲染