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

首页快到看不出来加载

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

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

京东首页加载内容

上边这个是京东的首页刷新时候的网络请求。第一条请求就是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标签会被自动删除。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页