「掘金日新计划 · 8 月更文挑战」的第23天— 前端性能优化和懒加载

菜菜子园子
119 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

image.png

五个方面的前端性能优化思路

1.⽹络连接速度

  • CDN

(1)定义：
CDN（内容分发⽹络）是通过互联⽹互相连接的电脑⽹络系统，利⽤最靠近每位⽤户的服务器，更快、更可靠地将资源⽂件（⾳乐、图⽚、视频、应⽤程序）发送给⽤户，来提供⾼性能、低成本的⽹络内容 传递给⽤户，提⾼请求的速度。

(2)作⽤

将数据快速可靠的从源服务站传递到⽤户端通过CDN，⽤户可以不直接从源站获取，选择⼀个较优的服务器获取数据，做到快速访问，减少源站负载压⼒

(3)其他作⽤

  • 监控
  • 统计分析
  • ⽤量查询
  • 刷新预热
  • ⽇志分析

(4)⼯作原理
1)⽤户发起域名的请求，DNS服务器将域名解析交给CDN
2)CDN将负载均衡的ip地址返回给⽤户
3)请求地址，负载均衡设备选择⼀台最优的缓存服务器（边缘节点服务器）提供访问

  • 根据⽤户的ip地址，距离⽤户最近的服务器
  • 根据URL携带的内容，选择有所需内容的服务器
  • 选择负载最⼩的服务器

4)⽤户发出请求，缓存服务器返回数据
5)如果缓存服务器没有缓存⽤户的请求内容，则会向上⼀级缓存服务器请求，直到访问⽹站的源服务器

(5)回源率(回源率越低代表请求的性能越好)

回源率=（CDN没缓存+缓存过期+不可缓存的请求）/ 全部的请求
  • DNS预解析
    例如当前页面加上link标签，属性和herf，代表用户会访问点的下一个网址，会提前对miaozai这个域名解析好，当用户访问的时候，可以降低解析的时间，提高访问的速度。
<link rel="dns-prefecth" href="https://miaozai.net">
  • 持久连接
connection: keep-alive

2.⽹络请求数量

  • 通过webpack⽂件合并
  • 图⽚处理
    （1）雪碧图
    （2）base64
    在webpack可以设置一个标准，8kb 10kb一下的图片通过base64转换插入到js文件中进行请求，也可以减少请求数量
  • 使⽤缓存 请求头里面的做了一个缓存cache-control(这个优先级比较高以这个为准):max-age-15552000下请求的时候访问的是缓存好的图片

3.资源⽂件的体积

  • 压缩 新建项目的时候都是使用脚手架的，里面就有基本的webpack配置了，对于html,css,js压缩都已经具备了这些功能
  • 开启gzip 请求头 content-Encoding 大大提高压缩

4.资源加载

  • 加载位置
    css⽂件放在head中(下载html的解析的时候，css文件会同步的进行加载和解析的) js⽂件放在body结束标签前(js会组织渲染)
  • 加载时机
    异步script标签加载，设置defer(在html等全部下载之后呢再去进行执行，把它挂起来进行下载)、async(异步的进行下载，等到下载之后就可以执行了)

5.webpack优化

  • 打包公共代码（减少同步打包）
  • 动态导⼊(导入暂时不需要的组件，只有徐娅它展现时候再加载)
  • ⻓缓存优化 (1)chunkhash (模块的缓存) (2)contenthash (文件类型的缓存)

懒加载

(1)描述：
懒加载也叫做延迟加载、按需加载，在⾮⾸屏展示的组件或者数据可以使⽤懒加载

(2)特点：

  1. 减⼩接⼝请求个数，⻚⾯的渲染负担
  2. 提⾼⾸⻚的展示速度，提升⽤户体验
  3. 防⽌加载过多图⽚⽽影响其他资源⽂件的加载

(3)实现

  • 通过 import() ⽅法引⼊组件
//引入组件运用里面抛出的方法
import(./test.js).then(({fun})=>{fun()})

//使用箭头函数引入组件的路径
()=>import('./Test')
  • 通过监听⽤户的滚动事件触发来展示⾮⾸屏的图⽚

(4)懒加载和预加载的区别
懒加载也叫延迟加载，指的是在⽹⻚中延迟加载图⽚的时机，当⽤户需要访问时，再去加载，可以提⾼⽹站的⾸屏加载速度，提升⽤户的体验。

预加载指的是将所需的资源提前请求加载到本地，这样后⾯在需要⽤到时就直接从缓存取资源，通过预加载能够减少⽤户的等待时间，提⾼⽤户的体验。

avatar
文章
阅读
粉丝