## 一、語言
**1）慎用全局變量**
  當變量暴露在全局作用域中時，由于全局作用域比較復雜，因此查找會比較慢。
  并且還有可能污染window對象，覆蓋之前所賦的值，發生意想不到的錯誤。
~~~
0 == '' //true
0 == '0' //true
~~~
**3）簡寫**
  簡寫的方式很多，此處只會列舉其中的幾種，例如用三目運算替代if-else語句，或用&&或||符號替代條件語句。
~~~
if (count > 1) {
++a;
} else {
--a;
}
// 簡寫
count > 1 ? (++a) : (--a);
if (count) {
++a;
}
// 簡寫
count && (++a)
~~~
  利用ES6語法，可以用解構賦值，簡潔明了。還有些小技巧包括用箭頭函數表示回調，塊級作用域變量等。
~~~
const { count } = obj;
~~~
  關于去除數組中的重復數，可以采用ES6最新的Set數據結構。
~~~
Array.from(new Set(arr));
~~~
**4）減少魔法數**
  魔法數是指意義不明的常量，例如直接在代碼中使用一個數字1，其判斷條件令人費解。
~~~
if(type == 1) { }
~~~
  而如果將該數字賦給一個語義化的常量后，就能明確其意圖。
~~~
const ERROR_TYPE = 1;
if(type == ERROR_TYPE) { }
~~~
**5）位運算**
  用位運算取代純數學操作，例如對2取模（digit%2）判斷偶數與奇數。
~~~
if (digit & 1) {
// 奇數（odd）
} else {
// 偶數（even）
}
~~~
  位掩碼技術，使用單個數字的每一位來判斷選項是否成立。掩碼中每個選項的值都是2的冪。
~~~
var OPTION_A = 1, OPTION_B = 2, OPTION_C = 4, OPTION_D = 8, OPTION_E = 16;
//用按位或運算創建一個數字來包含多個設置選項
var options = OPTION_A | OPTION_C | OPTION_D;
//接下來可以用按位與操作來判斷給定的選項是否可用
//選項A是否在列表中
if(options & OPTION_A) {
//...
}
~~~
  用按位左移（\<<）做乘法，用按位右移做除法（\>>），例如digit*2可以替換成digit<<2。
**6）字符串拼接**
  除了使用加號（+）或加等（+=）實現字符串拼接之外，還可以使用數組的join()和字符串的concat()方法。
~~~
["strick", "jane"].join("");
"strick".concat("jane");
~~~
  ES6提供的模板字面量是一種能夠嵌入表達式的格式化字符串，也可以用來做字符串拼接。
~~~
str = "My name is \"" + name + "\". M y age is " + age + "."; //傳統拼接方式
str = `My name is "${name}". My age is ${age}.`; //模板字面量方式
~~~
**7）正則優化**
  正則優化包括：
1. 減少分支數量，縮小分支范圍；
2. 使用非捕獲數組；
3. 只捕獲感興趣的文本以減少后期處理；
4. 使用合適的量詞；
5. 化繁為簡，分解復雜的正則。
**8）惰性模式**
  惰性模式用于減少每次代碼執行時的重復性分支判斷，通過對對象重定義來屏蔽原對象中的分支判斷。
  惰性模式分為兩種：第一種文件加載后立即執行對象方法來重定義，第二種是當第一次使用方法對象時來重定義。
~~~
var A = {};
//加載時 損失性能 第一次加載時 不損失性能
A.on = (function (dom, type, fn) {
if (dom.addEventListener) {
return function (dom, type, fn) {
dom.addEventListener(type, fn, false);
};
} else if (dom.attachEvent) {
return function (dom, type, fn) {
dom.attachEvent("on" + type, fn);
};
} else {
return function (dom, type, fn) {
dom["on" + type] = fn;
};
}
})();
//加載時 不損失性能 第一次加載時 損失性能
A.on = function (dom, type, fn) {
if (dom.addEventListener) {
A.on = function (dom, type, fn) {
dom.addEventListener(type, fn, false);
};
} else if (dom.attachEvent) {
A.on = function (dom, type, fn) {
dom.attachEvent("on" + type, fn);
};
} else {
A.on = function (dom, type, fn) {
dom["on" + type] = fn;
};
}
//執行重定義on方法
A.on(dom, type, fn);
};
~~~
**9）使用緩存**
  當執行for循環時，需要讀取數組的長度，可以事先做緩存。
