一种提升前端网页加载速度的方法技术

本发明专利技术公开了一种提升前端网页加载速度的方法，包括如下步骤：步骤一、所有图片都加载loading图片并在页面监听DOMContentLoaded事件，当满足触发条件时，这个事件就被触发；步骤二、判断浏览器是否兼容Intersection Observer API；步骤三、创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，满足条件时就执行给图片替换真实src的操作，并解除观察；步骤四、当每次滑动滚动条时执行节流函数并回调更新图片数组lazyImages以及执行加载图片函数。本发明专利技术采用图片按需加载和创建观察函数结合的方式，提升前端网页加载速度。

【技术实现步骤摘要】
一种提升前端网页加载速度的方法
本专利技术属于网页处理
，具体涉及一种提升前端网页加载速度的方法。
技术介绍
当打开一个网站时，浏览器会做许多工作，这其中包括下载各种可能用到的资源，然后渲染呈现，假设网站有大量的图片，直接加载可能会有很大的开销，不利于性能，那么加载的过程是很耗时的，尤其像那些新闻资讯淘宝京东等这类网站需要大量图片的网站。页面图片多，加载的图片就多，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。可想而知，网站的初始加载时间会很长，再加上网络等其它影响，用户体验会很差，当一个网站卡在某个地方，一直在加载，这种体验很不好。所以都希望一输入网址，页面立马就呈现在眼前。既然想要页面立马呈现在面前，那势必要减少浏览器的负荷，优化代码，减少一些不必要的请求和不必要资源的加载，因为你打开网站的时候，浏览器会把所有可能的资源都下载好，而实际上有些资源你并不需要用到，这就造成了浪费。所以有必要在一些资源上做下优化，提高网站加载速度。为了解决以上问题，提高用户体验，通常有几种优化方案：方案一:将图片服务和应用服务分离对于服务器来说，图片始终是最消耗系统资源的，如果将图片服务和应用服务放在同一服务器的话，应用服务器很容易会因为图片的高I/O负载而崩溃，所以当网站存在大量的图片读写操作时，建议使用图片服务器。另外浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的，一般在2-6之间,超过限制数目的请求就会被阻塞。所以，把图片服务器与应用服务器分开，图片服务器采用独立域名，css、js和图片就可以并发请求了。但是对于小型图片又不是特别多的网站，此方案又很复杂，对于开发过程来说是一种资源浪费，所以，此时就要考虑其他优化方案。方案二：简单粗暴的压缩方案这种方案就是直接对图片进行压缩，压缩后分辨率不变,肉眼看不失真。这种方案是普遍采用的方案，但是图片过多还是会造成加载阻塞，是页面加载速度变慢。方案三：将图片压缩成base64格式来节约请求将图片压缩成base64，随html或者css一起下载到浏览器,不需要额外的请求，这样就节约了请求。因为图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decodebase64编码的图片时需要耗费很多时间的，所以如果选择此种方案的话,最好选择一些小图片,不然得不偿失。
技术实现思路
本专利技术针对上述不足，提供一种提升前端网页加载速度的方法。采用图片按需加载和IntersectionObserverAPI创建观察函数结合的方式，解决网站有大量的图片时，直接加载会有很大的开销，服务器压力就会很大，加载的过程会很耗时，网站的初始加载时间就会很长，再加上网络等其它影响，用户体验就会很差的问题。本专利技术的技术方案如下：一种提升前端网页加载速度的方法，包括如下步骤：步骤一、所有图片都加载loading图片并在页面监听DOMContentLoaded事件，当满足触发条件时，这个事件就被触发并获取所有待加载的图片存入图片数组lazyImages；步骤二、判断浏览器是否兼容IntersectionObserverAPI，若兼容执行步骤三，不兼容执行步骤四；步骤三、创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，并设置执行给图片替换真实src操作的条件，满足条件时就执行给图片替换真实src的操作，并解除观察；步骤四、在页面监听滚动条滚动事件，当每次滑动滚动条时执行节流函数并回调更新图片数组lazyImages以及执行加载图片函数。优选的，所述步骤一中所述触发条件为初始的HTML文档被完全加载和解析完成。优选的，所述步骤三具体包括创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，同时设置循环变量，当循环变量小于图片数组lazyImages的长度时，依次递增对所有需要加载的图片调用观察函数lazyImageObserver进行观察，如果被观察的图片进入视口，就执行给此图片替换真实src的操作，并解除观察；当循环变量大于等于数组lazyImages的长度时循环结束。优选的，所述步骤四中所述执行加载图片函数具体包括：创建图片加载函数，获取可视区域高度h，滚动区域高度s，对所有待加载图片数组lazyImages进行循环操作，并设置循环变量；当循环变量小于数组lazyImages的长度，获取图片到浏览器顶部的距离l，判断当前图片距离顶部的距离l是否小于可视区域h和滚动区域s高度之和；如果l<h+s执行隐形加载图片操作，用真实图片替换loading图片，并设置此图片已经加载标记即设置data-isLoaded＝1。优选的，所述步骤四中所述如果l<h+s执行隐形加载图片操作，用真实图片替换loading图片，并设置此图片已经加载标记即设置data-isLoaded＝1具体包括：如果l<h+s执行隐形加载图片操作，即创建一个临时图片，通过图片onload事件判断临时图片是否加载完成，如果加载完成则用真实图片替换loading图片，并设置此图片已经加载标记即设置data-isLoaded＝1。优选的，所述临时图片在内存中不会到页面上去。本专利技术中图片按需加载，简单来说就是在页面渲染过程中，图片不会一次性全部加载，会在需要的时候加载，当滚动条滚动到某一个位置时触发事件加载图片。一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再通过js将img标签的data-src属性赋值给src属性。但是滚动条滚动事件会连续触发滚动事件，导致图片频繁反复加载，此时就要加上节流函数，每次滚动通过节流函数去执行回调函数，这样让函数在一定时间内只触发一次，周期性执行回调，减少一些过快调用，图片就不会反复被请求加载。Intersectionobserver接口可以方便我们操作，它可以异步观察目标元素与祖先元素或顶层文件的交集变化。只需要通过这个API写一个统一的观察函数，每当想观察的元素进入视口，也就是能看见它时，就执行相应的操作。本专利技术的有益效果如下：1、采用图片按需加载和IntersectionObserverAPI创建观察函数结合的方式，页面渲染过程中,图片不会一次性全部加载，会在需要的时候加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，避免了某些用不到的代码块本文档来自技高网...

