Web应用性能优化随笔

优化思路是什么？

BIG QUESTION: 当我们谈到一个web应用的性能优化，应该从哪些方面去考虑？

思路就是，当我们去访问一个web应用的时候，都做了哪些操作？对应这些操作的，就是我们所能进行的优化的模块！

1. 浏览器请求DNS服务器，获取IP地址；
2. 建立TCP连接；
3. 浏览器发出详细请求，通常为HTTP(s)、WebSocket之类；
4. 服务器响应请求，并返回数据；
5. 浏览器渲染返回的数据到页面；
6. 释放TCP连接；

那么，我们接下来就按照这个流程，一步一步来看如何进行优化。

---

不好控制和不重要的优化内容

1. DNS

首先，DNS查询的流程如下图所示

当有浏览器缓存时，就不会去查询之后的步骤，有无缓存的对比如下图

可以看到，DNS Lookup这一步，在有缓存之后就不会出现。

2. TCP连接建立

同样如上图所示，Initial Connection 所占用的时间即为TCP建立连接的耗时。由于TCP建立需要3次握手的操作，使其成为HTTP(s)协议通信耗时最长的过程。

针对这个过程，我们可以使用HTTP Keep-Alive机制，来保持TCP连接状态，这样可以使客户端不需要在每次http请求的时候都去与服务器建立TCP连接，可以节省掉很大的时间开支、提高服务器吞吐率。

之所以说这个也是不好控制和不重要的优化点，是因为现代浏览器已经默认支持 Keep-Alive，而常用的Web服务器也都可以对应进行支持。

如需手动设置，要注意 timeout 和 max 参数，保持时间太长的TCP连接，也会对服务器造成无用资源消耗。

重要的优化内容

3. 浏览器请求和服务器响应

针对请求和响应的优化，简而言之，就是：

1. 减少请求次数
2. 降低请求耗时

在这里，可做的优化点包括：

1. CDN
2. 压缩传输，即GZIP/Deflate
3. 前端模块化
4. 使用缓存
5. 使用本地存储
6. 负载均衡：Nginx/SLB

3.1 CDN

CDN是Web应用优化的基础，也是最重要最影响用户体验的一个环节！
在项目中，需要注意将打包后的资源文件上传到CDN地址，并且在构建工具中配置相关CDN信息。

3.2 数据压缩

服务端与客户端的数据交互可通过压缩来进行优化，常用的压缩方式是 GZip和Deflate，本文以 GZip为例。
GZip支持 HTML/CSS/JS/XML/PlainText等多种格式的压缩。

下图可看出是否使用压缩，对于传输文件大小的影响。

3.3 前端模块化

前端模块化便于文件管理、也更利于资源归类压缩，模块化大致经历了如下历程。

script -> 闭包函数 -> AMD -> CMD -> CommonJS -> ES6

而对应的构建工具，也有以下发展历程。

Grunt/Gulp -> Browserify -> Webpack

前端模块化详情可参见 《Web前端模块化方法》

3.4 使用缓存

当客户端使用服务端返回的内容时，可以通过缓存机制，减少请求传输次数。
缓存分为 强制缓存和协商缓存 两种。

强制缓存使用 Expires 和 Cache-Control:max-age 控制缓存有效时间。
协商缓存使用 Last-Modified 配合 ETag 控制缓存有效时间。

通常来讲，系统优先匹配强制缓存。
对于静态资源，系统需要做好相关缓存，避免重复请求。

3.5 使用本地存储

使用本地存储，可以在一定程度上减少服务器请求，也可以加快内容展示速度。

本地存储的使用有以下历程：

Cookie+变量 -> WebStorage -> 单页面内存式存储 -> IndexDB

变量 + Cookie


• Cookie 被设计来管理状态，但在简单应用中可存储数据

• 4KB限制 + 域名绑定

单页面内存式存储

• 针对单页面应用设计的变量存储
• 如VueX

Web Storage

• LocalStorage & SessionStorage
• 区别：生命周期、作用域

IndexDB


• 终极方案、NoSQL

3.6 负载均衡

通常负载均衡包含4中模式：

4. 浏览器渲染

4.1 Async和Defer

对于资源文件的引入，使用 async和defer。
async 没有固定顺序，即加载到文件就会引入；
defer会按照dom顺序进行插入。

4.2 懒加载

内容的懒加载，如配合 vue-router的按需加载；
图片的懒加载，即需要展示时才去加载。

4.3 图片优化

图片优化是渲染层面能够最大程度提升性能的优化模块，也是操作起来最麻烦、需要投入精力最多的模块。

笔者认为大致分为三个方向：

1. 源：确保所有的图片都从CDN源获取
2. 裁剪：使用正确大小的图片
3. 格式：按需使用格式

源和裁剪都比较明确，格式方面我们细说一下。

常用格式包括：

1. JPG：
   体积小、有损压缩、不支持透明
2. PNG：
   体积大、无损压缩、支持透明
3. SVG：
   文本文件、体积小、不失真、兼容性好
4. BASE64：
   文本文件、依赖编码、小图标解决方案；
   需要少量小图标时可以使用此方案，需要大量小图标时建议使用CssSprites；

5. WebP
   新格式，支持动图、体积小；浏览器支持的兼容性差。

   # 阿里在1688网站上的使用方法可以借鉴：
   https://alicdn.com/xxx.jpg_xxx.webp

4.4 Throttle & Debounce

节流（Throttle）

在某段时间内，不论触发了多少次回调，都只做第一次，并在结束时给出响应。

防抖（Debounce）
在某段时间内，不论触发了多少次回调，都只做最后一次，并在完成后给出响应。

节流和防抖的目标，都是减少执行，降低损耗，减少卡顿。

示例如下：

Throttle示例

let flag = false
window.onscroll = () => {
    if (flag) {
        return
    }
    flag = true
    setTimeout(()=>{
        doSomething()
        flag = false
    })
}

Debounce示例

<input onKeyUp="kp()">

var timer
var kp = ()=> {
    clearTimeout(timer)
    timer = setTimeout(()=> {
        search()
    }, 500)
}