1. 基本要求

前端界面顯示的速度一般要求是：60fps

2. 根據(jù)要求 1s / 60 = 16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發(fā)者能使用的時間大概10ms

10ms中處理的流程為：

javascript > style > layout > paint > composite

如果JS的操作影響到了界面樣式的變化，則有上面的處理流程

如果style的操作影響到布局，則會進入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint

3. 減少渲染堵塞

避免head標(biāo)簽JS堵塞

異步加載JS: HTML5 的script 屬性 defer

JS寫在body后面

Tips: 可能有時候JS庫，還沒加載完就要執(zhí)行了，可能會報錯

減少 head 中的 CSS 資源

CSS 會影響到 layout ，寫在Body里面會界面閃爍，但寫在Head里面如果太多會影響渲染

不要寫太多base64，雖然很方便，但會改變文件大小

如果CSS文件沒有達到三位數(shù)的大小，可以直接寫到Html界面中，因為如果使用外鏈樣式，則可能會花費更多時間，如DNS解析，建立鏈接，下載等

優(yōu)化圖片，使用響應(yīng)式圖片，圖片的srcset 屬性，會有兼容問題

<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>

使用picture按需加載，需要寫在HTML中，如果使用JS來調(diào)用，則無效

<picture>

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優(yōu)化屬性，不過會有兼容問題: type='image/webp'

<source srcset='baner_w800.jpg' media="(max-width:800px)">

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標(biāo)簽，只有img標(biāo)簽才會觸發(fā)onload事件; picture 與 source 都不觸發(fā) layout

</picture>

判斷瀏覽器是否支持：

var supportSrcset = 'srcset' in document.createElement('img');

var surportPicture = 'HTMLPictureElement' in window;

延遲加載

<picture>

<source data-srcset="photo_w350.jpg 1x, photo_w640.jpg 2x">

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫為此值不會報錯，也對瀏覽器友好

</picture>

監(jiān)聽Scroll事件

showImage(leftSpace = 500){

var scrollTop = $window.scrollTop(), $containers = this.$imgContainers, scrollPosition = $window.scrollTop() + $window.height();

for(var i = 0; i < $containers.length; i++){

//如果快要滑到圖片的位置了

var $container = $containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

}

}

ensureImgSrc($container) {

var $source = $container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img = $container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("http://") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

}

init(){

//初始化

var leftSpace = 0;

this.showImage(leftSpace);

//滑動

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部顯示，off掉window.scroll

if(this.shownCount >= this.allCount){

$window.off("scroll", this.throttleShow);

}

}

指定圖片尺寸，避免 reflow

4. 壓縮與緩存

作用

第一個是把200變成304，避免資源重新傳輸，

第二個是讓瀏覽器直接從緩存取，連http請求都不用了，這樣對于第二次訪問頁面是極為有利的。

開啟壓縮 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

緩存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法會在返回的請求響應(yīng)頭中添加 Cache-Control: max-age=604800 ， 且 max-age 的優(yōu)先級會大于 last-modified

開啟 nginx last-modified 字段，在響應(yīng)頭中： last-modified 字段接收nginx的數(shù)據(jù)，在請求頭中： If-Modified-Since 字段返回給nginx

這個辦法得查手冊

使用etag，在響應(yīng)頭中是： Etag 字段 ，在請求頭中會記錄在 If-None-Match 字段

server {

etag on;

}

5. 其它優(yōu)化

DNS預(yù)讀取

<link rel="dns-prefection" > # 在Head標(biāo)簽中添加相應(yīng)的域名，由于它是并行的，不會堵塞頁面渲染

HTML優(yōu)化

刪除注釋、縮進，除了 pre 或 code 這樣的標(biāo)簽不能刪除，其它的都可以

代碼優(yōu)化

例如說html別嵌套太多層，否則加重頁面layout的壓力

CSS的選擇器別寫太復(fù)雜，不然匹配的計算量會比較大

JS的濫用閉包，閉包會加深作用域鏈，加長變量查找的時間

6. 利用HTML5或CSS3

代替圖片 或 LocalStorage、 Offline Storage

天這篇是我們正式開篇的第一篇文章，我想和你聊聊 HTML。

我猜屏幕那一邊的你估計會說：“HTML 我很熟悉了，每天寫，這不是初級程序員才學(xué)的內(nèi)容

么，這我還能不會嗎？”

其實在我看來，HTML 并不簡單，它是典型的“入門容易，精通困難”的一部分知識。深刻理

解 HTML 是成為優(yōu)秀的前端工程師重要的一步。

我們在上一篇文章中講到了，HTML 的標(biāo)簽可以分為很多種，比如 head 里面的元信息類標(biāo)

