這篇文章主要介紹一些前端性能優(yōu)化的術語定義和優(yōu)化出發(fā)點
技術優(yōu)化出發(fā)點
復用
很多時候我們開發(fā)都會復用一些模塊巢株，這是減少開發(fā)成本惠毁，比如造輪子犹芹。當然，在性能優(yōu)化方面鞠绰，復用也是非常重要的一點腰埂。
-
文件復用
文件復用是一種工程化的開發(fā)方式，比如說我們定義一些通用樣式蜈膨，放在一個樣式表里面屿笼，然后在各個組件都可以引用，或者作為全局樣式表翁巍，這樣肯定會比重復定義樣式表要更優(yōu)驴一，同樣其他文件（js、html等）都可以采用復用的方案灶壶。 -
模塊化
模塊化的思想在早些年就出現(xiàn)了：將一個復雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件), 并進行組合在一起肝断，最流行的CommonJS, AMD, ES6、CMD規(guī)范驰凛，都是模塊化的方案胸懈，通過js來維護一個整體模塊，包括動態(tài)引入css/js/html恰响，或者動態(tài)生成 -
后端復用
后端優(yōu)化也是性能優(yōu)化的一部分趣钱，雖然一般情況下沒有前端優(yōu)化的效果那么直接，包括接口復用胚宦，UI模塊復用首有，通用工具API的復用等等。比如說我們再做數(shù)據(jù)傳輸间唉，可能某些頁面，或者某些頁面的多個部分利术，可以只使用一個接口來傳值呈野，然后再靠前端分配資源。若這些需要后端數(shù)據(jù)傳輸?shù)牟糠质菍儆谕活愘Y源印叁，后端可以復用接口被冒，當然也是一種優(yōu)化方案。
加載方式
加載方式是對用戶而言的轮蜕，提升用戶的體驗昨悼，文章后面會講到一些術語，比如跳出率跃洛，調(diào)查發(fā)現(xiàn)用戶在3到4秒時間之后若發(fā)現(xiàn)頁面加載無響應率触，就會選擇放棄瀏覽網(wǎng)頁，也就是我們說的“跳出”汇竭。所以加載方式是非常重要的優(yōu)化出發(fā)點葱蝗，加載方式分為三種：同步加載穴张、分級加載和按需加載。
-
同步加載
同步一般指頁面都加載完才給用戶看两曼，也就是用戶的瀏覽和頁面加載是同步的皂甘，這種加載方式可以用于TCP連接較少的頁面加載。 -
分級加載
同步加載和異步加載的結(jié)合悼凑，有了異步加載偿枕，我們可以選擇某一些關鍵模塊首先加載給用戶瀏覽，比如說視頻網(wǎng)站户辫，可以選擇關鍵視頻模塊首先加載渐夸，其余模塊進行異步加載，也就是在用戶開始瀏覽關鍵部分的時候進行加載其余模塊寸莫。當然捺萌，還有一種加載方式叫懶加載，用戶首先瀏覽首屏（第一眼看到的）膘茎，拖動頁面之后漸漸加載未加載的模塊桃纯，實現(xiàn)用戶看什么就加載什么，未進入瀏覽區(qū)域的就不加載披坏。 -
按需加載
用戶不觸發(fā)該功能就不加載态坦，
用戶觸發(fā)該功能，就將該模塊的加載時間提前棒拂。
術語定義
介紹了優(yōu)化的出發(fā)點伞梯，再來了解一些術語可能會簡單一些。
首屏時間：加載到第一屏的功能點所消耗的時間帚屉，也就是用戶進來頁面第一眼看到的東西谜诫。
白屏時間：從進入頁面到head解析的時間，用戶看到白屏開始到頁面出現(xiàn)東西的時間攻旦。
可操時間：核心模塊的使用率和用戶感知喻旷，用戶可以操作核心模塊的等待時間。比如關鍵模塊點擊事件能否觸發(fā)牢屋。
連通率：用戶看到視頻或者聽到聲音的比例且预，這里的計算對象是用戶，比如100個人只有10個人看到視頻播放了烙无，連通率就是10%锋谐。
產(chǎn)品類術語有：一次訪問、多次訪問截酷、日活躍用戶涮拗、月活躍用戶、跳出率。
這里通俗地再解釋一次跳出率：用戶進入頁面因加載太慢放棄瀏覽的比例多搀。
解釋了這一些重要的術語歧蕉，我們可能大概知道這些術語之間的聯(lián)系了。比如說白屏時間和跳出率的聯(lián)系康铭，若用戶的白屏時間太久惯退，自然會降低用戶的體驗，造成跳出率升高从藤。
總結(jié)
這些知識只是性能優(yōu)化的冰山一角催跪，本文沒有介紹解決方案的具體做法。
- 我們首先要去了解瀏覽器的渲染原理夷野，從向服務器請求到頁面出現(xiàn)響應到底發(fā)生了一些什么
- 用戶訪問站點的時候會做些什么懊蒸，我們要站在用戶的角度去思考我們應該優(yōu)化哪些模塊，用什么方式優(yōu)化
- 可以了解業(yè)內(nèi)的通用優(yōu)化方案悯搔，比如雅虎軍規(guī)35條骑丸、Facebook和淘寶團隊的bigpipe方案 等等。
