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

2015/12/03 · HTML5,
JavaScript · 1
评论 ·
页面白屏与瀑布流分析方法,Php页面白屏。瀑布流,
白屏

原稿出处: Taobao前端共青团和少先队(FED)-
妙净   

图片 1

有线页面包车型客车支出在我们的常备工作中尤为首要,有线的个性也是大家要求重视关切的,而加载的属性又是有线品质中的2个关键难点。那么,前几天大家壹起来看下怎样去评估、测试有线页面包车型大巴加载质量。

为了方便分析页面包车型地铁加载进程,那里将网络设置成最慢的
GP奇骏S,并将加载进程摄像下来,日常你能够由此 Chrome 自带的 timeline, 勾选
screenhot,能够赢得详尽的进程,如下图:

图片 2

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

帧分析如下:

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

图片 3

到底等到第 ⑦ 帧,HTML 加载并分析达成,发出页面中的请求,同时 CSS/JS
的地址都消失在 //g.alicdn.com 同二个域名下, Chrome 下 HTTP 1.1协议下三个域名下协助 陆 个冒出。

一 年前,PC 上此前还有多少个域名分区(img0一-0四.tbcdn.cn),PC
上首屏图片多,那样可并发越来越多,但更加多的域名引入,也加大了域名解析的本金,权衡之下Tmall在此以前图片域名选择了
四 个;后来集团经过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com
;手淘下以后利用 SPDY + HTTPS,比较 HTTP 1.一 ,更安全且能够多路复用。

图片 4

到第 20 帧, CSS 下载完,DOM 和
CSSOM
都准备 OK 了,页面则早先渲染了;这是在 Chrome 下面看看的图景,但在 iOS
上并非如此,它须求 JS 加载并进行完才渲染页面。

图片 5

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

图片 6

第 二三 帧,前边并行下载的 JS 都下载完,也初叶施行了,看“疯狂 top 榜”是 JS
抽取出来的。同时 aplus 请求也开端请求,那是个 getScript
的异步请求,可见异步请求真没有阻塞页面包车型地铁渲染。

图片 7

第 二5 帧,JS 还在继续执行,第二张图片是 JS 遵照目前dpr、强弱互连网、设备宽度等算出最适合的图片伊始加载那张大 banner
了,并且初始发送数据请求了。

图片 8

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

图片 9

接下来下一帧 28,开端请求商品图片了。

图片 10

到 四伍 帧,6 个图片都在出现请求,同上 gw.alicdn.com 同3个域下并发 6个请求。但首屏除了大图外唯有 四 张图(二 张卖家 logo 被尾部 bar
挡住了),那里发出了 陆 个图片请求,可知那些页面的懒加载的 buffer
值能够安装得更加小。

图片 11

从 2捌 帧到 50 帧,经历了十分长的岁月,第3张图纸终于展现出来了。别的看到
aplus_v二 执行完后,又发起了 spm 等请求,后边 三 个请求(
aplus-proxy.html/isproxy.js/m.gif )依旧串行的。

图片 12

说起底到第 陆1 帧,终于有所的图样都加载完了,最终看下,最终下载完的是大
banner 图,因为有 四陆.玖k ,这张图的大大小小可能变成此页面包车型大巴 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

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

洁身自好说,小编前面还真没印象碰见过那种题材,第二印象以为是apache配置的php参数有毛病,但那也不会白屏啊,应该是下载php文件才对啊~好呢,笔者真正抓瞎了!

最重要内容可知时间

首要内容可知,那里能够认为是货物数量,商品数量可知要等 JS
执行完并且异步请求发送出去回来后才可知。

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

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,那应该是3个很广泛的出品环境下的lnamp集成套件了,提供了精锐的界面管理后台,小编很欣赏~~不多说了,再说就成了广告贴了!

网站地图xml地图