# 性能优化

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

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

# 2 网页性能优化

缓存

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

降低请求成本

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

减少请求数

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

减少传输体积

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

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

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

优化页面渲染

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

预加载

我们可以利用浏览器处于空闲时,预先加载之后会使用到的页面的元素(比如:图片,JS,CSS),之后页面再使用这些元素时会优先从缓存中读取。预加载分为这两种形式:

  1. 无条件预加载(Unconditional):页面一旦加载完成就去下载额外的元素,而这个元素并不一定在这个页面上被使用,比如Google首页加载了一张背景图,这是为了搜索结果页所准备的。
  2. 条件预加载(Conditional):这是基于用户行为做出下一步猜测而去加载元素,比如当你输入文字时会根据文字去下载不同元素。

多域名分发内容

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

减少 iframe 的使用

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

iframe 优点:

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

iframe 缺点:

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

减小Cookie

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

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

减少DOM操作

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

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