澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

据说jQuery达成瀑布流页面
分类:网页制作

页面白屏与瀑布流深入分析方法

2015/12/03 · HTML5, JavaScript · 1 评论 · 瀑布流, 白屏

原稿出处: 天猫商城前端团队(FED)- 妙净澳门太阳娱乐集团官网,   

澳门太阳娱乐集团官网 1

有线页面包车型地铁费用在我们的不乏先例工作中特别主要,无线的性质也是我们供给器重关心的,而加载的个性又是有线质量中的七个要害难题。那么,今日我们一同来看下怎么样去评估、测量试验有线页面包车型大巴加载品质。

为了便于剖析页面包车型大巴加载进程,这里将互联网设置成最慢的 GP奇骏S,并将加载进度摄像下来,平常你能够通过 Chrome 自带的 timeline, 勾选 screenhot,能够获取详尽的历程,如下图:

澳门太阳娱乐集团官网 2

此地为了和呼吁一一清晰对照,用额外录屏工具( licecap )录像下来。下文以天猫商城双 11 男装分会议厅的预发页面作为测量检验,录像 结果 gif 如下,录制的 FPS 为 8。

帧深入分析如下:

第一帧:重新刷新页面,发起 HTML 央求,中间完整页面是刷新前的,请无视之。

澳门太阳娱乐集团官网 3

到头来等到第 7 帧,HTML 加载并深入分析实现,发出页面中的供给,同不经常间 CSS/JS 的地方都冰释在 //g.alicdn.com 同二个域名下, Chrome 下 HTTP 1.1 公约下七个域名下援助 6 个冒出。

1 年前,PC 上以前还大概有八个域名分区(img01-04.tbcdn.cn),PC 上首屏图片多,那样可并发更加多,但越来越多的域名引进,也加大了域名分析的资金,权衡之下Taobao以前图片域名选用了 4 个;后来集团透过汹涌澎拜的 HTTPS 改换,图片推荐收敛到 gw.alicdn.com ;手淘下将来接纳 SPDY + HTTPS,相比 HTTP 1.1 ,更安全且能够多路复用。

澳门太阳娱乐集团官网 4

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都盘算 OK 了,页面则始于渲染了;这是在 Chrome 上面见到的情况,但在 iOS 上其实不然,它须要 JS 加载并试行完才渲染页面。

澳门太阳娱乐集团官网 5

第 21 帧,紧接着,CSS 中的背景图伊始家家户户渲染,可知 CSS 中渲染图片也可以有一点耗费时间的。

澳门太阳娱乐集团官网 6

第 23 帧,前边并行下载的 JS 都下载完,也起初实施了,看“疯狂 top 榜”是 JS 抽出出来的。同一时间 aplus 伏乞也开首央求,那是个 getScript 的异步诉求,可知异步恳求真未有阻塞页面包车型大巴渲染。

澳门太阳娱乐集团官网 7

第 25 帧,JS 还在继续实施,第一张图纸是 JS 遵照当下 dpr、强弱互联网、设备宽度等算出最相符的图样开端加载那张大 banner 了,而且初步发送数据央求了。

澳门太阳娱乐集团官网 8

到 27 帧,终于数据乞请回来了,况兼把文字和图片渲染到页面上了。

澳门太阳娱乐集团官网 9

然后下一帧 28,开首哀告商品图片了。

澳门太阳娱乐集团官网 10

到 45 帧,6 个图片都在产出伏乞,同上 gw.alicdn.com 同一个域下并发 6 个央求。但首屏除了大图外独有 4 张图(2 张商家 logo 被尾巴部分 bar 挡住了),这里发出了 6 个图片央浼,可知这一个页面包车型客车懒加载的 buffer 值能够安装得越来越小。

澳门太阳娱乐集团官网 11

从 28 帧到 50 帧,经历了十分短的胎元,第一张图纸终于展现出来了。别的见到aplus_v2 推行完后,又发起了 spm 等央浼,前边 3 个哀告( aplus-proxy.html/isproxy.js/m.gif )依旧串行的。

