瀑布流页面效果,页面白屏与瀑布流分析方法

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

2015/12/03 · HTML5,
JavaScriptca881亚洲城手机, · 1
评论 ·
瀑布流瀑布流页面效果,页面白屏与瀑布流分析方法。,
白屏

原稿出处: Taobao前端团队(FED)-
妙净   

ca881亚洲城手机 1

有线页面包车型客车开支在我们的日常工作中国和越南社会主义共和国来越主要,有线的本性也是大家需求重点关切的,而加载的质量又是有线性能中的贰个主要难题。那么,今日我们共同来看下如何去评估、测试有线页面包车型地铁加载质量。

为了便于分析页面包车型大巴加载进程,那里将网络设置成最慢的
GP库罗德S,并将加载进度摄像下来,经常你能够经过 Chrome 自带的 timeline, 勾选
screenhot,能够拿走详尽的经过,如下图:

ca881亚洲城手机 2

此处为了和伸手一一清晰对照,用额外录屏工具( licecap
)录像下来。下文以天猫商城双 11 男装分会场的预发页面作为测试,摄像 结果
gif
如下,录制的 FPS 为 8。

帧分析如下:

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

ca881亚洲城手机 3

毕竟等到第 7 帧,HTML 加载并分析达成,发出页面中的请求,同时 CSS/JS
的地方都烟消云散在 //g.alicdn.com 同二个域名下, Chrome 下 HTTP 1.1
协议下三个域名下辅助 6 个冒出。

1 年前,PC 上在此此前还有四个域名分区(img01-04.tbcdn.cn),PC
上首屏图片多,那样可并发越多,但越来越多的域名引入,也加大了域名解析的资金财产,权衡之下Tmall在此以前图片域名采纳了
4 个;后来公司通过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com
;手淘下未来选取 SPDY + HTTPS,比较 HTTP 1.1 ,更安全且能够多路复用。

ca881亚洲城手机 4

到第 20 帧, CSS 下载完,DOM 和
CSSOM
都准备 OK 了,页面则初步渲染了;那是在 Chrome 上边看看的情事,但在 iOS
上并非如此,它供给 JS 加载并进行完才渲染页面。

ca881亚洲城手机 5

第 21 帧,紧接着,CSS 中的背景图开首逐一渲染,可知 CSS
中渲染图片也是有点耗费时间的。

ca881亚洲城手机 6

第 23 帧,后面并行下载的 JS 都下载完,也发轫执行了,看“疯狂 top 榜”是 JS
抽取出来的。同时 aplus 请求也初阶请求,那是个 getScript
的异步请求,可见异步请求真没有阻塞页面包车型客车渲染。

ca881亚洲城手机 7

第 25 帧,JS 还在继续执行,第③张图片是 JS 依据当前
dpr、强弱互连网、设备宽度等算出最契合的图形开首加载那张大 banner
了,并且开头发送数据请求了。

ca881亚洲城手机 8

到 27 帧,终于数据请求回来了,并且把文字和图纸渲染到页面上了。

ca881亚洲城手机 9

接下来下一帧 28,早先请求商品图片了。

ca881亚洲城手机 10

到 45 帧,6 个图片都在产出请求,同上 gw.alicdn.com 同二个域下并发 陆个请求。但首屏除了大图外只有 4 张图(2 张商行 logo 被底部 bar
挡住了),那里发生了 6 个图片请求,可见那几个页面包车型客车懒加载的 buffer
值能够安装得更小。

ca881亚洲城手机 11

从 28 帧到 50 帧,经历了相当短的小时,第三张图片终于显示出来了。别的看到
aplus_v2 执行完后,又发起了 spm 等请求,前面 3 个请求(
aplus-proxy.html/isproxy.js/m.gif )如故串行的。

ca881亚洲城手机 12

末段到第 61 帧,终于有所的图样都加载完了,最后看下,最终下载完的是大
banner 图,因为有 46.9k ,那张图的轻重或许变为此页面包车型客车 load
时间的最主要;假如那张图没有那样大,最终下载完的恐怕是用来埋点的 m.gif。

ca881亚洲城手机 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

做客具有的php页面都是白屏,不过静态页面却能打开

老实说,笔者事先还真没影象碰见过那种难点,第1影像以为是apache配置的php参数有题目,但那也不会白屏啊,应该是下载php文件才对啊~好吧,笔者真正抓瞎了!

首要内容可知时间

第①内容可知,那里能够认为是商品数量,商品数量可知要等 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')

先简单描述一下服务器的布置环境,其实很简单,用的是VPS,操作系统是CentOS,web环境装的是WDCP,那应当是2个很广泛的出品环境下的lnamp集成套件了,提供了强有力的界面管理后台,作者很欣赏~~不多说了,再说就成了广告贴了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图