前端web性能优化

版权声明:欢迎转载,转载请注明来源,谢谢! https://blog.csdn.net/a8725585/article/details/82989377

优化方法

每个请求都需建立连接消耗一定时间,请求数越多则网页加载时长越长。

资源合并减少http请求

我们可以将资源尽可能的合并从而减少请求:

  1. 图片合并,使用Sprites精灵图 ;
  2. CSS 文件合并

非核心js异步加载

动态脚本加载
defer html解析完成后才执行,按加载顺序依次执行
async 加载完立即执行,和加载顺序无关

浏览器缓存

强缓存

不发送请求到服务器,满足条件直接从缓存获取资源
expires 绝对时间
cache-control 相对时间

协商缓存

发送请求到服务器,由服务器判断是否从缓存获取资源
Last-Modified(响应头) If-Modified-Since(请求头)
Etag(响应头) If-None-Match(请求头)
在这里插入图片描述在这里插入图片描述

使用cdn

CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容

进行dns预解析

<meta http-equiv=“x-dns-prefetch-control” content=“on”> // 开启浏览器dns预解析
<link rel=“dns-prefetch” href=“//host-name.com”> // 强制预解析

猜你喜欢

转载自blog.csdn.net/a8725585/article/details/82989377