簽，又比如 img、video、audio 之類的替換型媒體標(biāo)簽。我今天要講的標(biāo)簽是：語義類標(biāo)簽。

語義類標(biāo)簽是什么，使用它有什么好處？

語義類標(biāo)簽也是大家工作中經(jīng)常會用到的一類標(biāo)簽，它們的特點是視覺表現(xiàn)上互相都差不多，

主要的區(qū)別在于它們表示了不同的語義，比如大家會經(jīng)常見到的 section、nav、p，這些都是

語義類的標(biāo)簽。

語義是我們說話表達的意思，多數(shù)的語義實際上都是由文字來承載的。語義類標(biāo)簽則是純文字

的補充，比如標(biāo)題、自然段、章節(jié)、列表，這些內(nèi)容都是純文字無法表達的，我們需要依靠語

義標(biāo)簽代為表達。

在講語義之前，我們來說說為什么要用語義。

現(xiàn)在我們很多的前端工程師寫起代碼來，多數(shù)都不用復(fù)雜的語義標(biāo)簽， 只靠 div 和 span 就能

走天下了。

這樣做行不行呢？毫無疑問答案是行。那這樣做好不好呢？按照正確的套路，我應(yīng)該說不好，

但是在很多情況下，答案其實是好。

這是因為在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里，HTML 用于描述“軟件界面”多過于“富文本”，而軟件界面

里的東西，實際上幾乎是沒有語義的。比如說，我們做了一個購物車功能，我們一定要給每個

購物車里的商品套上 ul 嗎？比如說，加入購物車這個按鈕，我們一定要用 Button 嗎？

實際上我覺得沒必要，因為這個場景里面，跟文本中的列表，以及表單中的 Button，其實已

經(jīng)相差很遠了，所以，我支持在任何“軟件界面”的場景中，直接使用 div 和 span。

不過，在很多工作場景里，語義類標(biāo)簽也有它們自己無可替代的優(yōu)點。正確地使用語義標(biāo)簽可

以帶來很多好處。語義類標(biāo)簽對開發(fā)者更為友好，使用語義類標(biāo)簽增強了可讀性，即便是在沒

有 CSS 的時候，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)，也更為便于團隊的開發(fā)和維護。除了

對人類友好之外，語義類標(biāo)簽也十分適宜機器閱讀。它的文字表現(xiàn)力豐富，更適合搜索

引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網(wǎng)頁的搜

索量，并且語義類還可以支持讀屏軟件，根據(jù)文章可以自動生成目錄等等。不過，不恰當(dāng)?shù)厥?/p>

用語義標(biāo)簽，反而會造成負面作用。這里我們舉一個常見的誤區(qū)作為例子。我們都知道 ul 是

無序列表，ol 是有序列表，所以很多接觸過語義這個概念，半懂不懂的前端工程師，特別喜歡

給所有并列關(guān)系的元素都套上 ul。實際上， ul 是長成下面的這種樣子的 (以下來自 HTML 標(biāo)準)。

I have lived in the following countries:

• Switzerland
• Norway
• United Kingdom
• United States

ul 多數(shù)出現(xiàn)正在行文中間，它的上文多數(shù)在提示：要列舉某些項。但是，如果所有并列關(guān)系都

用 ul，會造成大量冗余標(biāo)簽。錯誤地使用語義標(biāo)簽，會給機器閱讀造成混淆、增加嵌套，給

CSS 編寫加重負擔(dān)。所以，對于語義標(biāo)簽，我的態(tài)度是：“用對”比“不用”好，“不

用”比“用錯”好。當(dāng)然了，我覺得有理想的前端工程師還是應(yīng)該去追求“用對”它們。

與 JavaScript 這樣嚴格的編程語言相比，HTML 中語義標(biāo)簽的使用更接近我們平常說話用的

自然語言。我們說話并沒有唯一的標(biāo)準措辭，語義標(biāo)簽的使用也是一樣。下面，我挑選了幾種

（我認為）比較重要的語義標(biāo)簽使用場景，來為你介紹一下。

作為自然語言延伸的語義類標(biāo)簽其實語義問題不僅僅屬于理科，它還是個文科問題。所以我們

這里講語義標(biāo)簽的使用的第一個場景，也是最自然的使用場景，就是：作為自然語言和

純文本的補充，用來表達一定的結(jié)構(gòu)或者消除歧義。

我們先來看看“表達一定的結(jié)構(gòu)”這個場景。在日語中，有一個語法現(xiàn)象叫做：ルビ，它的讀

音是 ruby（著名的 ruby 語言就是據(jù)此命名的），它中文的意思大約類似于注音或者意思的注

解，它的形式可以看下圖：圖中的例子選自動畫片《某科學(xué)的超電磁炮》第二季第一話。圖中

