前端性能优化 懒加载和预加载
懒加载
图片进入可视区域之后请求图片资源。对于电商等图片很多,页面很长的业务场景适用。减少无效资源的加载。并发加载的资源过多会阻塞 js 的加载,影响网站的正常使用。
浏览器解析的过程中,遇到image里面有src,他就会去请求 src 里面的资源,在真实场景中,我们希望图片进入可视区域之后,src 才会被设置进去,而不是一开始可视区域之外的 img 就设置了 src ,如果已经设置了,显然没在可是区域就去加载了。所以一开始不在可视区域的图片只是一个占位符,他真正的 url 存放在 data-url 上面。这个地址因为没放在 src 上,所以不会造成去请求图片相关的资源。通过 js 监听 scroll 事件,监听到这个图片到可视区域之后,将 data-url 放置到 src ,src 的变化就会触发请求。这就是懒加载的原理。
预加载
预加载跟懒加载是个相反的过程,图片等静态资源在使用之前提前请求,资源使用到时能从缓存中加载,提升用户体验。
懒加载代码
var viewHeight = document.documentElement.clientHeight // 可视区域的高度 function lazyload () { var eles = document.querySelectorAll('img[data-original][lazyload]') Array.prototype.forEach.call(eles, function (item, index) { var rect if (item.dataset.original === '') return; // getBoundingClientRect 返回元素的大小及其相对于视口的位置。 rect = item.getBoundingClientRect() if (rect.bottom >= 0 && rect.top < viewHeight) { !function () { var img = new Image() img.src = item.dataset.original img.onload = function () { item.src = img.src } item.removeAttribute('data-original') item.removeAttribute('lazyload') }() } }) } lazyload() document.addEventListener('scroll', lazyload)
预加载方式
1、display:none
2 new Image的方式。js执行到的时候已经被加载下来,实际上还没有被使用
var image = new Image()
image.src = "http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg"
3、xmlhttprequest
// 使用XMLHttpRequest对象 var xmlhttprequest = new XMLHttpRequest(); xmlhttprequest.onreadystatechange = callback; xmlhttprequest.onprogress = progressCallback; xmlhttprequest.open("GET","http://image.baidu.com/mouse.jpg",true); xmlhttprequest.send(); function callback () { if (xmlhttprequest.readyState == 4 && xmlhttprequest.status==200){ var responseText = xmlhttprequest.responseText; }else{ console.log("Request was unsuccessful: " + xmlhttprequest.status); } } function progressCallback (e) { e = e || event; if (e.lengthComputable){ console.log("Received " + e.loaded + " of " + e.total + " bytes") } }
缺陷是有跨域问题,优点是可以更加精细的控制预加载过程
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· 聊一聊坑人的 C# MySql.Data SDK
· Java 项目愚蠢的分层及解决办法
· 一个.NET开源、易于使用的屏幕录制工具
· C#中 Task 结合 CancellationTokenSource的妙用
· Superpower:一个基于 C# 的文本解析工具开源项目
2018-12-07 cookie