javascript页面渲染速度测试脚本分享

代码如下:

/* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */
<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>
......
</head>

代码如下:

......
/* 页面最末端，计算页面加载耗用的时间 */
</body>
<script src="http://ossweb-img.qq.com/images/js/pagespeed/page_speed_v2.js"></script></html>

下面来分析一下page_speed_v2.js文件的内容。对这个脚本进行重新格式化，以便更加方便阅读。


代码如下:

/* 执行匿名函数构建对象PageSpeed */
;(function() {
    PageSpeed = {};/* 这里没有 var 关键字, 相当于引用的是 window.PageSpeed */

/**
     * 绑定createScript方法
  *
  * @param String a script标签的src属性的值
  * @param String b script标签的id属性的值
  */
    PageSpeed.createScript = function(a, b) {
        var c = null;

if (document.getElementById(b)) { /* script标签已经存在 */
            c = document.getElementById(b)
        } else { /* 不存在, 创建script标签 */
            c = document.createElement('script');
            var d = null;
            if (document.getElementsByTagName) {
                d = document.getElementsByTagName('head')[0] || document.documentElement;
            } else {
                d = document.documentElement;
            }
            d.insertBefore(c, d.firstChild); /* 调用insertBefore方法, 将新创建的script标签插入为第一个子元素 */
        }

/* 这里的花括号起到代码片段分组功能 */
  {
            c.setAttribute('type', 'text/html');
            c.setAttribute('style', 'display:none;');
            c.setAttribute('charset', 'gb2312');
            c.setAttribute('id', b);
            c.setAttribute('src', a);
        }

return c; /* 返回创建成功的script标签元素 */
    };

/**
     * 绑定 submitDataForPageSpeed 方法
  *
  * @param Object a Map对象
  */
    PageSpeed.submitDataForPageSpeed = function(a) {
        var b = {
            'name': '',
            'rate': 0
        };
        b.name = a.name;
        b.rate = a.rate;

/* a.PAGE_SPEED_TIME数组的最后一个元素减去第一个元素 */
        b['1'] = a.PAGE_SPEED_TIME[a.PAGE_SPEED_TIME.length - 1] - a.PAGE_SPEED_TIME[0];

for (var i = 1; i < a.PAGE_SPEED_TIME.length - 1; i++) {
            b[(i + 1) + ''] = a.PAGE_SPEED_TIME[i] - a.PAGE_SPEED_TIME[0]
        }

/* 提交速度测试结果的目的脚本 */
        var c = 'http://pagespeed-ied.qq.com/r.cgi';

/* 遍历 b 数组的元素, 构建 query string */
        var d = [];
        for (var p in b) {
            d.push(p + '=' + b[p])
        }
        c += '?' + d.join('&');

/* 创建script标签提交测速结果 */
        PageSpeed.createScript(c, 'submitForPageSpeed')
    };

/**
  * 绑定 defaultSubmit 方法
  *
  */
    PageSpeed.defaultSubmit = function() {
        var a = '';
        try {
            a = location.host
        } catch(e) {}

var b = {
            'name': a,
            'rate': 1,
            'PAGE_SPEED_TIME': []
        };

if (!b.name) {
            return
        }

if (! (typeof(PAGE_SPEED_TIME) == 'object' && PAGE_SPEED_TIME instanceof Array)) {
            return
        }

/* 获取新的时间戳 */
        PAGE_SPEED_TIME.push(new Date().getTime());

b.PAGE_SPEED_TIME = PAGE_SPEED_TIME;

/*
   * 没看懂这里为啥需要一个新的变量 aaa, 直接使用 a 不可以么?
   * try ... catch 结构中使用的却是一个新的变量 aaaa 但后面却从未使用, 为何? 是否应该是 aaa?
   */
        var aaa = '';
        try {
            aaaa = location.host
        } catch(e) {}

var c = Math.floor(Math.random() * 10000);

if (aaa == "ktv.qq.com" || aaa == "ttd.qq.com" || aaa == "tian.qq.com" || aaa == "sura.qq.com" || aaa == "gw.tnt.qq.com" || aaa == "007.qq.com") {
            c = Math.floor(Math.random() * 1000);
        }

/* 随机概率提交数据 */
        if (c <= b.rate * 1) {
            PageSpeed.submitDataForPageSpeed(b);
        }
    };

/**
  * 绑定submit方法(用于CDN测速?)
  *
  * @param String a 名称
  */
    PageSpeed.submit = function(a) {
        var b = PageSpeed.cdn_page_speed_submitData;
        var c = {};
        for (var p in b) {
            c[p] = b[p]
        }
        c.name = a || c.name;
        PageSpeed.submitDataForPageSpeed(c);
    }
})();

try {
    /* 1秒后尝试提交数据 */
    setTimeout(function() {
        PageSpeed.defaultSubmit()
    },
    1000);
} catch(e) {}

/* 最后这段注释, 第二段是32位16进制数字, 应该是类似于 ETag 用于标记内容版本的 */
/*  |xGv00|ca82276cd78ac911d3d4310ba1408236 */

赞 (0)