~~~
for (let i = 0, len = arr.length; i < len; i++) {}
~~~
  或者在事件處理程序或對象方法中緩存this指向。
~~~
var obj = {
name: function () {
let self = this;
}
};
btn.addEventListener("click", function(event) {
let self = this;
}, false);
~~~
**10）記憶函數**
  記憶函數是指能夠緩存先前計算結果的函數，避免重復執行不必要的復雜計算，是一種用空間換時間的編程技巧。
  具體的實施可以有多種寫法，例如創建一個緩存對象，每次將計算條件作為對象的屬性名，計算結果作為對象的屬性值。
  下面的代碼用于判斷某個數是否是質數（質數又叫素數，是指一個大于1的自然數，除了1和它本身外，不能被其它自然數整除的數），在每次計算完成后，就將計算結果緩存到函數的自有屬性digits內。
~~~
function prime(number) {
if (!prime.digits) {
prime.digits = {}; //緩存對象
}
if (prime.digits[number] !== undefined) {
return prime.digits[number];
}
var isPrime = false;
for (var i = 2; i < number; i++) {
if (number % i == 0) {
isPrime = false;
break;
}
}
if (i == number) {
isPrime = true;
}
return (prime.digits[number] = isPrime);
}
prime(87);
prime(17);
console.log(prime.digits[87]); //false
console.log(prime.digits[17]); //true
~~~
**11）閉包**
  通常來說，函數的活動對象會隨著執行環境一同銷毀。但引入閉包時，由于引用仍然存在于閉包的作用域中，因此對象無法被銷毀。
~~~
function outter(count) {
count++;
// 閉包
function inner() {
return count + 1;
}
return inner();
}
~~~
  這意味著閉包需要更多的內存開銷。在腳本編程中，要小心地使用閉包。
  推薦將跨作用域的變量存儲到一個局部變量中，然后直接訪問該局部變量，如下所示，將count作為參數傳遞給inner()函數。
~~~
function outter(count) {
count++;
// 閉包
function inner(count) {
return count + 1;
}
return inner(count);
}
~~~
**12）節流和去抖動**
  節流（throttle）是指預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期。適用于mousemove事件、window對象的resize和scroll事件。
~~~
function throttle(fn, wait) {
let start = 0;
return () => {
const now = +new Date();
if (now - start > wait) {
fn();
start = now;
}
};
}
~~~
  去抖動（debounce）是指當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。適用于文本輸入的keydown事件，keyup事件，做autocomplete等。
~~~
function debounce(fn, wait) {
let start = null;
return () => {
clearTimeout(start);
start = setTimeout(fn, wait);
};
}
~~~
  節流與去抖動最大的不同的地方就是在計算最后執行時間的方式上。著名的開源工具庫underscore中有內置了兩個方法。
## 二、應用
**1）合理放置腳本**
  腳本會阻塞頁面渲染，直至全部下載并執行完成后，頁面渲染才會繼續。瀏覽器在解析到body元素之前，不會渲染頁面的任何部分。
  把腳本放在頁面頂部會導致明顯的延遲，通常表現為空白頁面。因此推薦將所有script元素盡可能放到body元素底部。
**2）無阻塞腳本**
  為了解決阻塞的問題，script元素新增了兩個布爾屬性，分別是延遲（defer）和異步（async）。
1. defer：延遲腳本執行，直到文檔解析完成。
2. async：盡快執行腳本，不會阻塞文檔解析。
~~~html
<script src="scripts/jquery.js" defer></script>
<script src="scripts/jquery.js" async></script>
~~~
**3）動態腳本**
  用JavaScript動態創建script元素，文件的下載和執行過程不會阻塞頁面其它進程。
~~~
var hm = document.createElement("script");
hm.src = "//www.pwstrick.com/hm.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
~~~
**4）圖像上傳**
  在上傳圖像時，可將其轉換成Base64，相當于將圖像做成字符串傳送到后臺。在下面的示例中用到了[FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)對象。
~~~
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = new Image();
img.src = this.result;
console.log(this.result);
};
~~~
  注意，Base64圖像會比原圖要大。
**5）原生方法**
  JavaScript引擎提供的原生方法總是最快的。因為原生方法存在于瀏覽器中，并且都是用低級語言編寫的。
  這意味著它們會被編譯成機器碼，成為瀏覽器的一部分，不會像自己寫的JavaScript代碼那樣受到各種限制。
  CSS查詢被JavaScript原生支持并被jQuery發揚光大。jQuery的選擇器引擎雖然很快，但是仍然比原生方法慢。
  推薦使用原生的querySelector和querySelectorAll()作為選擇器。
