進階筆記

GET和POST的區別

• GET請求可以緩存，POST不能
• POST請求比GET請求安全一點點，由於GET請求參數都包含在URL裏面，會被瀏覽器保存在歷史記錄中
• URL有長度限制，會影響GET請求，這個長度限制是瀏覽器規定的
• POST支持更多的編碼類型且不對數據類型限制

前端性能優化

加載優化

• 編寫樣式代替圖片，使用iconfont代替圖片
• 使用CDN加載圖片
• 小圖使用base64編碼代替圖片連接
• 使用雪碧圖
• 圖片懶加載

DNS預解析

• <link rel="dns-prefetch" href="http://example.com">

預加載

• <link rel="preload" href="http://example.com">

預渲染

• <link rel="prerender" href="http://example.com">

單頁應用

• 文件壓縮、合併
• 按需加載
• 樣式抽離，公共代碼抽離

腳本

• 減小重繪與迴流
• 儘可能使用事件代理代替事件綁定

css優化

• css寫在頭部，js寫在尾部
• 標準化各類瀏覽器前綴
• 選擇器嵌套層級避免太深

緩存

緩存方式

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache
• 網絡請求

緩存策略

• 強制緩存（Cache-control、Expires）
• 協商緩存（ETag、Last-Modified）

存儲

特性	cookie	localStorage	sessionStorage	indexDB
數據生命週期	通常由服務器生成，能夠設置過時時間	除非被清理，不然一直存在	頁面關閉就清理	除非被清理，不然一直存在
數據存儲大小	4K	5M	5M	無限
與服務端通訊	每次都會攜帶在header中，對於請求性能影響	不參與	不參與	不參與

繼承

原型鏈繼承

function Parent(name) {
    this.name = name;
}

Parent.prototype.say = function() {
    console.log(this.name);
}

function Child(name) {
    this.name = name;
}

Child.prototype = new Parent('father');
Child.prototype.eat = function() {
    console.log('eat!!!');
}
Child.prototype.constructor = Child;

var child = new Child('Son');
child.say(); // Son
child.eat(); // eat!!!
複製代碼

類式繼承

function Parent(name) {
    this.name = name;
}

Parent.prototype.say = function() {
    console.log(this.name);
}

function Child(name, parentName) {
    Parent.call(this, parentName);
    this.name = name;
}

Child.prototype.eat = function() {
    console.log('eat!!!');
}

var child = new Child('Son');
child.say(); // Uncaught TypeError: child.say is not a function
child.eat(); // eat!!!
複製代碼

組合式繼承

function Parent(name) {
    this.name = name;
}

Parent.prototype.say = function() {
    console.log(this.name);
}

function Child(name, parentName) {
    Parent.call(this, parentName);
    this.name = name;
}

Child.prototype = new Parent('father');
Child.prototype.eat = function() {
    console.log('eat!!!');
}
Child.prototype.constructor = Child;

var child = new Child('Son');
child.say(); // Son
child.eat(); // eat!!!
複製代碼

寄生組合式繼承

function Parent(name) {
    this.name = name;
}

Parent.prototype.say = function() {
    console.log(this.name);
}

function Child(name, parentName) {
    Parent.call(this, parentName);
    this.name = name;
}

function factory(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
}

Child.prototype = factory(Parent.prototype);
Child.prototype.eat = function() {
    console.log('eat!!!');
}
Child.prototype.constructor = Child;

var child = new Child('Son');
child.say(); // Son
child.eat(); // eat!!!
複製代碼

函數實現

• 函數組合運行
• 說明：實現一個方法，可將多個函數方法按從左到右的方式組合運行。
• 如composeFunctions(fn1,fn2,fn3,fn4)等價於fn4(fn3(fn2(fn1))。
• 示例：
• const add = x => x + 1;
• const multiply = (x, y) => x * y;
• const multiplyAdd = composeFunctions(multiply, add);
• multiplyAdd(3, 4) // 返回 13

function composeFunctions() {
   var args = Array.prototype.slice.apply(arguments);
   
   return function() {
       if (args.length == 1) {
           return args[0].apply(this, Array.prototype.slice.apply(arguments));
       }

       return composeFunctions(...args.slice(1))(args[0].apply(this, Array.prototype.slice.apply(arguments)));
   }
}
複製代碼

節流和防抖

// 防抖，只執行最後一次
function debounce (fn, wait) {
    var timer = null;

    return () => {
        if (timer) clearTimeout(timer);

        timer = setTimeout(() => fn.apply(this, Array.prototype.slice.call(arguments, 0)), wait);
    }
},

// 節流，每隔一段時間執行一次
function throttle(fn, wait) {
    var timer = null;

    return () => {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, Array.prototype.slice.call(arguments, 0));
                timer = null;
            }, wait);
        }
    }
}
複製代碼