方圆的博客

# 性能优化

# 1 vue渲染大量数据时应该怎么优化?

  • 添加加载动画loading图等，优化用户体验
  • 利用服务器渲染SSR，在服务端渲染组件
  • 避免浏览器处理大量的dom，比如懒加载，异步渲染组件，使用分页
  • 对于固定的非响应式的数据，使用 Object.freeze 冻结

# 2 网页性能优化

# 缓存

  • 客户端控制的 强缓存策略

# 降低请求成本

  • HTTP DNS：由客户端控制，隔一段时间主动请求 DNS 获取域名 IP，不走系统的 DNS
  • TCP / TLS 连接的复用：由服务端升级到 HTTP2, 尽量合并域名

# 减少请求数

  • JavaScript、CSS 打包到 HTML
  • 用 JavaScript 控制图片的 异步加载 和 懒加载
  • 小型图片使用 data-uri (opens new window)

# 减少传输体积

  • 尽量使用 SVG/gradient 等代替图片
  • 根据机型和网络状况控制图片清晰度
  • 对低清晰度图片使用锐化(PS)来提升体验
  • 设计上避免大型背景图

# 减少页面体积，提升网络加载

  • 静态资源的压缩合并(JS代码压缩合并、CSS代码压缩合并、雪碧图)
  • 静态资源缓存(资源名称加 MD5 戳)
  • 使用 CDN 加载

# 优化页面渲染

  • CSS 放前面， JS 放后面
  • 懒加载（图片懒加载、触底刷新等）
  • 减少 DOM 查询， 对 DOM 查询做缓存
  • 减少 DOM 操作，多个操作尽量合并在一起执行 (DocumentFragment)
  • 事件节流
  • 使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间

# 预加载

我们可以利用浏览器处于空闲时，预先加载之后会使用到的页面的元素（比如：图片、js、css），之后页面再使用这些元素时会优先从缓存中读取。预加载分为这两种形式： - 无条件预加载(Unconditional)：页面一旦加载完成就去下载额外的元素，而这个元素并不一定在这个页面上被使用，比如 Google 首页加载了一张背景图，这是为了搜索结果页所准备的。 - 条件预加载(Conditional)：这是基于用户行为做出下一步猜测而去加载元素，比如当你输入文字时会根据文字去下载不同元素。

# 多域名分发内容

使用多域名分发内容可以增加浏览器并行下载数，由于 DNS 解析也要耗时， 一般 2-4 个域名 比较合适。比如你可以把 HTML 或 JSP、PHP等文档文件放在 www.example.com 这个域名上，而把静态文件放在 static1.example.com 或者 static.example.com 二级域名上。

# 减少 iframe 的使用

iframe 可以让 HTML 文档嵌套在另一个 HTML 文档内，想要更好的使用它们就必须知道它们的工作原理。

iframe 优点：

  • 延迟加载广告等第三方内容
  • 提供安全沙箱
  • 并行下载脚本

iframe 缺点

  • 代价昂贵
  • 阻止父级页面的加载
  • 非语义化

# 减少Cookie

Cookie 常常被用在身份验证或者存储个人信息，它会通过 HTTP 头信息再服务端和浏览器之间传输，为了减少 HTTP 响应时间，我们有必要减小 Cookie。

通常有以下几个方法：

  • 清除不必要的 Cookie
  • 尽量减小 Cookie 内容的长度
  • 在适当的域中设置 Cookie，保证其他子域不受影响
  • 设定合适的 Cookie 的过期时间

# 减少 DOM 操作

频繁用 JS 操作 DOM 的开销很大，我们可以通过以下几种方式减少这种开销：

  • 缓存获取到的 DOM 元素
  • 批量处理元素，一次性更新到文档
  • 尽量避免用 JS 改变页面布局