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

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

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

图片 1

有线页面包车型地铁支出在咱们的平凡专门的学问中越发首要,无线的属性也是大家必要注重关切的,而加载的质量又是有线品质中的三个重大难题。那么,几天前大家一同来看下怎么样去评估、测验有线页面包车型地铁加载质量。

为了便于深入分析页面包车型地铁加载进程,这里将网络设置成最慢的
GPRubiconS,并将加载进程录像下来,经常你能够经过 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
上首屏图片多,那样可并发更加多,但更加多的域名引进,也加大了域名剖析的工本,权衡之下天猫商城此前图片域名采纳了
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完成瀑布流页面浮现的切切实实代码,供大家参照他事他说加以考查,具体内容如下

不久前给家正舒适着,突然朋友打电话说让本人帮着看看她们的服务器,貌似出难点了~电话里描述的标题是:

瀑布流 (基于UICollectionView),uicollection瀑布流

图片 14

 

 

 

====2016年3月21日更新====
改革生龙活虎处默认值的BUG,能够供本人举办(BWaterflowLayout
能够当作框架灵活应用)

基于UICollectionView的瀑布流
自定义UICollectionViewLayout完毕cell的布局属性

[Objective-C] 查看源文件 复制代码 ?

1 2 3 4 5 6 7 8 /**瀑布流的列数*/ - (CGFloat)columnCountInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**每一列之间的间距*/ - (CGFloat)columnMarginInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**每一行之间的间距*/ - (CGFloat)rowMarginInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**cell边缘的间距*/ - (UIEdgeInsets)edgeInsetsInWaterflowLayout:(BWaterflowLayout *)waterflowLayout;

    直接下载代码:

(基于UICollectionView),uicollection瀑布流
====二零一五年二月13日更新====
修改少年老成处暗许值的BUG,能够供自身进行(BWaterflowLayout 可以当…

页面可知时间

在第 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集成套件了,提供了精锐的分界面管理后台,作者很兴奋~~非常的少说了,再说就成了广告贴了!

白屏时间和补救方法

在 Wi-Fi 下,那 60
多帧的进程黄金时代眨眼就过去了,但在弱网络下,如这里最极端的互连网 GP哈弗S
下,整个首屏含图片全体加载成功要求 41.25s。当然那 40
多秒进程能赶紧现身内容,并渐进协调地显现出来是比较好的。

男装频道是修改过后的,相比较此前的未处理的猜你赏识页面,现身长日子的白屏,如下:

图片 15

以下为本地生活修复后的功能:

图片 16

白屏管理只要稍加注意下就足以,修复的平价也简要,尽量同步输出,异步输出请尽恐怕mock 出未来首屏的模版。假若是遵照 Cake\[3\]
工具开垦的,也能够一向用首屏填充伪标签。

url.py

经过ssh登入到服务器上,轻易的看了占卜关的安排,确实没什么思路,相关的log也没觉察怎么形容!只可以求助于wdcp论坛了,遵照长辈们的施工方案,初阶逐个审查,结果开掘果然是出于磁盘满了变成的php页面白屏!

结束语

以上在 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),
]

不行的欣喜,为何磁盘满了,php就能够白屏呢?那尼玛是不死逗比?

注:

  • [1]: TMS 为Tmall内部运维活动系统。
  • [2]: TCE 为Tmall内部数据接口系统。
  • [3]: Cake 为Tmall内部前端开采套件。

 

1 赞 收藏 1
评论

图片 17

index.html

既然如此知道从头到尾的经过,那么化解就不是主题素材了,找到导致磁盘写满的显要缘由,是因为mysql的数据库文件被钦定到了根目录挂载点,而vps的这一个挂载点分配的超小,所以只必要把数据库文件钦命到最大的挂载点就可以。注意改善新路径下的文书夹权限,不然mysql大概不能够不奇怪运行哟~

<!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达成瀑布流效果分享

发表评论

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

网站地图xml地图