把 teleport 放在空間移動上方的用法，就是日文中 ruby 的用法。“空間移動”是動畫中白井

黑子的技能，這里動畫字幕上寫的是“空間移動”，動畫里的臺詞則用了英文發(fā)

音“Teleport”，這里就形成了一個使用

ruby 的場景。ruby 的這個形式，在中國的網(wǎng)友中間最近被玩出了新花樣，比如表情包。

有時候微信聊天，不能用 ruby 這樣的東西真的是好急啊，只好用括號代替，效果真是差了不

少。在 HTML5 中，就引入了這個表示 ruby 的標(biāo)簽，它由 ruby、rt、rp 三個標(biāo)簽來實現(xiàn)。

所以說，這些情況里存在的語義，其實原本就存在了，只是我們用純文字是沒法表達的，

HTML作為一種“超文本”語言，支持這些文字表達就是必要的了。還有一種情況是，HTML

的有些標(biāo)簽實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標(biāo)簽，文字會產(chǎn)生歧

義的程度。

這里我們可以介紹一下 em 標(biāo)簽。

我們看看這句話，

1. 今天我吃了一個蘋果.

再比如：

昨天我吃了一個香蕉。

今天我吃了一個蘋果。

看上去它很清楚，但是實際上，這句話放到不同上下文中，可能表達完全不

同的意思。

昨天我吃了兩個蘋果。

今天我吃了一個蘋果。

試著讀一讀，這兩段里面的“今天我吃了一個蘋果”，你是不是發(fā)現(xiàn)讀音不自覺地發(fā)生了變化？

實際上，不僅僅是讀音，這里的意思也發(fā)生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什么東西，后一段中，則表示我今天只吃了一個蘋果，沒有多吃。

當(dāng)沒有上下文時，如何消除歧義呢？這就要用到我們的 em 標(biāo)簽了。em 表示重音：

通過 em 標(biāo)簽，我們可以消除這樣的歧義。

一些文章常常會拿 em 和 strong 做對比，實際上，我們只要理解了 em 的真正意思，它和

strong 可謂天差地別，并沒有任何混淆的可能。

作為標(biāo)題摘要的語義類標(biāo)簽

介紹完自然語言的語義場景后，我想介紹的另一個語義重要使用場景，就是文章的結(jié)構(gòu)。中國古

代小說就形成了“章 - 回”的概念，西方的戲劇也有幕的區(qū)分，所以人類的自然語言作品也是如出一轍。

HTML 也應(yīng)該支持這樣的需求。HTML 語義標(biāo)簽中，有不少是用于支持這樣的結(jié)構(gòu)的標(biāo)簽。

語義化的 HTML 能夠支持自動生成目錄結(jié)構(gòu)，HTML 標(biāo)準中還專門規(guī)定了生成目錄結(jié)構(gòu)的算

法，即使我們并不打算深入實踐語義，也應(yīng)該盡量在大的層面上保證這些元素的語義化使用。

首先我們需要形成一個概念，一篇文檔會有一個樹形的目錄結(jié)構(gòu)，它由各個級別的標(biāo)題組成。這

個樹形結(jié)構(gòu)可能不會跟 HTML 元素的嵌套關(guān)系一致。

這段 HTML 幾乎是平鋪的元素，但是它的標(biāo)題結(jié)構(gòu)是：

HTML 語義

弱語義

今天我吃了一個 <em> 蘋果 </em>。

今天我吃了 <em> 一個 </em> 蘋果。

例如：

TML 文本格式化

加粗文本

斜體文本

電腦自動輸出

這是 下標(biāo) 和 上標(biāo)

HTML 格式化標(biāo)簽

HTML 使用標(biāo)簽<b> 與<i> 對輸出的文本進行格式, 如：粗體 or 斜體

這些HTML標(biāo)簽被稱為格式化標(biāo)簽（請查看底部完整標(biāo)簽參考手冊）。

在線實例

文本格式化

此例演示如何在一個 HTML 文件中對文本進行格式化

預(yù)格式文本

此例演示如何使用 pre 標(biāo)簽對空行和空格進行控制。

"計算機輸出"標(biāo)簽

此例演示不同的"計算機輸出"標(biāo)簽的顯示效果。

地址

此例演示如何在 HTML 文件中寫地址。

縮寫和首字母縮寫

此例演示如何實現(xiàn)縮寫或首字母縮寫。

文字方向

此例演示如何改變文字的方向。

塊引用

此例演示如何實現(xiàn)長短不一的引用語。

刪除字效果和插入字效果

此例演示如何標(biāo)記刪除文本和插入文本。

HTML 文本格式化標(biāo)簽

HTML "計算機輸出" 標(biāo)簽

HTML 引文, 引用, 及標(biāo)簽定義

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！