Web性能优化常见方式

Web性能优化是什么？简单的说就是为实现让用户感觉页面加载很快的目的，尽可缩短用户从输入URL（网址）到页面在浏览器上加载出来的时间。本文将以页面从输入URL到加载的顺序罗列一些性能优化方式。

1. 缓存

访问网站时，浏览器首先会查看是否有缓存。有缓存的情况下，可以不再发送HTTP请求而直接显示页面。可以通过设置缓存方式、缓存时间、使用CDN资源缓存等实现优化。

2. DNS查询

DNS查询完成之前，浏览器无法从服务器下载任何数据，所以可用的优化方式主要是减少请求的DNS数量，将资源尽量置于同一域名下。

3. TCP连接

简单描述优化方案：TCP 连接复用（TCP Connection Reuse），在 HTTP 请求头中的 Connection 上加 keep-alive；HTTP/2.0 多路复用等。

4. HTTP请求

1. 减少cookie的体积，不滥用，可以优化每次请求时带上cookie对响应速度的影响。
2. 使用Cache-Control缓存，缓存有效期间可以不发送请求，省去请求消耗的时间。

5. 接受响应

1. 配置 Etag
   通过如 MD5 等加密算法，设置缓存体的 Etag ，只要浏览器缓存中资源与源服务器中的资源 Etag 不一致，说明内容更新了，此时再下载新资源；Etag 匹配成功则直接响应 304，不用重复下载可以使用户感觉到访问速度的提升。
2. 使用 Gzip
   使用 Gzip 就是将 HTML、CSS、JS、XML、JSON 等资源进行 Gzip 高效压缩，减少资源体积那么下载就会更快。Gzip 压缩通常可以减少 70% 的响应大小，并且对于越大的文件提升效率更为明显。

6. 延迟加载（懒加载）

非首屏使用的数据、样式、脚本、图片等用户交互时才会显示的内容非常适合使用懒加载。
遵循「渐进增强」理念开发的网站：JavaScript用于增强用用户体验，但没有（不支持） JavaScript也能正常工作，完全可以延迟加载JavaScript。

7. CSS、JS文件优化策略

1. 尽量使用CDN更快速地请求静态资源。
2. css在head中引入：达到尽早下载的目的，使用户在视觉上先感知到网站“加载速度快”。
3. js在body最后引入：页面未加载完js也可看到完整页面样式，在用户看到页面到开始交互事件时有足够时间加载js文件，用户体验不受影响。另外，尽早显示页面也能保证完整获取DOM结点，保证js的效果实现。
4. 使用外部的css、js文件：外部 JavaScript 和 CSS 文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。
5. 合并和压缩 JS/CSS 等文件：减少页面所需资源，减少请求数量，加快响应时间。现在的打包工具一般会默认实现。

8. 优化图片

将图片大小压缩并且保证视觉效果不受影响，将大大降低页面加载时需要的资源大小。