网路层面

1、减少 HTTP 请求

在陪玩平台源码中一个完整的http请求包含DNS查找，Tcp握手，客户端发送请求，服务器回应请求，浏览器等待响应。

名词解释：

• Queueing: 在请求队列中的时间。
• Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。
• Proxy negotiation: 与陪玩平台源码代理服务器连接进行协商所花费的时间。
• DNS Lookup: 执行DNS查找所花费的时间，陪玩平台源码页面上的每个不同的域都需要进行DNS查找。
• Initial Connection / Connecting: 建立连接所花费的时间，包括TCP握手/重试和协商SSL。
• SSL: 完成SSL握手所花费的时间。
• Request sent: 发出网络请求所花费的时间，通常为一毫秒的时间。
• Waiting(TFFB): TFFB 是发出陪玩平台源码页面请求到接收到应答数据第一个字节的时间。
• Content Download: 接收响应数据所花费的时间 — 13.05。

从这个例子可以看出，真正下载数据的时间占比为 13.05 / 204.16 = 6.39%。
合并成大文件以后，这些开销所花费的时间不变，但是真正下载的比例变大了。比例越高代表这次http利用率更大，自然效率越高。
这就是为什么要建议将陪玩平台源码多个小文件合并为一个大文件，从而减少 HTTP 请求次数的原因。

2、使用 HTTP2

为什么要使用http2，它比http1.1有哪些有点呢？

解析速度快

陪玩平台源码服务器解析HTTP1.1的请求时，必须不断的读入字节，直到遇到分隔符CRLF为止。HTTP2的请求不会这么麻烦，因为HTTP2是基于帧的协议，每个帧都有表示帧长度的字段。

多路复用

对于HTTP1.1如果同时发起多个请求，就得建立多个TCP连接，因为一个TCP连接同时只能处理一个http请求。
在HTTP2上，多个请求可以共用一个TCP连接，这被称作多路复用。一个请求会有唯一的流ID来保证数据的正确。

首部压缩

HTTP/2 在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键－值对，对于相同的数据，不再通过每次请求和响应发送。
如果服务器收到了请求，它会照样创建一张表。
当客户端发送下一个请求的时候，如果首部相同，它可以直接发送首部key： 62 63 64。
陪玩平台源码服务器会查找先前建立的表格，并把这些数字还原成索引对应的完整首部。

优先级

HTTP2 可以对比较紧急的请求设置一个较高的优先级，服务器在收到这样的请求后，可以优先处理。

流量控制

带宽固定的情况下，陪玩平台源码一个请求占用的流量大了，那么另外一个请求的流量就会少。HTTP2可以对流占用的流量进行精确的控制，这样优先级高的可以快速处理完成。

3、优化图片

使用字体图标 iconfont 代替图片图标

陪玩平台源码字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。

选择正确的压缩级别

可以使用image-webpack-loader 来压缩图片：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /*对图片进行压缩*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

• 首选矢量格式：矢量图像与分辨率和比例无关，这使得它们非常适合多设备和高分辨率的世界。
• 缩小和压缩 SVG 资产：大多数绘图陪玩平台源码生成的 XML 标记通常包含可以删除的不必要的元数据；确保您的服务器配置为对 SVG 资产应用GZIP 压缩。
• 比旧的光栅格式更喜欢 WebP：WebP 图像通常比旧图像小得多。 选择最佳光栅图像格式：确定您的功能要求并选择适合每个特定资产的格式。
• 试验光栅格式的最佳质量设置：不要害怕调低“质量”设置，结果通常非常好并且字节节省很大。
• 删除不必要的图像元数据：许多光栅图像包含有关资产的不必要的元数据：地理信息、相机信息等。使用适当的工具来剥离这些数据。
• 提供缩放图像： 调整图像大小并确保“显示”尺寸尽可能接近图像的“自然”尺寸。特别要注意大图像，因为它们在调整大小时占最大的开销！
• 自动化、自动化、自动化：投资自动化工具和基础设施，以确保您的所有图像资产始终得到优化。

用视频替换动画 GIF 以加快页面加载速度

GIF 和视频之间的成本节省可能非常显着。

动画 GIF 具有视频需要复制的三个关键特征：

• 它们会自动播放。
• 它们连续循环（通常，但可以防止循环）。
• 他们沉默。

幸运的是，您可以使用该元素重新创建这些行为。

<video autoplay loop muted playsinline></video>

具有这些属性的元素会自动播放、无休止地循环播放、不播放音频并在线播放（即，非全屏播放），这是动画 GIF 所期望的所有标志性行为！🎉

兼容：

<video autoplay loop muted playsinline>  
    <source src="my-animation.webm" type="video/webm">  
    <source src="my-animation.mp4" type="video/mp4">
</video>

4、缓存

该缓存主要围绕陪玩平台源码浏览器缓存做相关处理，同时也是最低成本的性能优化策略。浏览器缓存能显著提升网页访问速度，减少带宽损耗。

静态资源使用 CDN

渲染层面

陪玩平台源码渲染层面的性能优化，无疑是如何让代码解析更好执行更快，并且减少重绘重排。

浏览器渲染过程

1、解析HTML生成DOM树。
2、解析CSS生成CSSOM规则树。
3、将DOM树与CSSOM规则树合并在一起生成渲染树。
4、遍历渲染树开始布局，计算每个节点的位置大小信息。
5、将渲染树每个节点绘制到屏幕。

基于这些制造一些优化点：

• CSS策略：基于CSS规则
• DOM策略：基于DOM操作
• 阻塞策略：基于脚本加载
• 回流重绘策略：基于回流重绘
• 异步更新策略：基于异步更新

CSS策略

1、避免陪玩平台源码出现超过三层的嵌套规则
2、避免为ID选择器添加多余选择器
3、避免使用标签选择器代替类选择器
4、避免陪玩平台源码使用通配选择器，只对目标节点声明规则
5、避免重复匹配重复定义，关注可继承属性

DOM策略

1、缓存DOM计算属性
2、避免过多DOM操作
3、使用DOMFragment缓存批量化DOM操作
4、陪玩平台源码使用事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。

阻塞策略

1、脚本与DOM/其它脚本的依赖关系很强：对

回流重绘策略

1、缓存DOM计算属性
2、使用类合并样式，避免逐条改变样式
3、使用display控制DOM显隐，将DOM离线化
4、使用 flexbox 而不是较早的布局模型
5、使用 transform 和 opacity 属性更改来实现动画
6、使用 requestAnimationFrame 来实现视觉变化

异步更新策略

在陪玩平台源码的异步任务中修改DOM时把其包装成微任务