您的位置：首页 > Web前端 > HTML

为什么淘宝京东的首页这么快

2016-12-25 11:09 441 查看

首页快到看不出来加载

不知道大家有没有细心关注过淘宝、京东的首页，刷新之后一眨眼就加载过来了，尤其是京东的首页，感觉刷新的时候根本就没有重新加载，就像是页面没有动一样。

当然，这里实质上是重新请求了的，这个可以在浏览器的网页请求部分看到。



上边这个是京东的首页刷新时候的网络请求。第一条请求就是www.jd.com，加载时间是43ms，灰色的39ms是网络请求时间，43-39=4ms是页面解析的时间。



以上是天猫首页刷新时候的网络请求。第一条请求是www.tmall.com，截图显示的时间是147ms，当然这个时间不能表明淘宝比京东差。多刷新几次，两者的时间相差不多。

这个截图里面还有一个点需要注意，就是右下角的红色文字”load: 1.40s”，这里显示的是这个页面所有内容的整体加载时间（html&js&css&xhr）。

感觉不到加载的原因解惑

我们已经注意到了两个首页的加载时间都很短，最长的时候也不会超过200ms，大多其实保持在30ms左右。

我们也从chrome的network里面看到了，实际上是进行了网络请求，重新加载了页面的。那么为什么给我们的感觉像是首页没有重新加载一样呢？

这是实际上和人眼的反应速度有关系，人眼的反应速度是0.2s，也就是200ms。这个数据不是极限值，是一个一般值，有人的人眼速度要快很多，可以快到0.04s，可以看下这个知乎帖子 #关于人眼的帧数?#。

但是，总的来说，对于极大多数的常人来说40ms左右的加载速度，一定是无感知了。那么怎么才能做到这么快的加载速度呢？

策略有几个要点：

1.首屏内容静态化在html里面，直接DOMParse时渲染出来；

2.紧邻首屏的内容，如果不能包含在html中静态化，那么可以让在在页面渲染后，立刻执行异步获取数据（这里有一个注意项，jquery的初始化比较慢，观察有200ms以上的时间，也就是说jquery是在200ms以后才开始执行$(function(){})里面的语句)；

3.对于再往底部的内容可以采用div级别的懒加载；

4.页面中的图片采用img懒加载（首屏直接相关的可以除外）。

web前端H5页面懒加载

懒加载是一种比较常用的技术，尤其对于电商、社区这类图片占主导的网站、app来说尤其如此。

常见的是页面图片的懒加载，现在大家都开始使用了div级别的懒加载，可以懒加载的类别已经拓宽了很多。

懒加载原理：是把当前不在屏幕显示区域的内容暂时不加载，而只是显示成一个纯色图或者gif动画。当页面上下、左右滚动后，元素进入到视区范围时，开始获取图片或者div内容，替换掉初始的纯色或者gif动画。

懒加载里面大多有一个threshold的参数，这是一个视区范围的扩充。就是当元素进入到实际屏幕width+threshold & height+threshold范围内，就会开始加载实际数据。这个值的意义很大，能够提高页面加载流畅性，相当于是懒加载中的预加载。

接下来说一下h5页面图片和div元素的懒加载前端实现。

图片的懒加载

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>div懒加载</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.ajax.min.js"></script>
<script  type="text/javascript">
$(function() {
$("img.lazy").Lazy({threshold:10});
});
</script>
<style type="text/css">
.div-container {width:100%; height:400px;}
.div-container img{width:100%; height:400px;}
</style>
</head>

<body>
<div id="div1" class="div-container">
<img alt="图片" class="lazy" data-src="http://photosd.nggirl.com.cn/work/d5875f4409c844b8b291fcac91830eb7.jpg@80Q">
</div>
<div id="div2" class="div-container">
<img alt="图片" class="lazy" data-src="http://photosd.nggirl.com.cn/work/da75f3eaa1754f8c8b56e22b61135964.jpg@80Q">
</div>
<div id="div3" class="div-container">
<img alt="图片" class="lazy" data-src="http://photosd.nggirl.com.cn/work/257488a5556849009ebb1f44ed11f418.jpg@80Q">
</div>
<div id="div4" class="div-container">
<img alt="图片" class="lazy" data-src="http://photosd.nggirl.com.cn/work/827516ad00ea4adf830c11aa23fd1551.jpg@80Q">
</div>
</body>
</html>


div元素的懒加载

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>div懒加载</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.ajax.min.js"></script>
<script  type="text/javascript">
$(function() {
$("div[data-src]").Lazy({threshold:10});
});
</script>
<style type="text/css">
.div-container {width:100%; height:400px;}
.div-container img{width:100%; height:400px;}
</style>
</head>

<body>
<div id="div1" class="div-container" data-loader="ajax" data-src="/nggirl/app/content/divHello">
<img alt="图片" src="http://photosd.nggirl.com.cn/work/d5875f4409c844b8b291fcac91830eb7.jpg@80Q">
</div>
<div id="div2" class="div-container" data-loader="ajax" data-src="/nggirl/app/content/divHello">
<img alt="图片" src="http://photosd.nggirl.com.cn/work/da75f3eaa1754f8c8b56e22b61135964.jpg@80Q">
</div>
<div id="div3" class="div-container" data-loader="ajax" data-src="/nggirl/app/content/divHello">
<img alt="图片" src="http://photosd.nggirl.com.cn/work/257488a5556849009ebb1f44ed11f418.jpg@80Q">
</div>
<div id="div4" class="div-container" data-loader="ajax" data-src="/nggirl/app/content/divHello">
<img alt="图片" src="http://photosd.nggirl.com.cn/work/827516ad00ea4adf830c11aa23fd1551.jpg@80Q">
</div>
</body>
</html>


其中，div的data-src属性是一个url请求地址，这个请求地址返回的应该是一个html片段，这个html片段会被自动的插入到div中，使用的是$(this).html(returnValue)，也就是说示例中div里面的img标签会被自动删除。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html页面 加载优化 显示优化 懒加载
相关文章推荐
新的分享
章节导航