進階筆記

蒙面大蝦發表於2019-02-27
筆記

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)));
   }
}
複製程式碼

相關文章