前端性能优化1

性能优化学习

前言

互联网的时代，用户对上网进入网站打开网页浏览的速度要求越来越高。网站的首页的‘速度’给用户的第一影响就显得至关重要了。‘为了优化用户的体验’这也成了我们的目标。

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。

关于优化方案：

图片懒加载

：图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

原理：将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。

当载入页面时，先把可视区域内的img标签的data-src属性值赋给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

实例：

事件委托

：事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

优点：

1. 大量减少内存占用，减少事件注册。

2. 新增元素实现动态绑定事件

例如有一个列表需要绑定点击事件，每一个列表项的点击都需要返回不同的结果。

传统写法：

传统方法会利用for循环遍历列表为每一个列表元素绑定点击事件，当列表中元素数量非常庞大时，需要绑定大量的点击事件，这种方式就会产生性能问题。这种情况下利用事件委托就能很好的解决这个问题。

改用事件委托：

说明：

防抖（debounce）

输入搜索时，可以用防抖debounce等优化方式，减少http请求；

这里以滚动条事件举例：防抖函数onscroll结束时触发一次，延迟执行。

节流（throttle）

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

下面还是一个简单的滚动条事件节流函数：节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样。

2023/2/16

总结：今天主要学习了下前端的一些优化方法，从图片的懒加载、事件委托、防抖、节流。

图片的懒加载是通过在img标签内自定义一个属性data-src指向真实的图片，然后src也要指向本地的一张默认图片，不然src为空时也会向服务器发送请求。当进入页面时，先把可视区域的data-src值赋给src，然后监听滚动事件，将用户要看到的图片加载。

事件委托是通过JS的冒泡机制把在子类的响应事件委托给父类，让父类元素担当事件监听的职务。

防抖是通过结束时触发，延迟执行。输入搜索时，可以用，来减少http请求；

节流是通过只允许一个函数在N秒内执行一次，避免重复无效的请求。