【技术保护点】
1.一种提升前端网页加载速度的方法，其特征在于，包括如下步骤：/n步骤一、所有图片都加载loading图片并在页面监听DOMContentLoaded事件，当满足触发条件时，这个事件就被触发并获取所有待加载的图片存入图片数组lazyImages；/n步骤二、判断浏览器是否兼容Intersection ObserverAPI，若兼容执行步骤三，不兼容执行步骤四；/n步骤三、创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，并设置执行给图片替换真实src操作的条件，满足条件时就执行给图片替换真实src的操作，并解除观察；/n步骤四、在页面监听滚动条滚动事件，当每次滑动滚动条时执行节流函数并回调更新图片数组lazyImages以及执行加载图片函数。/n

【技术特征摘要】
1.一种提升前端网页加载速度的方法，其特征在于，包括如下步骤：
步骤一、所有图片都加载loading图片并在页面监听DOMContentLoaded事件，当满足触发条件时，这个事件就被触发并获取所有待加载的图片存入图片数组lazyImages；
步骤二、判断浏览器是否兼容IntersectionObserverAPI，若兼容执行步骤三，不兼容执行步骤四；
步骤三、创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，并设置执行给图片替换真实src操作的条件，满足条件时就执行给图片替换真实src的操作，并解除观察；
步骤四、在页面监听滚动条滚动事件，当每次滑动滚动条时执行节流函数并回调更新图片数组lazyImages以及执行加载图片函数。


2.根据权利要求1所述的一种提升前端网页加载速度的方法，其特征在于，所述步骤一中所述触发条件为初始的HTML文档被完全加载和解析完成。


3.根据权利要求1所述的一种提升前端网页加载速度的方法，其特征在于，所述步骤三具体包括创建一个观察函数lazyImageObserver，对图片数组lazyImages执行循环操作，同时设置循环变量，当循环变量小于图片数组lazyImages的长度时，依次递增对所有需要加载的图片调用观察函数lazyImageObserver进行观察，如果被观察的图片进入视口，就执行给此...

【专利技术属性】
技术研发人员：王洪贺，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川;51