减少网络请求
浏览器缓存
本地存储
localStorage
- localStorage是html5新增的本地存储API,在一般浏览器支持的存储容量是5M大小,它仅在浏览器中保存,不参与和服务器的通信。
- 存储在localStorage中的数据没有过期时间,只有手动清除。因为数据是保存在浏览器本地硬件设备中的,所以即使关闭浏览器,这部分数据依旧存在,下次打开浏览器访问网站时数据可继续使用。
- localStorage使用起来非常简单,常用API包含setItem、getItem、removeItem、clear四个方法
//向localStorage添加或设置数据项 localStorage.setItem("username", "John") //以键名的方式从localStorage获取数据 localStorage.getItem('username') //从localStorage移除指定键名的数据项 localStorage.removeItem('username') //清空localStorage中的所有数据 localStorage.clear()
- 值得注意的是,localStorage无法跨域,同源下才可读写;其次,localStorage中仅能存储字符串内容,所以当要存储对象、数组等数据时,可使用JSON.stringify先将其转化为字符串,取用时JSON.parse将其数据类型还原
sessionStorage
- sessioStorage和localStorage在API使用上基本一致,它们的区别在于拥有不同的数据持久性。sessioStorage中存储的数据,只在当前会话可用,当关闭标签页结束会话时,数据也将被清除
应用场景
- 相比于sessioStorage,localStorage的应用更加广泛,由于localStorage中数据的持久性,所以可以用它来存储一些网站日常需要,又内容稳定的资源。
- 比如,淘宝的 localStorage 中存储了不少 Base64 格式的图片字符串(首屏各种小图标)
- 也可以用它来保存搜索历史记录,比如掘金
- 还可以保存一些网站的本地设置,比如阅读网站的白天/黑夜模式,字体大小、背景色等等
文件合并
文件的合并与拆分
- 可以借助webpack
雪碧图
- 雪碧图将多张小图标拼接成一张大图,在HTTP1.x环境下,雪碧图可以减少HTTP请求,加速网页的显示速度。
- 用于合成雪碧图的图标体积要小,较大的图片不建议拼接成雪碧图;同时要是网站静态图标,不是通过ajax请求动态获取的图标。所以通常是作为网站logo、icon之类的图片。
- 使用webpack构建时,可以借助postcss-sprites来自动合成雪碧图
Base64
- Base64不是一种图像格式,是一种将任意二进制转换成文本字符串的编码方法,我们用Base64编码图像时,就是将图像的二进制数据转换成字符串
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAA...
- 将Base64编码直接作为
<img>
标签的src属性值,浏览器会自动解析Base64编码,不会再一次发起图片请求。 - 每次建立http请求都会消耗一定的时间,对于网站频繁使用的各种小图标来说,建立http请求的时间都可能超过下载图片本身的时间,这种情况下,就可以用Base64编码小图来减少http请求。
- 由于Base64编码的原理,Base64编码后比原图要大3/4左右,如果把大图片编码到 html/css 中,会造成后者体积明显增加,明显影响网页的打开速度。因此,通常建议只对小图作Base64编码转换。
- webpack中的 url-loader 可以自动根据文件大小决定要不要进行Base64编码
减小资源体积
- 除了减少网络请求之外,减小资源体积是另一个重要的优化点,也是我们开发过程中必不可少的环节
构建工具优化
- 使用构建工具进行资源的合并压缩,是工程实践中最普遍的操作。时下最主流的构建工具无疑是webpack,我们也主要探讨利用webpack进行资源体积的优化
选择合适的图片格式
- 如果可以,尽量使用CSS效果(渐变,阴影,圆角等)代替图像
- 当必须使用图像资源时,选择合适的图片格式非常重要,因为同样的视觉效果,不同格式的图片大小不同。
- jpg:有损压缩,体积较小。适用于呈现色彩丰富的大图,如背景图、轮播图、Banner图等。
- png:无损压缩,体积较大,支持透明度。适用于小的 Logo、颜色简单且对比强烈的图片等。
- webp:2010由Google推出,使用更优的图像数据压缩算法,图片体积更小,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、支持透明度以及动画的特性。但在兼容性方面,IE和Safari浏览器不支持。
- svg:矢量图,图片可无限放大而不失真,体积小。适用于各种icon、logo
首屏资源加载优化
- 对于首屏之外的内容,如果一次性全部加载完,会影响首屏的渲染速度;而且,如果页面很长,就算整个页面全部加载完成,用户也不一定会滚动屏幕浏览全部内容。
- 所以,一个很重要的优化点就是,打开网站时,尽量只加载首屏内容所包含的资源,而首屏之外的资源,等需要用到的时候再去加载。从而使页面首屏内容更快地渲染出来。
懒加载
路由懒加载
- 单页面应用中,如果所有组件都打包到一起,js包会变得非常大,在首次加载时影响页面的加载速度。使用路由懒加载,我们就能把不同路由的组件分割成不同的代码块,当路由被访问时才会加载对应的组件
- 使用动态import,很容易实现路由懒加载
图片懒加载
- 浏览器是否发起请求图片根据的是
<img>
的src属性,懒加载的原理就是,不直接给<img>
的src属性赋值,而是在<img>
进入可视区域时,再给src赋于图片URL - 对于每一个需要懒加载的
<img>
标签,设置一个data-src
属性,用于存储图片URL,当元素进入可视区域时,获取到这个data-src
的值,然后赋值给<img>
的src属性。 - 那么,怎样判断
<img>
是否进入可视区域呢?这里使用getBoundingClientRect
来获取元素顶部与浏览器视口顶部的距离top, 通过window.innerHeight
获取浏览器视口的高度viewHeight
, 当viewHeight - top
的值大于等于0,表示元素已进入可视区域。 - 下面我们就来实现一个简单的懒加载。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lazy{ height: 150px; width: 200px; background-color: #eee; } </style> </head> <body> <div> <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3176859023,1719957347&fm=26&gp=0.jpg"> </div> <div> <img class="lazy" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2413205756,2857128339&fm=26&gp=0.jpg"> </div> <div> <img class="lazy" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2356708534,2525790159&fm=26&gp=0.jpg"> </div> <div> <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1332858679,869019665&fm=26&gp=0.jpg"> </div> <div> <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2450079006,3171044776&fm=26&gp=0.jpg"> </div> <div> <img class="lazy" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1181825476,2174805292&fm=26&gp=0.jpg"> </div> </body> <script> const imgs = document.querySelectorAll('.lazy') // 需要懒加载的图片标签 const viewHeight = window.innerHeight // 可视区域高度 // num用于统计当前显示到了哪一张图片,避免每次都从第一张图片开始检查是否进入可视区域 let num = 0 function lazyload(){ for(let i=num; i<imgs.length; i++) { // 用浏览器视口高度 减去 元素顶部与浏览器视口顶部的距离 let distance = viewHeight - imgs[i].getBoundingClientRect().top // 若distance大于等于0,说明元素进入可视区域 if(distance >= 0 ){ // 获取到data-src属性中存储的图片URL,赋值给src属性 imgs[i].src = imgs[i].getAttribute('data-src') // 前i张图片已经加载完毕,下次从第i+1张开始检查是否进入可视区域 num = i + 1 } } } lazyload() //加载首屏需要显示的图片 window.addEventListener('scroll', lazyload, false) // 监听scroll事件 </script> </html>
服务端渲染
- Vue、React等框架让开发变得简单高效,但也让页面需要加载的资源变多,除了业务代码,还要等框架代码加载完成才能进行页面的渲染。对于首屏的呈现速度有较高要求的网站,可以考虑服务端渲染。它不仅能提高首屏的呈现速度,还有助于SEO。服务端渲染的实践往往与前端框架(如 Vue,React等)紧密结合。
基础的网络优化
DNS
- DNS 负责将域名转换为 IP 地址。对 DNS 的优化主要有以下两点:
- 减少 DNS 查询
DNS 的查询结果有客户端本地缓存,所以首次查询从域名服务器获取对应IP后,下一次再访问就直接从本地拿到IP地址。因此,避免将静态资源分散在多个域名下,减少需要借助域名服务器的 DNS 查询。 - 预加载
当浏览网页时,浏览器会在加载网页时,在后台对网页中的域名进行解析缓存,这样在访问当前网页中的连接时就无需再进行DNS的解析
可以控制对当前页面中所有连接进行预解析,或对特定连接进行预解析,在head标签中进行配置//对当前页面中所有连接进行预解析 <meta http-equiv="x-dns-prefetch-control" content="on">
//对特定连接进行预解析 <link rel="dns-prefetch" href="//cdn.jsdelivr.net"> <link rel="dns-prefetch" href="//baidu.com">
CDN
- 使用CDN存放 JS、CSS、图片等静态资源,静态资源本身具有访问频率高、承接流量大的特点,CDN 是静态资源提速的重要手段。CDN原理和细节参考【前端词典】CDN 带来这些性能优化
转自 https://juejin.cn/post/6958694686689067038