一、JS開(kāi)銷和如何縮短解析時(shí)間
JS開(kāi)銷相比其他資源開(kāi)銷大的很多，js開(kāi)銷有加載跋涣，加載完成后需要編譯解析缨睡、最后是執(zhí)行。
如何縮短解析時(shí)間陈辱？
1.code splitting代碼拆分奖年，按需加載
2.tree shaking代碼減重（webpack自動(dòng)進(jìn)行）
3.避免超過(guò)1kb的行間腳本
4.避免長(zhǎng)任務(wù)
5.使用rAF和rIC進(jìn)行時(shí)間調(diào)度
二、配合V8 有效優(yōu)化代碼
V8編譯原理
1沛贪、分詞／詞法分析：
這個(gè)過(guò)程會(huì)將字符串分割為有意義的代碼塊陋守，這些代碼塊稱之為詞法單元。例如變量的聲明：
var a = 2;
這行代碼會(huì)被分為以下詞法單元：var利赋、a水评、=、2(空格算不算詞法單元取決于空格對(duì)于該編程語(yǔ)言是否具有意義)媚送；這些零散的詞法單元會(huì)組成一個(gè)詞法單元流（數(shù)組）進(jìn)行解析中燥。
2、解析／與法分析：
這個(gè)過(guò)程會(huì)將詞法單元流轉(zhuǎn)換成一棵抽象語(yǔ)法樹(shù)(Abstract Syntax Tree塘偎，AST）在線解析工具疗涉。
"var a = 2;"的詞法單元流就會(huì)被解析為下面的AST：
var a = 2;對(duì)應(yīng)的AST
3、代碼生成：
將AST轉(zhuǎn)化為可執(zhí)行的代碼吟秩。
V8的優(yōu)化機(jī)制：
1咱扣、腳本流
2、字節(jié)碼緩存
3涵防、懶解析
三闹伪、函數(shù)優(yōu)化.
V8這樣的JS引擎，默認(rèn)對(duì)函數(shù)進(jìn)行懶解析（lazy parsing）：只有當(dāng)這個(gè)函數(shù)真正被調(diào)用的時(shí)候壮池，才會(huì)去解析函數(shù)體偏瓤。這樣的解析方式會(huì)對(duì)性能有很好的提升。但是實(shí)際開(kāi)發(fā)中有的情況需要JS立即去執(zhí)行火窒，此時(shí)如果是懶解析的函數(shù)但是發(fā)現(xiàn)需要立即執(zhí)行硼补，于是又快速的進(jìn)行了一個(gè)饑餓解析（eager parsing），這樣的話會(huì)先進(jìn)行了一次饑餓解析熏矿，然后又進(jìn)行了一次懶解析已骇，執(zhí)行效率反而降低了。
那么如何告訴解析器某個(gè)函數(shù)需要立即解析:
只需加一對(duì)括號(hào)：
const add = ((a,b) => a+b) // 這樣的作用是告訴解析器票编，當(dāng)看到這個(gè)函數(shù)的時(shí)候就對(duì)這個(gè)函數(shù)進(jìn)行解析
const n1 = 1
const n2 = 2
add(n1,n2)
這樣當(dāng)后面需要調(diào)用的時(shí)候就可以直接調(diào)用了
有個(gè)問(wèn)題：
當(dāng)把代碼進(jìn)行壓縮時(shí)（uglyfy）褪储，可能會(huì)把這對(duì)括號(hào)去掉
解決：Optimize.js』塾颍可以在壓縮以后把括號(hào)加回來(lái)
uglyfy后來(lái)把這些問(wèn)題也解決了鲤竹，需要兼顧老版本的可以添加
避免反優(yōu)化
performance.mark('start') //性能測(cè)量標(biāo)記
add = (a,b) => a + b
const num1 = 0
const num2 = 2
for(let i = 0; i < 1000000; i++) {
add(num1,num2)
}
add(num1,'1dsd') // V8已經(jīng)做了對(duì)于add的優(yōu)化。如參數(shù)類型改變。所以要撤掉已做的優(yōu)化辛藻，會(huì)造成一些延遲碘橘。反優(yōu)化
for(let i = 0; i < 1000000; i++) {
add(num1,num2)
}
performance.mark('end')
四、對(duì)象優(yōu)化
1吱肌，以相同順序初始化對(duì)象成員痘拆，避免隱藏類的調(diào)整
class RectArea { // HC0
constructor(l, w) {
this.l = l; // HC1
this.w = w; // HC2
}
}
const rect1 = new RectArea(3,4); // 創(chuàng)建了隱藏類HC0, HC1, HC2
const rect2 = new RectArea(5,6); // 相同的對(duì)象結(jié)構(gòu)，可復(fù)用之前的所有隱藏類
const car1 = {color: 'red'}; // HC0
car1.seats = 4; // HC1
const car2 = {seats: 2}; // 沒(méi)有可復(fù)用的隱藏類氮墨，創(chuàng)建HC2
car2.color = 'blue'; // 沒(méi)有可復(fù)用的隱藏類纺蛆，創(chuàng)建HC3
2，實(shí)例化后规揪，避免添加新屬性
const car1 = {color: 'red'}; // In-object 屬性
car1.seats = 4; // Normal/Fast 屬性桥氏，存儲(chǔ)在property store里，需要通過(guò)描述數(shù)組間接查找
3猛铅，盡量使用Array 代替 array-like 對(duì)象字支。轉(zhuǎn)成數(shù)組再進(jìn)行操作。
Array.prototype.forEach.call(arrObj, (value, index) => { // 不如在真實(shí)數(shù)組上效率高
console.log(`${ index }: ${ value }`);
});
const arr = Array.prototype.slice.call(arrObj, 0); // 轉(zhuǎn)換的代價(jià)比影響優(yōu)化小
arr.forEach((value, index) => {
console.log(`${ index }: ${ value }`);
});
4奸忽，不要讀取超過(guò)數(shù)組的長(zhǎng)度
function foo(array) {
for (let i = 0; i <= array.length; i++) { // 越界比較
if(array[i] > 1000) { // 1.沿原型鏈的查找 2.造成undefined與數(shù)進(jìn)行比較
console.log(array[i]); // 業(yè)務(wù)上無(wú)效祥款、出錯(cuò)
}
}
5，避免元素類型的轉(zhuǎn)換月杉。eg：數(shù)組元素類型的統(tǒng)一
const array = [3, 2, 1]; // PACKED_SMI_ELEMENTS
array.push(4.4); // PACKED_DOUBLE_ELEMENTS
五、HTML優(yōu)化
1.減少iframes使用
2.壓縮空白符
3.避免節(jié)點(diǎn)深層級(jí)嵌套
4.避免table布局（開(kāi)銷大抠艾，維護(hù)麻煩）
5.刪除注釋
6.CSS&JS盡量外鏈（導(dǎo)致html過(guò)大苛萎，不好優(yōu)化）CSS放在頭部 JS放在body底部
7.刪除元素默認(rèn)屬性
六、css 優(yōu)化
1检号、選擇器
.highlight-list
.list:nth-last-child(1) > #box a
我們都建議定義一個(gè)單一的樣式類來(lái)表示該元素腌歉，如上面的第一行
而不要使用 偽類 等各種選擇器 來(lái)確定元素
因?yàn)槲覀兌贾繡SS選擇器解析 從右到左進(jìn)行的，讀取到a的時(shí)候齐苛，會(huì)獲取所有的a翘盖，然后根據(jù)nth-last-child（1）>這個(gè)條件進(jìn)行過(guò)濾，得到滿足條件的a 凹蜂，然后再往左走根據(jù).list這個(gè)條件過(guò)濾馍驯，得到最終的結(jié)果a
但是最新的瀏覽器的研究表明，兩者性能相差并不大玛痊，可以說(shuō)是完全一樣汰瘫，不是影響性能的主要因素
2、降低CSS對(duì)渲染的阻塞
低css的大小
提前對(duì)css文件進(jìn)行下載
對(duì)首屏展示有關(guān)的css先加載擂煞，無(wú)關(guān)的進(jìn)行延遲加載
3混弥、利用GPU進(jìn)行完成動(dòng)畫(huà)
will-change: transform; transform等之前講過(guò)不會(huì)進(jìn)行布局和重繪，會(huì)單獨(dú)在一層对省，GPU直接進(jìn)行干預(yù)
4.使用contain屬性
.news li {
padding: 10px;
contain: layout;
}
為什么要使用這個(gè)contain屬性呢
就比如 一個(gè)ul 有多個(gè)li 實(shí)現(xiàn)一個(gè)新聞列表
當(dāng)我們對(duì)第一個(gè)li插入一個(gè)新東西蝗拿，瀏覽器并不知道這個(gè)操作會(huì)不會(huì)影響其他元素的布局晾捏，這時(shí)候?yàn)g覽器會(huì)對(duì)其他元素進(jìn)行重新的位置等方面的計(jì)算，這時(shí)候開(kāi)銷很大哀托。但是我們開(kāi)發(fā)者肯定這個(gè)操作不會(huì)對(duì)其他元素造成影響惦辛。
此時(shí)我們就可以利用contain：layout，與瀏覽器進(jìn)行溝通萤捆。告訴瀏覽器我這個(gè)盒子的布局與外部沒(méi)有任何關(guān)系裙品。里面怎么變化不會(huì)影響到外面，同時(shí)外面怎么變化不會(huì)影響到里面俗或。
這樣瀏覽器就清楚了市怎，會(huì)單獨(dú)處理操作的元素，而不會(huì)對(duì)其他元素進(jìn)行處理辛慰，減低了很大一部分開(kāi)銷区匠。
- font-display字體加載，顯示方式
