《高性能网站建设进阶指南》--读书笔记

最近在关注如何提升网站性能方面的内容，连续看了《高性能网站建设指南》和《高性能网站建设进阶指南》。看完后的觉得收获颇丰，书中提出了很多在提升网站性能方面应注意的事项和所运用的技术，尽管有些内容很老旧，但是仍有部分内容在工作中还是发挥出巨大的效果的。书中有些部分添加了自己的见解，如有错误之处还望提出。

第一章、理解Ajax性能

1.2 优化原则

优化的目的是降低程序的整体开销，我们应该把重点放在对程序整体开销影响最大的那部分

第二章、创建快速响应的WEB应用

2.1 怎样才算足够快

• Javascript代码执行时间超过0.1秒，页面将会给人不够平滑的感觉
• 超过1秒，用户会感到程序缓慢
• 超过10秒，用户非常沮丧

2.2 测量延迟时间

手动代码检测

利用new Date()

var start = new Date().getMilliseconds();
//这里是你需要检测的javascript代码
var end = new Date().getMilliseconds();
console.log("your javascript code executed in "+ (end - start) +" milliseconds");

利用console.time()

//这两个方法中都可以传入一个参数，作为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器。
//对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒。
console.time('计时器');
//这里是你需要检测的javascript代码
console.timeEnd('计时器');

Performance API网页性能检测

var performance = {  
    // memory 是非标准属性，只在 Chrome 有
    // 财富问题：我有多少内存
    memory: {
        usedJSHeapSize:  16100000, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
        totalJSHeapSize: 35100000, // 可使用的内存
        jsHeapSizeLimit: 793000000 // 内存大小限制
    },
 
    //  哲学问题：我从哪里来？
    navigation: {
        redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
        type: 0           // 0   即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
                          // 1   即 TYPE_RELOAD       通过 window.location.reload() 刷新的页面
                          // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
                          // 255 即 TYPE_UNDEFINED    非以上方式进入的页面
    },
 
    timing: {
        // 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，
        // 如果无前一个网页 unload ，则与 fetchStart 值相等
        navigationStart: 1441112691935,
 
        // 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
        unloadEventStart: 0,
 
        // 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
        unloadEventEnd: 0,
 
        // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0 
        redirectStart: 0,
 
        // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0 
        redirectEnd: 0,
 
        // 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
        fetchStart: 1441112692155,
 
        // DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
        domainLookupStart: 1441112692155,
 
        // DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
        domainLookupEnd: 1441112692155,
 
        // HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等
        // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
        connectStart: 1441112692155,
 
        // HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等
        // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
        // 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
        connectEnd: 1441112692155,
 
        // HTTPS 连接开始的时间，如果不是安全连接，则值为 0
        secureConnectionStart: 0,
 
        // HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存
        // 连接错误重连时，这里显示的也是新建立连接的时间
        requestStart: 1441112692158,
 
        // HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
        responseStart: 1441112692686,
 
        // HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
        responseEnd: 1441112692687,
 
        // 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
        domLoading: 1441112692690,
 
        // 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
        // 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
        domInteractive: 1441112693093,
 
        // DOM 解析完成后，网页内资源加载开始的时间
        // 在 DOMContentLoaded 事件抛出前发生
        domContentLoadedEventStart: 1441112693093,
 
        // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
        domContentLoadedEventEnd: 1441112693101,
 
        // DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
        domComplete: 1441112693214,
 
        // load 事件发送给文档，也即 load 回调函数开始执行的时间
        // 注意如果没有绑定 load 事件，值为 0
        loadEventStart: 1441112693214,
 
        // load 事件的回调函数执行完毕的时间
        loadEventEnd: 1441112693215
    }
}

performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到100万分之一秒。
并且与 Date.now() 会受系统程序执行阻塞的影响不同，performance.now() 的时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）。
注意 Date.now() 输出的是 UNIX 时间，即距离 1970 的时间，
而 performance.now() 输出的是相对于 performance.timing.navigationStart(页面初始化) 的时间。
使用 Date.now() 的差值并非绝对精确，因为计算时间时受系统限制（可能阻塞）。
但使用 performance.now() 的差值，并不影响我们计算程序执行的精确时间。

var start = performance.now();
//这里是你需要检测的javascript代码
var end = performance.now();
console.log("your javascript code executed in "+ (end - start) +" microseconds");

检测网页更多其他性能可用以下方法

// 计算加载时间
function getPerformanceTiming() {
    var performance = window.performance;
    if (!performance) {
        // 当前浏览器不支持
        console.log('你的浏览器不支持 performance 接口');
        return;
    }
    var t = performance.timing;
    var times = {};
    //【重要】重定向的时间
    //【原因】拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com
    times.Redirect = t.redirectEnd - t.redirectStart;
    // DNS 缓存时间
    times.Appcache = t.domainLookupStart - t.fetchStart;
    //【重要】DNS 查询时间
    //【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
    times.DNS = t.domainLookupEnd - t.domainLookupStart;
    // TCP 建立连接完成握手的时间
    times.TCP = t.connectEnd - t.connectStart;

    //【重要】读取页面第一个字节的时间
    //【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？
    // TTFB 即 Time To First Byte 的意思
    times.ttfb = t.responseStart - t.navigationStart;

    //【重要】内容加载完成的时间
    //【原因】页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？
    times.loadResources = t.responseEnd - t.requestStart;

    //【重要】解析 DOM 树结构的时间
    //【原因】反省下你的 DOM 树嵌套是不是太多了！
    times.domReady = t.domComplete - t.responseEnd; //t.domLoading

    //【重要】执行 onload 回调函数的时间
    //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？
    times.loadEvent = t.loadEventEnd - t.loadEventStart;

    //【重要】页面加载完成的时间
    //【原因】这几乎代表了用户等待页面可用的时间
    times.loadPage = t.loadEventEnd - t.navigationStart;

    // 前一个网页卸载页面的时间
    times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;

    return times;
}

2.3 线程处理

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。
可以使用Web worker将开销很大的代码从与用户交互的线程中剥离
webworker简单示例：

//main.js
if (window.Worker) {
    console.log("Yes! Web worker support!");
    // Some code.....
} else {
    console.log("Sorry! No Web Worker support..");
}

var worker = new Worker("worker.js");
//子线程新建之后，并没有启动，必需等待主线程调用postMessage方法，即发出信号之后才会启动。
worker.postMessage("hello world!");

worker.onmessage = function(e) {
    console.log(e.data);//'You said: hello world!
    //终止worker
    worker.terminate();
};
worker.onerror = function(e) {
    console.log('Error:' + e);
};

//worker.js
self.onmessage = function (e) {
    self.postMessage('You said: ' + e.data);
};

2.4 内存管理

Javascript使用的是自动垃圾回收机制，随着应用程序内存占用的增加，遍历整个堆区查找不再使用的对象所需要的时间将增长并最终引起用户的注意
一旦确定内存有问题，应该手动解除引用优化内存：

• 将不再需要的对象赋值为null
• 从网页的DOM树上移除不再是必需的节点

第4章、无阻赛加载脚本

defer & async

HTML5为script引入的新属性用于改变脚本的执行方式，只适用于外部脚本文件。这些属性告知浏览器引入进来的脚本文件不会影响DOM结构，可以在下载脚本的同时继续解析和渲染文档，都会在window.onload事件之前执行。
区别：

• defer 异步下载，下载完成后等到页面中其他外链js文件执行完毕，在DOMContentLoaded Event事件之前执行
• async 异步下载，下载完后立即执行，不能保证脚本执行顺序

兼容性：

• defer: IE8+ chrome45+ firefox52+
• async：IE11+ chrome45+ firefox52+
  同时支持两者的浏览器会遵从async而忽略defer

