服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作。这不最近小编正在进行“页面懒加载需求”的功能测试。小编第一次听说这个名词,让我们一起了解下吧
什么是懒加载?
通常的说懒加载也就是延迟加载。
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
懒加载的原理是什么?
页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的“data-url”(这个名字起个自己认识好记的就行)属性里,要用的时候就取出来,再设置;
为什么要使用懒加载?
很多页面,内容很丰富,页面很长,图片较多。比如说搜狗商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。其实总结来说就是”减少或延迟请求数,缓解浏览器的压力,增强用户体验。”
懒加载的实现步骤?
首先,不要将图片地址放到src属性中,而是放到其它属性(data-original)中。
页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中
在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。
懒加载的优点是什么?
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
如何代码实现?
//写一个函数判断元素是否出现
function isVisible($node){
var winH = $(window).height(),scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top;
if (offSetTop < winH + scrollTop) {
return true;
} else {
return false;
}
}
//再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:
$(window).on("scroll", function{
if (isVisible($node)){
console.log(true);
}
})
//通过打印判断是否生效
var hasShowed = false; $(window).on("sroll",function{
if (hasShowed) {
return;
} else {
if (isVisible($node)) {
hasShowed = !hasShowed; console.log(true);
}
}
})
如何测试呢?
关注开发改动
查看开发改动确定测试范围
页面框架_导航内子菜单商品图
首页_主要内容区域所有图片
分类页_主要内容区域所有图片
详情页_商品详情、评价商品、头像图片、热门推荐功能
个人中心_订单图片
文章导购_文中的商品图片
购物车_商品列表
以上就是通过代码log确定的影响功能点
实施测试
小编这里使用的Fiddler工具
关注改动模块的正常功能正常使用
慢网络时,图片加载情况(Fiddler模拟)
断网时,图片加载情况(Fiddler模拟)
文中涉及知识点
1. Fiddler成长之路 - 如何批量修改请求信息
2. Fiddler(七) |QuickExec
3. Fiddler(六)|session快捷图标
4. Fiddler大师之路系列(五)
5. Fiddler大师之路系列(四)
6. Fiddler大师之路系列(三)
7. Fiddler大师之路系列(二)
8. Fiddler大师之路系列(一)
欢迎添加我们的搜狗测试微信号,与我们一起聊聊测试。
服务器图片加载慢_页面提高性能利器_懒加载相关推荐
- jquery 页面滚动条回到顶部_jquery懒加载、回到顶部
思考 1.如果窗口resize了 2.如果节点加入重复了 3.怎样判断元素是在视窗范围内* 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视).写一个函数 isVisi ...
- bootstrap 数据加载中提示_解决Quartz定时器中查询懒加载数据no session的问题
作者:下一秒升华 出自:CSDN 原文:blog.csdn.net/u013815546/article/details/53032445 相信大家在web开发过程中一定遇到过一种情况,Class班级 ...
- 前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量 在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
- iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
- vue 加载太慢_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
- vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
- react.lazy 路由懒加载_Vue面试题: 如何实现路由懒加载?
非懒加载 import List from '@/components/list.vue' const router = new VueRouter({routes: [{ path: '/list' ...
- vue路由切换组件没有加载_Vue面试题: 如何实现路由懒加载?
非懒加载 import List from '@/components/list.vue' const router = new VueRouter({routes: [{ path: '/list' ...
- 小米6怎么解除温控_小米6性能模式_小米6性能模式怎么关
小米6性能模式怎么关_小米手机6_MIUI论坛 1080x1920 - 201KB - PNG 小米6性能模式没了 720x1280 - 32KB - JPEG 小米6怎么没有性能模式了_开发者交流_ ...
最新文章
- 僵尸(bot)程序缓解
- 恐惧、野心和迷茫,机器人公民背后的未来世界
- java web开发中Filter使用Annotation配置 (转载)
- ArcGIS Flex API 中的 Flex 技术(一)--事件
- SSD( Single Shot MultiBox Detector)关键源码解析
- linux根据进程的运行路径,停止进程
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
- 2017河北对口升学计算机试题,2017河北对口升学计算机专业理论试题(含答案).doc...
- 最小二乘法和极大似然估计
- IaaS基础架构云 —— 云网络
- Android 100个实例
- 全开源微信小程序商城系统源码:基于Java+uniapp框架开发
- 基于大数据的资金流量分析:思路与应用前景设想
- 微信开放平台apk应用签名获取
- IDC发布最新中国AI云服务市场报告,百度智能云连续三次排名第一
- 估计一个点云的表面法线
- Oracle的软解析(soft prase)和硬解析(hard prase)
- 用python抓取百万网易云热门评论[转载]
- SQL Server 为视图或函数 指定的列名比其定义中的列多
- 《软技能——代码之外的生存指南》读书笔记之职业(一)
热门文章
- Java基础学习总结(158)——开发Leader如何做CodeReview
- Java Web学习总结(12)——使用Session防止表单重复提交
- java中md5加密和解密_如何在java中实现md5加密和解密
- sphinx xmlpipe2 php,PHP+MongoDB+Coreseek/Sphinx打造搜索引擎
- 【转载】这是我看过最好的对HTTPS的理解
- app/bootstrap.php.cache : failed to open stream: No such file or directory
- XenServer 6.5实战系列之十三:图形界面安装Linux Redhat系统
- [LeetCode] Android Unlock Patterns 安卓解锁模式
- Android性能优化典范第一季
- 想做开源软件开发谁能带一下呀