澳门太阳娱乐集团官网 12

聊起底到第 61 帧,终于有所的图形都加载完了,最终看下,最后下载完的是大 banner 图,因为有 46.9k ,那张图的轻重缓急也许变为此页面包车型地铁 load 时间的根本;假使这张图未有那样大,最终下载完的也许是用来埋点的 m.gif。

澳门太阳娱乐集团官网 13

从地点整个央求的瀑布流分析下来,我们来回看下页面包车型地铁重要时间点:

瀑布流页面

正文实例为大家享用了jQuery实现瀑布流页面显示的实际代码,供大家参照他事他说加以考察,具体内容如下

页面可知时间

在第 20 帧页面可知,CSS 实现之后,当然前提是此处没有外链 JS 在页面中间因为互联网央浼严重堵塞页面。这里解析的独自是 Chrome 浏览器,不是真机,在 iOS 上,就算 JS 在底层,直接 <script src="xx"> 也是会卡住页面。能够透过加 async 属性,公告渲染引擎那是不影响页面渲染的 JS,可以异步加载,iOS 下增多此属性可完毕和 Android 或 PC Chrome 一样的功效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <script src="./jquery.js">
    </script>
    <style>
        #all{
            position: relative;
        }
        .box{
            float: left;
        }

        .pic>img{
            width: 150px;/* 这里控制宽度*/
            height: auto;
        }
    </style>
</head>
<body>

<div id="all">
    <div class="box">
        <div class="pic">
            <img src="./img/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./img/3.png">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./img/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./img/5.jpeg">
        </div>
    </div>
</div>
</div>
</div>
<script>
    $(window).load(function(){
        waterfall();
        var dataInt={"data":[{"src":"./img/1.jpg"},{"src":"./img/2.jpg"},{"src":"./img/4.jpg"},{"src":"./img/5.jpeg"},{"src":"./img/3.png"}]}
        $(window).scroll(function(){
            if(checkScollSlide('all','box')){
                $.each(dataInt.data,function(key,value){
                    var oBox=$("<div>").addClass("box").appendTo($("#all"));
                    var oPic=$("<div>").addClass("pic").appendTo($(oBox));
                    var oImg=$("<img>").attr("src",$(value).attr("src")).appendTo($(oPic));
                })
                waterfall();
            }
        })
    })
    function waterfall(){
        var $boxs=$("#all>div");
        var w=$boxs.eq(0).outerWidth();
        var cols=Math.floor($(window).width()/w);
        $('#all').width(w*cols).css("margin","0 auto");
        var hArr=[];
        $boxs.each(function(index,value){
            var h=$boxs.eq(index).outerHeight();
            if(index<cols){
                hArr[index]=h;
            }else{
                var minH=Math.min.apply(null,hArr);
                var minHIndex=$.inArray(minH,hArr);
// console.log(minH);
                $(value).css({
                    'position':'absolute',
                    'top':minH+'px',
                    'left':minHIndex*w+'px'
                })
                hArr[minHIndex]+=$boxs.eq(index).outerHeight();
            }
        });
    }
    //检查是否满足加载数据条件,parent 父元素id clsName 块元素类
    function checkScollSlide(parent,clsName){
        var oParent = document.getElementById(parent),
        aBoxArr = oParent.getElementsByClassName(clsName),
        // 最后一个box元素的offsetTop+高度的一半
        lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
        //兼容js标准模式和混杂模式
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        height = document.documentElement.clientHeight || document.body.clientHeight;
        return lastBoxH < scrollTop + height ? true : false;
    }
</script>
</body>
</html>

views.py

首要内容可知时间

要害内容可见,这里能够以为是商品数量,商品数量可知要等 JS 施行完何况异步央浼发送出去回来后才可知。

TMS[1] 的异步央求许多走招引顾客数据平台(TCE[2])的接口,测量试验其单个乞请在真机的耗费时间约为 110ms(样本比较少,未大量测试)。