**6）本地緩存**
  在HTML5的本地緩存出現之前，都喜歡用cookie緩存數據。但cookie數據量只有4KB左右，并且每次都會攜帶在HTTP首部中，如果使用cookie保存過多數據會帶來性能問題。
  而[localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)和[sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage)數據量一般在2.5M到10M之間（大部分是5M），并且不參與和服務器之間的通信，因此比較容易實現網頁或應用的離線化。
**7）重排和重繪**
  當DOM的變化影響了元素的幾何屬性（寬和高）將會發生重排（reflow），發生重排的情況如下所列。
1. 添加或刪除可見的DOM元素
2. 元素位置改變
3. 元素尺寸改變（包括外邊距、內邊距、邊框寬度、寬、高等屬性）
4. 內容改變，例如文本改變或圖片被不同尺寸的替換掉。
5. 頁面渲染器初始化。
6. 瀏覽器窗口尺寸改變。
  完成重排后，瀏覽器會重新繪制受影響的部分到屏幕中，此過程為重繪（repaint）。
  下面代碼看上去會重排3次，但其實只會重排1次，大多數瀏覽器通過隊列化修改和批量顯示優化重排版過程。
~~~
//渲染樹變化的排隊和刷新
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';
~~~
  但下列操作將會強迫隊列刷新并要求所有計劃改變的部分立刻應用：
~~~
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)（在 IE 中此函數稱為 currentStyle）
~~~
  像offsetHeight屬性需要返回最新的布局信息，因此瀏覽器不得不執行渲染隊列中的“待處理變化”并觸發重排以返回正確的值。
  最小化重繪和重排的方式有兩種：
1. cssText和class，cssText可以一次設置多個CSS屬性。class也可以一次性設置，并且更清晰，更易于維護，但有前提條件，就是不依賴于運行邏輯和計算的情況。
2. 批量修改DOM，包括隱藏元素display:none，修改后重新顯示display:block；使用文檔片段fragment，在片段上操作節點，再拷貝回文檔；將原始元素拷貝到一個脫離文檔的節點中（例如position:absolute），修改副本，完成后再替換原始元素。
**8）定時器**
  為了不讓一些復雜的JavaScript任務阻塞線程，就需要將其讓出線程的控制權，即停止執行，可以通過定時器實現。
  當函數運行時間太長時，可以把它拆分成一系列更小的步驟，把每個獨立的方法放到定時器中回調，如下所示，其中arguments.callee是指當前正在執行的函數。
~~~
let tasks = [openDocumnet, writeText, closeDocument, updateUI];
setTimeout(function() {
//執行下一個任務
let task = tasks.shift();
task();
//檢查是否還有其他任務
if (tasks.length > 0) {
setTimeout(arguments.callee, 25);
}
}, 25);
~~~
**9）動畫**
  JavaScript早期的動畫是用定時器實現的，但隨著瀏覽器功能的不斷完善，出現了一種更新、性能更高的方法：[requestAnimationFrame()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)。
  requestAnimationFrame()會在重繪之前更新下一幀的動畫，注意，回調函數自身必須再次調用requestAnimationFrame()，如下所示。
