前端性能优化 |
您所在的位置：网站首页 › vue页面组件太多加载慢 › 前端性能优化 |
前端性能优化
|
文章目录
一.大量图片加载优化方案1.将图片服务和应用服务分离(从架构师的角度思考)2. 图片压缩方案3.图片懒加载实现方案一实现方案二
4.小图片比较多时5.http2解决连接数限制
二、图片过大加载优化方案
加载的图片太多或者太大导致页面加载完成慢的问题；图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长,导致用户长时间等待。 一.大量图片加载优化方案 1.将图片服务和应用服务分离(从架构师的角度思考)对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。 浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞.一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目如图
我们可以借助一些第三方软件来进行压缩,压缩后分辨率不变,肉眼看不失真； 我们项目中对使用的图片基本都会进行压缩再上传。 3.图片懒加载图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片。 为优化回流，可以先设置占位符 实现方案一 document.documentElement.clientHeight//获取屏幕可视区域的高度 document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离 element.offsetTop//获取元素相对于文档顶部的高度如果：clientHeight+scroolTop>offsetTop，则图片进入了可视区内，则被请求。 借一张图：原文链接 代码实现： var imgs = document.querySelectorAll('img'); //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部 function getTop(e) { var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = document.documentElement.clientHeight;//获取可视区域高度 var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 lazyLoad(imgs); } 实现方案二 getBoundingClientRect()//获取元素的大小及位置我们滚动条向下滚动的时候，bound.top值会变得越来越小，也就是图片到可视区顶部的距离也越来越小，所以当bound.top == clientHeight时，说明土片马上就要进入可视区了，只要我们在滚动，图片就会进入可视区，那么就需要请求资源了。也就是说，在bound.top |
【本文地址】
今日新闻 |
推荐新闻 |