the end !

from django.shortcuts import render,HttpResponse
from app01 import models
import json
# Create your views here.
def index(req):
  if req.method == 'POST':
    dic = models.Upload.objects.filter(status=1).values('img1','name','info')
    dic = list(dic)
    dic = json.dumps(dic)
    print(dic)
    return HttpResponse(dic)
  return render(req, 'index.html')

白屏时间和补救方法

在 Wi-Fi 下,那 60 多帧的长河一眨眼就过去了,但在弱互联网下,如这里最极端的互联网 GP宝马X3S 下,整个首屏含图片全体加载成功必要 41.25s。当然那 40 多秒进度能及早出现内容,并渐进和睦地表现出来是相比好的。

男装频道是修改过后的,相比较之前的未管理的猜你心爱页面,出现长日子的白屏,如下:

澳门太阳娱乐集团官网 14

以下为地点生活修复后的意义:

澳门太阳娱乐集团官网 15

白屏处理只要稍加注意下就足以,修复的实惠也差十分少,尽量同步输出,异步输出请尽也许mock 出现在首屏的模板。假若是凭借 Cake[3] 工具开垦的,也得以一贯用首屏填充伪标签。

url.py

结束语

上述在 Chrome 上的测验,但实际在手淘里面,在 spdy、https、离线包内置财富等的熏陶下,它的瀑布流依然这么的呢?

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^index/', views.index),
]

注:

  • [1]: TMS 为天猫商城内部运行移动系统。
  • [2]: TCE 为天猫内部数据接口系统。
  • [3]: Cake 为Tmall内部前端开辟套件。

 

1 赞 收藏 1 评论

澳门太阳娱乐集团官网 16

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .clearfix:after{
      content: '.';
      visibility: hidden;
      height: 0;
      clear: both;
      display: block;
    }
    img{
      width: 245px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="container" style="margin: 0 auto;width: 980px;" class="clearfix">

    <div style="width: 245px;float: left">

    </div>

    <div style="width: 245px;float: left">

    </div>

    <div style="width: 245px;float: left">


    </div>

    <div style="width: 245px;float: left">


    </div>
  </div>
  <script src="/static/js/jquery-2.1.4.min.js"></script>
  <script>
    $(function () {
      $.ajax({
        url:'/index/',
        type:'POST',
        dataType:'json',
        success:function (arg) {
          $.each(arg, function (k, v) {
            console.log(k,v);
            k = k + 1;
            var div = document.createElement('div');
            div.className = 'c1';
            var img = document.createElement('img');
            img.src = "/" + v.img1;
            var p = document.createElement('p');
            p.innerText = v.info;
            div.appendChild(img);
            div.appendChild(p);
            if (k % 4 == 1) {
              $('#container').children(':eq(0)').append(div);
            } else if (k % 4 == 2) {
              $('#container').children(':eq(1)').append(div);
            } else if (k % 4 == 3) {
              $('#container').children(':eq(2)').append(div);
            } else if (k % 4 == 0) {
              $('#container').children(':eq(3)').append(div);
            } else {

            }
          })
         }
      })
    })


  </script>
</body>
</html>

以上正是本文的全部内容,希望对我们的上学抱有助于,也愿意大家多都赐教脚本之家。

您大概感兴趣的作品:

  • Jquery瀑布流插件使用介绍
  • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
  • jQuery瀑布流插件Wookmark使用实例
  • jQuery Masonry瀑布流插件使用详解
  • jQuery 瀑布流 相对定位布局(二)(延迟AJAX加载图片)
  • jQuery完成瀑布流布局
  • jQuery实现瀑布流布局详解(PC和移动端)
  • jQuery.lazyload+masonry改进图片瀑布流代码
  • jquery轻便瀑布流达成原理及ie8下测验代码
  • jquery完成瀑布流效果分享

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:据说jQuery达成瀑布流页面

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文