性能优化

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 改变页面布局

---