進階數學，進階筆記

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）

存儲

繼承

長投學堂股票進階課筆記？原型鏈繼承

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);}}
}
復制代碼