~~~
function step(timestamp) {
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
~~~
**10）Ajax**
  最快的Ajax請求是沒有請求，即避免發送不必要的請求，例如：
1. 在服務端，設置HTTP首部信息以確保響應會被瀏覽器緩存。
2. 在客戶端，把獲取到的信息緩存到本地。
其它加速Ajax的技術包括：
1. 數據格式采用輕量級的JSON，解析速度快，通用性與XML相當。
2. 縮短頁面加載時間，主要內容加載后，再用Ajax獲取次要文件。
3. 確保代碼的健壯性，錯誤不會輸出給用戶。
**11）DOMContentLoaded**
  當初始的HTML文檔被完全加載和解析完成之后，[DOMContentLoaded](https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded)事件被觸發，而無需等待樣式表、圖像等資源的完全加載。
~~~
document.addEventListener("DOMContentLoaded", function() { }, false);
~~~
  另一個load事件應該僅用于檢測一個完全加載的頁面。
  注意，DOMContentLoaded事件必須等待其所屬script之前的樣式表加載解析完成后才會觸發。
**12）事件委托**
  事件委托（event delegation）是一種提高程序性能、降低內存空間的技術手段，它利用了事件冒泡的特性，只需在某個祖先元素上注冊一個事件，就能管理其所有后代元素上同一類型的事件。
  通過事件對象的target屬性，就能分辨出當前運行在哪個事件目標上，如下所示。
~~~
container.addEventListener("click", function(event) {
event.target;
}, false);
~~~
  使用委托后就能避免對容器中的每個子元素注冊事件，并且如果在容器中動態添加子元素，新加入的子元素也能使用容器元素上注冊的事件，而不用再單獨綁定一次事件處理程序。
**13）SSR**
  服務器端渲染（[SSR](https://juejin.im/post/5def0816f265da33aa6aa7fe)）是指將單頁應用（SPA）在服務器端渲染成HTML片段，發送到瀏覽器，然后交由瀏覽器為其綁定狀態與事件，成為完全可交互頁面的過程。
其優點是：
1. 更快的首屏加載速度，無需等待JavaScript完成下載且執行之后才顯示內容。
2. 更友好的SEO，爬蟲可以直接抓取渲染之后的頁面。
**14）MVVM**
  MVVM模式是指視圖和數據之間的雙向互通，視圖的修改會反映給數據，反之亦然。
  目前市面上許多庫和框架都會采用MVVM模式的思想，其提升的并不在于性能，而是開發效率，鼓勵開發者操作數據更新視圖，由庫或框架最低限度的操作DOM，減少回流。
**15）虛擬DOM**
  虛擬DOM（Virtual DOM）是構建在真實DOM之上的一層抽象，它將DOM元素映射成內存中的JavaScript對象（即通過React.createElement()得到的React元素），形成一棵JavaScript對象樹。
  虛擬DOM與模板引擎有些相似，將多次的DOM操作先在映射的JavaScript對象中處理，再將該對象一次性掛載到真實的DOM樹上，避免因瀏覽器重排導致的大量無用計算。
  同構應用也是基于虛擬DOM實現的，虛擬DOM的思想還可應用于其它方面，例如[JavaScript錄像回放](https://zhuanlan.zhihu.com/p/103253120)。
**16）幀**
  大部分情況下，生成一個新的幀都是由 JavaScript 通過修改 DOM 或者 CSSOM 來觸發的。
  一個大的原則就是讓單個幀的生成速度變快，優化策略如下。
1. 減少 JavaScript 腳本執行時間，不要一次霸占太久主線程，例如將執行的函數分解為多個任務。
2. 避免強制同步布局，即避免 JavaScript 強制將計算樣式和布局操作提前到當前的任務中。
3. 避免布局抖動，即避免在一次 JavaScript 執行過程中，多次執行強制布局和抖動操作。
4. 合理利用 CSS 合成動畫，因為合成動畫是直接在合成線程上執行的，這和在主線程上執行的布局、繪制等操作不同。
5. 避免頻繁的垃圾回收，要盡量避免產生那些臨時垃圾數據和小顆粒對象的產生。
## 三、HTML5
**1）history**
  瀏覽器中的歷史瀏覽記錄就像一堆層疊的卡片，在HTML4中，可以使用window.history對象來控制歷史記錄的跳轉。
  HTML5引進了history.pushState()方法和history.replaceState()方法，允許逐條地添加和修改歷史記錄條目。這些方法可以協同window.onpopstate事件一起工作。
  利用全新的history對象，就能讓[Ajax](https://www.cnblogs.com/strick/p/4523995.html)就像重定向到新頁面一樣，擁有能夠返回上一頁或進入下一頁的功能。
**2）Web Worker**
  Web Worker可以在主線程（通常是UI線程）之外運行代碼，當在獨立線程中執行費時的任務時，就能避免主線程被阻塞。
  注意，由于Web Worker沒有綁定UI線程，因此它們不能訪問瀏覽器的許多資源，例如從外部線程修改DOM會導致界面出現錯誤。
  由于Web Worker有著不同的全局運行環境，因此需要創建一個完全獨立的JavaScript文件，其中包含了需要在Worker中運行的代碼。
  例如下面的code.js，其中message事件用于接收信息，postMessage()方法用于發送信息。
~~~
var worker = new Worker("code.js");
worker.onmessage = function (event) {
console.log(event.data); //"hello strick"
};
worker.postMessage("strick");
// code.js的內部代碼
self.onmessage = function (event) {
var text = `hello ${event.data}`;
self.postMessage(text);
};
~~~
  Worker通過importScripts()方法加載外部JavaScript文件，它的調用過程是阻塞式的，直到所有文件加載并執行完成之后，腳本才會繼續運行。注意，不會影響UI響應。
~~~
importScripts("foo1.js", foo2.js);
~~~
  Web Worker的實際應用包括解析大JSON字符串，計算復雜數學運算（例如圖像或視頻處理），大數組排序，任何超過100ms的處理過程，都應該考慮Worker方案。
**2）Service Worker**
  Service Worker是谷歌發起的實現PWA（Progressive Web App，漸進式Web應用）的一個關鍵角色，它相當于Web應用與瀏覽器之間的一臺代理服務器。
  Service Worker會在后臺啟動一條Worker線程（不能訪問DOM），其工作是把一些資源緩存起來（跨域資源無法緩存），然后攔截頁面的HTTPS請求，如果緩存中有，就從緩存里取，響應200，沒有就走正常的請求流程。
  Service Worker結合Web App Manifest能完成離線使用、斷網時返回200、將一個圖標添加到桌面上等。
**3）WebAssembly**
  將繁重的計算（如Web游戲）任務抽離到WebAssembly（WASM）中，它是一種二進制指令格式，被設計為一種用高級語言（如C/C++/Rust）編譯的可移植對象。
  WebAssembly的目的并不是替代JavaScript，而是與JavaScript共存，允許兩者一起工作。
  通過使用WebAssembly的JavaScript接口，你可以把WebAssembly模塊加載到一個JavaScript應用中，這樣在同一個應用中就能同時享用WebAssembly的性能和JavaScript的靈活。
  下載一個[simple.wasm](https://raw.githubusercontent.com/mdn/webassembly-examples/master/js-api-examples/simple.wasm)示例，其內容如下所示。
~~~
(module
(func $i (import "imports" "imported_func") (param i32))
(func (export "exported_func")
i32.const 42
call $i
)
)
~~~
  由于內部函數$i是從imports.imported\_func導入的，因此需要創建一個對象來反映simple.wasm中的兩級命名空間。
~~~
let importObject = {
imports: {
imported_func: (arg) => console.log(arg)
}
};
~~~
  在加載wasm文件后，使其在Array Buffer中可用，然后就可以使用導出函數了。
~~~
fetch("simple.wasm")
.then((res) => res.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, importObject))
.then((results) => {
results.instance.exports.exported_func();
});
~~~
*****
> 原文出處：
[博客園-Web優化躬行記](https://www.cnblogs.com/strick/category/1795726.html)
[知乎專欄-Web優化躬行記](https://zhuanlan.zhihu.com/c_1260996761008627712)
已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。
推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。
- ES6
- 1、let和const
- 2、擴展運算符和剩余參數
- 3、解構
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數組
- 13、類型化數組
- 14、函數
- 15、箭頭函數和尾調用優化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態方法和應用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎
- CSS進階
- 1、CSS基礎拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網格布局
- 10、CSS方法論
- 11、管理后臺響應式改造
- React
- 1、函數式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發
- 9、WebView中的頁面調試方法
- Vue.js
- 1、數據綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內容分發
- 7、渲染函數和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數據類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統和網絡
- 3、命令行工具
- 4、自建前端監控系統
- 5、定時任務的調試
- 6、自制短鏈系統
- 7、定時任務的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統
- 19、KOA源碼分析（上）
- 20、KOA源碼分析（下）
- 21、花10分鐘入門Node.js
- 22、Node環境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監控（上）
- 10、性能監控（下）
- 11、Socket.IO
- 12、ElasticSearch
- 監控系統
- 1、SDK
- 2、存儲和分析
- 3、性能監控
- 4、內存泄漏
- 5、小程序
- 6、較長的白屏時間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優化方法論之測量
- 2、優化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現
- 5、瀏覽器之JavaScript
- 6、網絡
- 7、構建
- 前端體驗優化
- 1、概述
- 2、基建
- 3、后端
- 4、數據
- 5、后臺
- Web優化
- 1、CSS優化
- 2、JavaScript優化
- 3、圖像和網絡
- 4、用戶體驗和工具
- 5、網站優化
- 6、優化閉環實踐
- 數據結構與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態規劃
- 程序員之路
- 大學
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎學習分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學習之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 日志
- 2020