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