前端性能优化5大方式_如何利用合并脚本和样式表的方式实现前端优化-CSDN博客

本文链接：https://blog.csdn.net/qq_42586648/article/details/110291601

方式一：资源压缩合并，减少HTTP请求

方式二：非核心代码异步加载

方式一：资源压缩合并，减少HTTP请求

1.雪碧图，将多张图片合并成一张图片，以此来减少图片请求。但是随着http2与iconfont的普及，雪碧图其实以及被淘汰了。

2.合并脚本和样式表。将引入的js文件和 css 文件合并成一个文件，减少HTTP请求次数，加快页面响应速度。

方式二：非核心代码异步加载

2.1异步加载的方式

1.动态脚本加载

2.defer

3.async

2.2异步加载的区别

1.defer 是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行。

2.async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

方式三：利用浏览器缓存

3.1缓存的分类

1.强缓存

直接从本地缓存中拿出使用，不与服务器通信。

Expires Expires:YHU,21 Jan 2017 23:39:02 GMT//绝对时间，时间限制有服务器生成，容易有偏差
Cache-Control Cache-Control:max-age=3600//相对时间，优先级更高

Cache-control 响应头表示了资源是否可以被缓存，以及缓存的有效期。

no-cache 为本次响应不可直接用于后续请求（在没有向服务器进行校验的情况下）
no-store 为禁止缓存（不得存储到非易失性介质，如果有的话尽量移除，用于敏感信息）
privte 为仅 UA 可缓存.
public 为大家都可以缓存。

2.协商缓存

Last-Modified响应头和If-Modified-Since请求头

Last-Modified 表示资源最后的修改时间，在浏览器第一次发送HTTP请求时，服务器会返回 Last-Modified 响应头。

浏览器在第二次发起HTTP请求时，会带上 If-Modified-Since请求头，其值就是第一次发送HTTP请求时，服务器设置在Last-Modified响应头中的值。

两种情况：如果资源最后修改时间大于If-Modified-Since，说明资源有被改动过，则响应完整的资源内容，返回状态码200；

如果小于或者等于，就说明资源未被修改，使用缓存中的内容，返回状态码 304。

Etag 响应头标识了资源的版本，此后浏览器可据此进行缓存以及询问服务器。

Last-Modified If-Modefied-Since Last-Modified:Wed,26Jan2017 00:35:11 GMT//强缓存失效
Etag If-None-Match

3.2 缓存过程

方式四：使用CDN

页面首次打开的适合使用CDN效果明显。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

方式五：预解析DNS

页面涉及到多个url时候，进行预解析有效。即根据浏览器定义的规则，提前解析之后可能会用到的域名，是解析结果存在缓存当中，缩短DNS解析时间，来提高网站的访问速度。

<meta http-eqiuv="x-dns-prefetch-control" content="on">
//强制打开<a>标签的dns预解析，https默认关闭dns预解析。
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">