瀑布流页面效果,Php页面白屏

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

2015/12/03 · HTML5,
JavaScript · 1
评论瀑布流页面效果,Php页面白屏。 ·
瀑布流,
白屏

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

图片 1

无线页面的付出在大家的平凡工作中特别紧要,无线的习性也是大家须求珍贵关切的,而加载的属性又是有线质量中的二个紧要难点。那么,明天我们一同来看下怎么样去评估、测试有线页面的加载品质。

为了便利分析页面的加载进程,那里将互连网设置成最慢的
GP大切诺基S,并将加载进度录像下来,寻常你可以由此 Chrome 自带的 timeline, 勾选
screenhot,可以赢得详尽的进程,如下图:

图片 2

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

帧分析如下:

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

图片 3

算是等到第 7 帧,HTML 加载并分析完成,发出页面中的请求,同时 CSS/JS
的地址都没有在 //g.alicdn.com 同三个域名下, Chrome 下 HTTP 1.1
协议下三个域名下帮忙 6 个冒出。

1 年前,PC 上以前还有八个域名分区(img01-04.tbcdn.cn),PC
上首屏图片多,那样可并发越来越多,但越多的域名引入,也加大了域名解析的资本,权衡之下天猫此前图片域名拔取了
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 同三个域下并发 陆个请求。但首屏除了大图外唯有 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

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

老实说,我事先还真没印象碰见过那种难点,第②印象以为是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,那应当是三个很广泛的出品环境下的lnamp集成套件了,提供了强硬的界面管理后台,笔者很欣赏~~不多说了,再说就成了广告贴了!

相关文章