Script DOM element

var scriptElem = document.createElement('script');
scriptElem.src = "2.js";
document.getElementsByTagName('head')[0].appendChild(scriptElem);

动态脚本插入DOM后开始发出请求外部js文件，在DOMContentLoaded事件之后执行

XMLHttpRequest

该方法不能跨域，不推荐使用

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        var scriptElem = document.createElement("script");
        document.getElementsByTagName("head")[0].appendChild(scriptElem);
        scriptElem.text = xhr.responseText;
    }
};
xhr.open("GET", "A.js", true);
xhr.send("");

第5章、整合异步脚本

代码异步执行可能会出现竞争状态从而导致出现未定义标识符错误，当异步加载的外部脚本与行内脚本之间存在代码依赖时，我们必须通过一种保证执行顺序的方法来整合这两个脚本

script Onload

var scriptElem = document.createElement('script');
scriptElem.src = "js/jquery-1.11.0.js";
scriptElem.onloadDone = false;
scriptElem.onload = function() {
    scriptElem.onloadDone = true;
    init();
};
//兼容IE8
scriptElem.onreadystatechange = function() {
    if (("loaded" === scriptElem.readyState || "complete" === scriptElem.readyState) && !scriptElem.onloadDone) {
        scriptElem.onloadDone = true;
        init();
    }
};
document.getElementsByTagName('head')[0].appendChild(scriptElem);

function init() {
    console.log($);
}

Script Onload是整合单个异步加载外部脚本和行内脚本的首选

多个外部脚本

function loadDomScript(url, callback) {
    var domscript = document.createElement('script');
    domscript.src = url;
    if (callback) {
        domscript.onloadDone = false;
        domscript.onload = function() {
            domscript.onloadDone = true;
            callback();
        };
        //IE8
        domscript.onreadystatechange = function() {
            if (("loaded" === domscript.readyState || "complete" === domscript.readyState) && !domscript.onloadDone) {
                domscript.onloadDone = true;
                callback();
            }
        };
    }
    document.getElementsByTagName('head')[0].appendChild(domscript);
}
loadDomScript("https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js");
loadDomScript("http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js", init);

function init() {
    console.log(_);
    console.log($);
}

多个外部脚本暂无更好的方法

第6章、布置行内脚本

异步执行行内脚本

function asyncJs(){
    //your javascript code
}
setTimeout(async,0);

setTimeout(async,0)作用是让async在现有的任务（脚本的同步任务和“任务队列”中已有的事件）一结束就立刻执行。

第9章、超越Gzip压缩

Gzip失效原因

web代理和PC安全软件

对Gzip的支持进行直接探测

第11章、划分主域

当从单个域下载资源成为瓶颈时，可将资源分配到多个域上，通过增加并行的下载数来提高页面速度
对那些想把资源分配到多个域的人来说，他们不必额外部署服务器，只需建立一条CNAME记录，CNAME仅仅是域名的一个别名。

文章目录

1. 第一章、理解Ajax性能
   1. 1.2 优化原则
2. 第二章、创建快速响应的WEB应用
   1. 2.1 怎样才算足够快
   2. 2.2 测量延迟时间
      1. 手动代码检测
      2. Performance API网页性能检测
   3. 2.3 线程处理
   4. 2.4 内存管理
3. 第4章、无阻赛加载脚本
   1. defer & async
   2. Script DOM element
   3. XMLHttpRequest
4. 第5章、整合异步脚本
   1. script Onload
   2. 多个外部脚本
5. 第6章、布置行内脚本
   1. 异步执行行内脚本
6. 第9章、超越Gzip压缩
   1. Gzip失效原因
   2. 对Gzip的支持进行直接探测
7. 第11章、划分主域

原文链接: https://jesse121.github.io/blog/articles/2017/06/05.html

版权声明: 转载请注明出处.