###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 里面。