相关推荐

  • angularjs中的e2e测试实例

    angularjs中的e2e测试实例

    在上一篇文章里有讲到ng的单元测试,今天来说说e2e(端对端)测试. 当我们测试某个模块的单个功能点时,单元测试最适合,不过当面临用户进行多个页面交互的时候产生bug了,单元测试就不行了,这时候就得用e2e来模拟用户操作还原问题现场.当然利用e2e测试也能够测试程序的健壮性,很多单元测试办不到的事情,e2e测试都能够办到. 之前,ng是利用Angular Scenario Runner来运行e2e测试,现在已经换成Protractor来跑e2e了. Protractor Protractor是A

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • 访问百度和谷歌网速测试的javascript代码

    以下是访问百度和谷歌网速测试,请问怎么把得到的二个值保存到save变量里,并用document.write(save); 输出出来,谢谢! "); for(var i=1;i"); } document.write(""); } butt(); function auto(url,b){ document.forms[0]["txt"+b].value="响应时间:"+tim/100+"秒" } funct

  • JavaScript中匿名、命名函数的性能测试

    我们经常通过匿名函数(Anonymous function)来写回调. 简单来讲匿名即没有名字的函数,一般都立即执行.但是它与命名函数(有名字的函数)的性能如何呢? 我们可以比较一下,我们随便找一台可以执行Shell命令的计算机来使用大量函数调用看一看二者执行消耗时间: anonymous.js 复制代码 代码如下: var count = 100000000   , sum   = 0 while (count--) (function() { sum++ })() 执行一下 复制代码 代码如

  • js简单网速测试方法完整实例

    js简单网速测试方法完整实例

    本文实例讲述了js简单网速测试方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <m

  • JavaScript中的document.referrer在各种浏览器测试结果

    前段时间需要通过 JavaScript 获取页面的来源,这个操作很简单,使用 document.referrer 就可以获取到了.不过,实际应用中还是有很多意外情况,这儿简单整理一下. 首先遇到的问题,是从 HTTPS 页面转到 HTTP 页面后,document.referrer 的值为空.出于安全性考虑,很多网站的一些重要页面(比如淘宝的登录页面)都会使用 HTTPS 协议.如果某个未登录用户在页面 A(HTTP 页面)点击了页面 B(HTTP 页面)的链接,但页面 B 需要用户登录,于是先

  • 原生javascript兼容性测试实例

    1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle; 实例:封装函数 复制代码 代码如下: function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } 调用:ge

  • javascript页面渲染速度测试脚本分享

    复制代码 代码如下: /* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>......</head> 复制代码 代码如下: ....../* 页面最末端,计算页面加载耗用的时间 */</body&g

  • dota2服务器ping测试脚本分享

    dota2服务器ping测试脚本分享

    复制代码 代码如下: @ECHO offREM Dota 2 Ping Tester edited by FranzMeister (original code from PlanetSide 2 Ping Tester by Sh4rkill3rSG)ECHO DOTA2服务器PING测试 FranzMeister编辑ECHO ====================================== && ECHO.中国国服CALL:dota2 183.136.230.1ECHO -

  • JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

  • javascript页面倒计时实例

    本文实例讲述了javascript页面倒计时实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> </head> <body> <input type="text" name="mss" id="mss"/> <form action="./index.html"> <input type="text"

  • 浅谈vue异步数据影响页面渲染

    今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • 给页面渲染时间加速 干掉Dom Level 0 Event

    现在的web应用越来越复杂,需要响应各种各样的用户触发事件,因而也就不可避免的,需要给我们的html页面上的dom元素增加事件监听函数. 我们知道给dom元素绑定事件监听函数的方法有如下3种: 1 : 页面html: 复制代码 代码如下: <button onclick="test();"></button> 2: 页面html: 复制代码 代码如下: <button id="btn"></button> Javasc

  • JavaScript页面倒计时功能完整示例

    JavaScript页面倒计时功能完整示例

    本文实例讲述了JavaScript页面倒计时功能.分享给大家供大家参考,具体如下: 效果图: 源码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS倒计时</title> <style> h3{text-align:center;line-height:50px

  • 解决vue页面渲染但dom没渲染的操作

    我就废话不多说了,大家还是直接看代码吧~ this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ language: "zh-CN" }); }); 补充知识:vue+Echarts动态数据已经赋值,但是无法渲染页面的问题 最近用vue+Echarts想做一个饼状统计图,但是数据明明已经绑定完毕,但是页面渲染一直没有效果,最终才发现问题所在,自己还是个新手,主要对vue还不是很熟悉.

  • 十个简单使用的Python自动化脚本分享

    目录 1.给照片添加水印 2.检测文本文件的相似性 3.对文件内容进行加 密 4.将照片转换为PDF 5.修改照片的长与宽 6.对于照片的其他操作 7.测试网速 8.货币汇率的转换 9.生成二维码 10.制作一个简单的网页应用 在日常的工作学习当中,我们总会遇到各式各样的问题,其中不少的问题都是一遍又一遍简单重复的操作,不妨直接用Python脚本来自动化处理,今天小编就给大家分享十个Python高级脚本,帮助我们减少无谓的时间浪费,提高工作学习中的效率. 1.给照片添加水印 给照片添加水印的代码

随机推荐