web性能优化

###1、使用静态CDN
CDN：第一，访问速度有保障，稳定性也有保障；第二，你可以省下资源服务器的一部分资源负担，节省空间节省流量。

###2、使用HTTP缓存:Etag与 Cache-Control
众所周知，整个Web系统架构在 HTTP 协议 之上，利用 HTTP 的缓存机制不仅可以极大地减少服务器负载， 更重要的是加速页面的载入，以及减少用户的流量消耗。，我们何乐而不为呢？

Cache-Control 在HTTP响应头中，用于指示代理和 UA 使用何种缓存策略。比如：

no-cache 为本次响应不可直接用于后续请求（在没有向服务器进行校验的情况下）

no-store 为禁止缓存（不得存储到非易失性介质，如果有的话尽量移除，用于敏感信息）

private为仅 UA 可缓存

public为大家都可以缓存。

当Cache-Control为可缓存时，同时可指定缓存时间（比如public, max-age:86400）。 这意味着在1天时间内，浏览器都可以直接使用该缓存（此时服务器收不到任何请求）。
下面其服务器代码直接以基本的 Node.js代码与 Chrome 浏览器来描述 HTTP 中最基本的缓存机制。

import http from ‘http’
let server = http.createServer((req, res) => {
res.setHeader(‘Cache-Control’, ‘public, max-age=86400’)
res.end(‘harttle.land’)
})
server.listen(8080)
除了 Cache-Control 中的 max-age 外，Expires等头字段也可用来设置缓存的有效性。

###3、Last-Modified 和 ETag
如果资源本身确实会随时发生改动，还用 Cache-Control 就会使用户看到的页面得不到更新。 但如果还希望利用 HTTP 缓存（万一资源没变呢），这就需要有条件的（conditional）HTTP 请求。
服务器可在 HTTP 返回头中包含Last-Modified字段或者ETag字段。Last-Modified 表示被请求资源在服务器端的上次修改时间，而 ETag 则是一个唯一文件标识符，每次文件修改后都会生成一个新的 ETag。服务器通过向浏览器发送这两个字段，来告知浏览器其获得的资源的版本。无论通过 Cache-Control 还是 Expires 设置缓存，在过期时间以内，当用户点击浏览器刷新按钮时，为了确保用户所加载的资源是最新的，大部分浏览器不会再直接使用缓存中的数据，而是发出一个条件请求。对于这类请求，浏览器会在请求头中包含If-Modified-Since或If-None-Match字段。前者即浏览器当初得到的 Last-Modified；后者即浏览器当初得到的 ETag。当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间，或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时，会响应整个资源，否则只会响应一个 304 Not Modified 状态码（因此浏览器将不需要重新下载整个资源）。这种机制可以最大程度上减少数据下载量。此外，如果缓存的资源已过期，浏览器通常有两种选择：重新下载这个资源，或发出一个条件请求。很多浏览器都会采取后者，以节约资源。由于 Last-Modified 和 ETag 的作用是相同的（均为向服务器验证资源是否最新），因此只使用一个即可。通常认为 Last-Modified 更好（它和 Expires 不同，由服务器生成，不依赖浏览器端时间）。

###4、资源压缩文件合并

资源压缩技术，文件合并，这样带来的好处就是减少http 请求数和降低网络数据传输包的大小。能有效的提供网站响应数度，
具体的方法有：
1、资源合并：多个图片合并在一个图片中，就是常说的雪碧图。
2、减少请求数：小图片直接使用base64编码。
3、使用webpack等工具将 js 和 css 分别进行压缩和大打包

###5、CSS优化
(1)将CSS代码放在HTML页面的顶部
(2)避免使用CSS表达式
(3)使用来代替@import
(4)避免使用Filters

###6、JS优化
(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS。
(4)删除重复的脚本。
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。

###7、资源懒加载
对于web网页一屏显示不了可以采用lazy加载技术，当请求网页时加载可视区的内容，当拖动滚动条时在动态的加载网页内容。

###8、避免出现 404 错误
页面尽量不要丢东西，HTTP请求是会耗时的即使这个资源已经不存在了，而且影响用户体验。

###9、使用 Gzip。
gzip 是在 Linux 系统中经常使用的一个对文件进行压缩和解压缩的命令，既方便又好用。

1)浏览器请求url，并在request header中设置属性accept-encoding:gzip。表明浏览器支持gzip。

2)服务器收到浏览器发送的请求之后，判断浏览器是否支持gzip，如果支持gzip，则向浏览器传送压缩过的内容，不支持则向浏览器发送未经压缩的内容。一般情况下，浏览器和服务器都支持gzip，response headers返回包含content-encoding:gzip。

3)浏览器接收到服务器的响应之后判断内容是否被压缩，如果被压缩则解压缩显示页面内容。

###10、减少 Cookie 体积
比如说在你每次在某个网站中的链接相互跳转的时候这些个 cookie 会把所有的 cookie 全部都带到服务器去然后服务器会把这些东西再带回了，相当的麻烦，所以若是不是特别必要的东西建议写在 local storage 里面。