整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
寫過前端Javascript代碼的同學(xué)肯定不會(huì)對(duì)console對(duì)象感到陌生，在調(diào)試的過程中我們經(jīng)常會(huì)用console對(duì)象在控制臺(tái)輸出一些常量或者變量。
但是相信很多人也就只用過console.log()這一個(gè)方法，今天我們就一起來(lái)看看console對(duì)象還有哪些比較有用的方法。由于本篇文章是跟控制臺(tái)有關(guān)，代碼就直接在控制臺(tái)展現(xiàn)而沒有另外用新文件展示。
Javascript
通過console對(duì)象的不同方法，可以在控制臺(tái)上輸出不同級(jí)別的日志信息，它們會(huì)采用不同的標(biāo)志來(lái)展示，如下圖所示。
不同級(jí)別的日志
在輸出信息時(shí)可以通過%占位符來(lái)指定對(duì)應(yīng)的值，而不用總是采用拼接字符串的方法。支持的占位符包括以下幾種。
%s - 字符
%d - 整數(shù)
%f - 浮點(diǎn)數(shù)
%o - 對(duì)象
通過以下一個(gè)簡(jiǎn)單的例子可以看出其用法。
包含占位符
通過group()方法可以以分組的形式展示出信息，類似于列表結(jié)構(gòu)。
打印分組信息
在一些測(cè)試框架中，經(jīng)常會(huì)用assert斷言來(lái)判斷一個(gè)表達(dá)式的值是否為真。同樣在console對(duì)象中也有assert方法，在斷言為真時(shí)并不會(huì)輸出任何信息，而在斷言為false時(shí)，直接拋出異常。
表達(dá)式判斷
上述代碼中前兩條語(yǔ)句判斷結(jié)果都為true，所以沒有輸出任何信息，第三條語(yǔ)句判斷結(jié)果為false，所以會(huì)直接拋出異常。
console對(duì)象有個(gè)table方法，可以直接將對(duì)象類型的數(shù)據(jù)以表格展示。
表格打印
通過console.trace()方法可以展示出函數(shù)調(diào)用棧的信息，來(lái)查看函數(shù)調(diào)用過程，一般會(huì)選擇將這個(gè)方法放在最后執(zhí)行的函數(shù)的方法體中。
函數(shù)調(diào)用棧信息
由于棧是先進(jìn)后出機(jī)制，所以先執(zhí)行的方法會(huì)在后面輸出，因此上述代碼結(jié)果會(huì)按照sum, f2, f1的順序輸出。
一般統(tǒng)計(jì)一段代碼執(zhí)行耗時(shí)，方法會(huì)是通過Date對(duì)象獲取毫秒數(shù)，然后將兩個(gè)毫秒數(shù)進(jìn)行相減。
一般計(jì)時(shí)方法
在上述代碼中通過endTime和startTime兩個(gè)變量的差值來(lái)計(jì)算出中間執(zhí)行代碼的耗時(shí)，我們可以看出往一個(gè)數(shù)組中添加100000個(gè)字符串耗時(shí)為15毫秒。
同樣可以通過console對(duì)象的time()和timeEnd()方法來(lái)統(tǒng)計(jì)代碼段的執(zhí)行耗時(shí)。time()和timeEnd()可以接收一個(gè)字符串作為標(biāo)識(shí)，而且兩個(gè)方法接收的字符串必須一樣，如果沒有傳入字符串則默認(rèn)為‘default’字符串。
console對(duì)象計(jì)時(shí)方法
上述代碼執(zhí)行結(jié)果為16毫秒，與之前那個(gè)方法產(chǎn)生的結(jié)果大致一樣。
通過console.profile()和console.profileEnd()方法，可以展示出代碼中各個(gè)函數(shù)執(zhí)行所消耗的時(shí)間，可以用來(lái)評(píng)估代碼性能。
我們使用以下測(cè)試代碼來(lái)進(jìn)行說(shuō)明。
打開chrome瀏覽器的控制臺(tái)會(huì)有一個(gè)Javascript Profile菜單欄，如果默認(rèn)情況下沒有的話，可以按照以下方法打開。
Javascript Profile
打開這個(gè)菜單選項(xiàng)后，我們可以看出每個(gè)方法執(zhí)行消耗的時(shí)間。
時(shí)間消耗
今天這篇文章主要總結(jié)了下console對(duì)象的一些有用的方法，大家都掌握了嗎？
情提示：文中涉及較多Gif演示動(dòng)畫，移動(dòng)端請(qǐng)盡量在Wifi環(huán)境中閱讀
前言：調(diào)試技巧，在任何一項(xiàng)技術(shù)研發(fā)中都可謂是必不可少的技能。掌握各種調(diào)試技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯(cuò)誤等等。而在互聯(lián)網(wǎng)前端開發(fā)越來(lái)越重要的今天，如何在前端開發(fā)中降低開發(fā)成本，提升工作效率，掌握前端開發(fā)調(diào)試技巧尤為重要。
本文將一一講解各種前端JS調(diào)試技巧，也許你已經(jīng)熟練掌握，那讓我們一起來(lái)溫習(xí)，也許有你沒見過的方法，不妨一起來(lái)學(xué)習(xí)，也許你尚不知如何調(diào)試，趕緊趁此機(jī)會(huì)填補(bǔ)空白。
1、骨灰級(jí)調(diào)試大師Alert
那還是互聯(lián)網(wǎng)剛剛起步的時(shí)代，網(wǎng)頁(yè)前端還主要以內(nèi)容展示為主，瀏覽器腳本還只能為頁(yè)面提供非常簡(jiǎn)單的輔助功能的時(shí)候。那個(gè)時(shí)候，網(wǎng)頁(yè)主要運(yùn)行在以IE6為主的瀏覽器中，JS的調(diào)試功能還非常弱，只能通過內(nèi)置于Window對(duì)象中的alert方法來(lái)調(diào)試，那時(shí)候看起來(lái)應(yīng)該是這個(gè)樣子：
需要說(shuō)明一點(diǎn)，這里看到的效果，并非當(dāng)年的IE瀏覽器中看到的效果，而是在高版本IE中的效果。此外，當(dāng)年貌似還沒有這么高級(jí)的控制臺(tái)，而alert的使用也是在真實(shí)的頁(yè)面JS代碼中。雖然，alert的調(diào)試方式很原始，但當(dāng)時(shí)確實(shí)有它不可磨滅的價(jià)值，甚至到今天，已然有其用武之地。
2、新一代調(diào)試王者Console
隨著JS在Web前端中能做的事情越來(lái)越多，責(zé)任越來(lái)越大，而地位也越來(lái)越重要。傳統(tǒng)的alert調(diào)試方式已經(jīng)漸漸不能滿足前端開發(fā)的種種場(chǎng)景。而且alert調(diào)試方式彈出的調(diào)試信息，那個(gè)窗口著實(shí)不太美觀，而且會(huì)遮擋部分頁(yè)面內(nèi)容，著實(shí)有些不太友好。
另一方面，alert的調(diào)試信息，必須在程序邏輯中添加類似”alert(xxxxx)”這樣的語(yǔ)句，才能正常工作，并且alert會(huì)阻礙頁(yè)面的繼續(xù)渲染。這就意味著開發(fā)人員調(diào)試完成后，必須手動(dòng)清除這些調(diào)試代碼，實(shí)在有些麻煩。
所以，新一代的瀏覽器Firefox、Chrome，包括IE，都相繼推出了JS調(diào)試控制臺(tái)，支持使用類似”console.log(xxxx)”的形式，在控制臺(tái)打印調(diào)試信息，而不直接影響頁(yè)面顯示。以IE為例，它看起來(lái)像這樣：
好吧，再見丑陋的alert彈出框。而以Chrome瀏覽器為首的后起之秀，為Console擴(kuò)展了更豐富的功能：
你以為這樣就滿足了？Chrome開發(fā)團(tuán)隊(duì)的想象力實(shí)在不得不讓人佩服：
好了，稍微多說(shuō)了一點(diǎn)點(diǎn)題外話。總之，控制臺(tái)以及瀏覽器內(nèi)置Console對(duì)象的出現(xiàn)，給前端開發(fā)調(diào)試帶來(lái)了極大的便利。
有人會(huì)問，這樣的調(diào)試代碼不一樣需要在調(diào)試完成后進(jìn)行清理嗎？
關(guān)于這個(gè)問題，如果在使用console對(duì)象之前先進(jìn)性存在性驗(yàn)證，其實(shí)不刪除也不會(huì)對(duì)業(yè)務(wù)邏輯造成破壞。當(dāng)然，為了代碼整潔，在調(diào)試完成后，還是應(yīng)盡可能刪除這些與業(yè)務(wù)邏輯無(wú)關(guān)的調(diào)試代碼。
3、JS斷點(diǎn)調(diào)試
斷點(diǎn)，調(diào)試器的功能之一，可以讓程序中斷在需要的地方，從而方便其分析。也可以在一次調(diào)試中設(shè)置斷點(diǎn)，下一次只需讓程序自動(dòng)運(yùn)行到設(shè)置斷點(diǎn)位置，便可在上次設(shè)置斷點(diǎn)的位置中斷下來(lái)，極大的方便了操作，同時(shí)節(jié)省了時(shí)間。——百度百科
JS斷點(diǎn)調(diào)試，即是在瀏覽器開發(fā)者工具中為JS代碼添加斷點(diǎn)，讓JS執(zhí)行到某一特定位置停住，方便開發(fā)者對(duì)該處代碼段的分析與邏輯處理。為了能夠觀察到斷點(diǎn)調(diào)試的效果，我們預(yù)先隨意準(zhǔn)備一段JS代碼：
代碼很簡(jiǎn)單，就是定義一個(gè)函數(shù)，傳入兩個(gè)數(shù)，分別加上一個(gè)亂七八糟的隨機(jī)整數(shù)后，再返回兩個(gè)數(shù)的總和。以Chrome開發(fā)者工具為例，我們來(lái)看一下JS斷點(diǎn)調(diào)試的基本方法。
3.1、Sources斷點(diǎn)
首先，測(cè)試代碼中我們通過上圖console的輸出結(jié)果可以看出代碼應(yīng)該是正常運(yùn)行了，但是為什么是應(yīng)該呢？因?yàn)楹瘮?shù)中加了一個(gè)隨機(jī)數(shù)，而最終結(jié)果是否真的是正確的呢？這是毫無(wú)意義的猜想，但是假設(shè)我現(xiàn)在就是要驗(yàn)證一下：函數(shù)傳入的兩個(gè)數(shù)、被加的隨機(jī)數(shù)，以及最終的總和。那么該怎么操作呢？
方法一，前面講過最普通的，無(wú)論使用alert還是console，我們可以這么來(lái)驗(yàn)證：
從上圖發(fā)現(xiàn)，我們?cè)诖a中新增了三行console代碼，用以打印我們關(guān)心的數(shù)據(jù)變量，而最終我們從控制臺(tái)（Console面板）中的輸出結(jié)果，可以很清楚的驗(yàn)證整個(gè)計(jì)算過程是否正常，進(jìn)而達(dá)到我們題設(shè)的驗(yàn)證要求。
方法二，方法一的驗(yàn)證過程存在很明顯的弊端就是，添加了很多冗余代碼，接下來(lái)我們看一下使用斷點(diǎn)進(jìn)行驗(yàn)證，是否更加方便，先看一個(gè)如何加斷點(diǎn)，以及斷點(diǎn)后是什么效果：
如圖，給一段代碼添加斷點(diǎn)的流程是“F12（Ctrl + Shift + I）打開開發(fā)工具”——“點(diǎn)擊Sources菜單”——“左側(cè)樹中找到相應(yīng)文件”——“點(diǎn)擊行號(hào)列”即完成在當(dāng)前行添加/刪除斷點(diǎn)操作。當(dāng)斷點(diǎn)添加完畢后，刷新頁(yè)面JS執(zhí)行到斷點(diǎn)位置停住，在Sources界面會(huì)看到當(dāng)前作用域中所有變量和值，只需對(duì)每個(gè)值進(jìn)行驗(yàn)證即可完成我們題設(shè)驗(yàn)證要求。
那問題來(lái)了，仔細(xì)的朋友會(huì)發(fā)現(xiàn)當(dāng)我的代碼執(zhí)行到斷點(diǎn)的時(shí)候，顯示的變量a和b的值是已經(jīng)進(jìn)行過加法運(yùn)算后的，我們看不到調(diào)用sum函數(shù)時(shí)初始傳入的10和20。那么該怎么辦呢？這就要回過頭來(lái)先學(xué)習(xí)一下斷點(diǎn)調(diào)試的一些基礎(chǔ)知識(shí)了。我們打開Sources面板后其實(shí)會(huì)在界面中看到如下內(nèi)容，我們跟著鼠標(biāo)軌跡逐一看看都是什么意思：
從左到右，各個(gè)圖標(biāo)表示的功能分別為：
到此，斷點(diǎn)調(diào)試的功能鍵介紹得差不多了，接下來(lái)我們就可以一行一行去看我們的程序代碼，查看每一行執(zhí)行完畢之后，我們各個(gè)變量的變化情況了，如下圖所示：
如上，我們可以看到a、b變量從最初值，到中間加上隨機(jī)值，再到最后計(jì)算總和并輸出最終結(jié)果的整個(gè)過程，完成題設(shè)驗(yàn)證要求不在話下。
其余幾個(gè)功能鍵，我們稍微改動(dòng)一下我們的測(cè)試代碼，用一張gif圖來(lái)演示他們的使用方法：
這里需要注意一點(diǎn)，直接在代碼區(qū)打印變量值的功能是在較新版本的Chrome瀏覽器中才新增的功能，如果你還在使用較老版本的Chrome瀏覽器，可能無(wú)法直接在斷點(diǎn)的情況下查看變量信息，此時(shí)你可以將鼠標(biāo)移動(dòng)到變量名上短暫停頓則會(huì)出現(xiàn)變量值。也可以用鼠標(biāo)選中變量名稱，然后右鍵“Add to watch”在Watch面板查看，此方法同樣適用于表達(dá)式。此外，你還可以在斷點(diǎn)情況下，切換到Console面板，直接在控制臺(tái)輸入變量名稱，回車查看變量信息。該部分比較簡(jiǎn)單，考慮篇幅問題，不在做圖演示。
3.2、Debugger斷點(diǎn)
所謂的Debugger斷點(diǎn)，其實(shí)是我自己給它命名的，專業(yè)術(shù)語(yǔ)我也不知道怎么說(shuō)。具體的說(shuō)就是通過在代碼中添加”debugger;”語(yǔ)句，當(dāng)代碼執(zhí)行到該語(yǔ)句的時(shí)候就會(huì)自動(dòng)斷點(diǎn)。接下去的操作就跟在Sources面板添加斷點(diǎn)調(diào)試幾乎一模一樣，唯一的區(qū)別在于調(diào)試完后需要?jiǎng)h除該語(yǔ)句。
既然除了設(shè)置斷點(diǎn)的方式不一樣，功能和Sources面板添加斷點(diǎn)效果一樣，那么為什么還會(huì)存在這種方式呢？我想原因應(yīng)該是這樣的：我們?cè)陂_發(fā)中偶爾會(huì)遇到異步加載html片段（包含內(nèi)嵌JS代碼）的情況，而這部分JS代碼在Sources樹種無(wú)法找到，因此無(wú)法直接在開發(fā)工具中直接添加斷點(diǎn)，那么如果想給異步加載的腳本添加斷點(diǎn)，此時(shí)”debugger;”就發(fā)揮作用了。我們直接通過gif圖看看他的效果：
4、DOM斷點(diǎn)調(diào)試
DOM斷點(diǎn)，顧名思義就是在DOM元素上添加斷點(diǎn)，進(jìn)而達(dá)到調(diào)試的目的。而在實(shí)際使用中斷點(diǎn)的效果最終還是落地到JS邏輯之內(nèi)。我們依次來(lái)看一下每一種DOM斷點(diǎn)的具體效果。
4.1、當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)（Break on subtree modifications）
在前端開發(fā)越來(lái)越復(fù)雜的今天，前端JS代碼越來(lái)越多，邏輯越來(lái)越復(fù)雜，一個(gè)看似簡(jiǎn)單的Web頁(yè)面，通常伴隨著大段大段的JS代碼，涉及諸多DOM節(jié)點(diǎn)增、刪、改的操作。難免遇到直接通過JS代碼很難定位代碼段的情況，而我們卻可以通過開發(fā)者工具的Elements面板，快速定位到相關(guān)DOM節(jié)點(diǎn)，這時(shí)候通過DOM斷點(diǎn)定位腳本就顯得尤其重要了。具體我們還是通過gif演示來(lái)看一下吧：
上圖演示了對(duì)ul子節(jié)點(diǎn)（li）的增加、刪除以及交換順序操作觸發(fā)斷點(diǎn)的效果。但需要注意的是，對(duì)子節(jié)點(diǎn)進(jìn)行屬性修改和內(nèi)容修改并不會(huì)觸發(fā)斷點(diǎn)。
4.2、當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)（Break on attributes modifications）
另一方面，由于前端處理的業(yè)務(wù)邏輯越來(lái)越復(fù)雜，對(duì)一些數(shù)據(jù)的存儲(chǔ)依賴越來(lái)越強(qiáng)烈，而將臨時(shí)數(shù)據(jù)存儲(chǔ)于DOM節(jié)點(diǎn)的（自定義）屬性中，是很多情況下開發(fā)者優(yōu)先選擇的方式。特別是在HTML5標(biāo)準(zhǔn)增強(qiáng)自定義屬性支持（例：dataset、data-*之類）之后，屬性設(shè)置應(yīng)用越來(lái)越多，因此Chrome開發(fā)者工具也提供了屬性變化斷點(diǎn)支持，其效果大致如下：
此方式同樣需要注意，對(duì)子節(jié)點(diǎn)的屬性進(jìn)行任何操作也不會(huì)觸發(fā)節(jié)點(diǎn)本身的斷點(diǎn)。
4.3、當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)（Break on node removal）
這個(gè)DOM斷點(diǎn)設(shè)置很簡(jiǎn)單，觸發(fā)方式很明確——當(dāng)節(jié)點(diǎn)被刪除時(shí)。所以通常情況應(yīng)該是在執(zhí)行”parentNode.removeChild(childNode)”語(yǔ)句的時(shí)候使用此方式。此方式使用不多。
前面介紹到的基本上是我們?cè)谌粘ｉ_發(fā)中經(jīng)常用到的調(diào)試手段，運(yùn)用得當(dāng)它們也幾乎能應(yīng)對(duì)我們?nèi)粘ｉ_發(fā)中的幾乎所有問題。但是，開發(fā)者工具還考慮到了更多的情況，提供更多的斷點(diǎn)方式，如圖：
5、XHR Breakpoints
這幾年前端開發(fā)發(fā)生了翻天覆地的變化，從當(dāng)初的名不見經(jīng)傳到如今的盛極一時(shí)，Ajax驅(qū)動(dòng)Web富應(yīng)用，移動(dòng)WebApp單頁(yè)應(yīng)用風(fēng)生水起。這一切都離不開XMLHttpRequest對(duì)象，而“XHR Breakpoints”正是專為異步而生的斷點(diǎn)調(diào)試功能。
我們可以通過“XHR Breakpoints”右側(cè)的“+”號(hào)為異步斷點(diǎn)添加斷點(diǎn)條件，當(dāng)異步請(qǐng)求觸發(fā)時(shí)的URL滿足此條件，JS邏輯則會(huì)自動(dòng)產(chǎn)生斷點(diǎn)。演示動(dòng)畫中并沒有演示到斷點(diǎn)位置，這是因?yàn)椋菔臼褂玫氖莏Query封裝好的ajax方法，代碼已經(jīng)過壓縮，看不到什么效果，而事實(shí)上XHR斷點(diǎn)的產(chǎn)生位置是”xhr.send()”語(yǔ)句。
XHR斷點(diǎn)的強(qiáng)大之處是可以自定義斷點(diǎn)規(guī)則，這就意味著我們可以針對(duì)某一批、某一個(gè)，乃至所有異步請(qǐng)求進(jìn)行斷點(diǎn)設(shè)置，非常強(qiáng)大。但是，似乎這個(gè)功能在日常開發(fā)中用得并不多，至少我用得不多。想想原因大概有兩點(diǎn)：其一，這類型的斷點(diǎn)調(diào)試需求在日常業(yè)務(wù)中本身涉及不多；其二，現(xiàn)階段的前端開發(fā)大多基于JS框架進(jìn)行，最基本的jQuery也已經(jīng)對(duì)Ajax進(jìn)行了良好封裝，極少有人自己封裝Ajax方法，而項(xiàng)目為了減少代碼體積，通常選擇壓縮后的代碼庫(kù)，使得XHR斷點(diǎn)跟蹤相對(duì)不那么容易了。
6、Event Listener Breakpoints
事件監(jiān)聽器斷點(diǎn)，即根據(jù)事件名稱進(jìn)行斷點(diǎn)設(shè)置。當(dāng)事件被觸發(fā)時(shí)，斷點(diǎn)到事件綁定的位置。事件監(jiān)聽器斷點(diǎn)，列出了所有頁(yè)面及腳本事件，包括：鼠標(biāo)、鍵盤、動(dòng)畫、定時(shí)器、XHR等等。極大的降低了事件方面業(yè)務(wù)邏輯的調(diào)試難度。
演示實(shí)例演示了當(dāng)click事件被觸發(fā)時(shí)和當(dāng)setTimeout被設(shè)置時(shí)的斷點(diǎn)效果。實(shí)例顯示，當(dāng)選中click事件斷點(diǎn)之后，兩個(gè)按鈕的被點(diǎn)擊時(shí)都觸發(fā)了斷點(diǎn)，而當(dāng)setTimeout被設(shè)置時(shí)，“Set Timer”斷點(diǎn)被觸發(fā)。
調(diào)試，是在項(xiàng)目開發(fā)中非常重要的環(huán)節(jié)，不僅可以幫助我們快速定位問題，還能節(jié)省我們的開發(fā)時(shí)間。熟練掌握各種調(diào)試手段，定當(dāng)為你的職業(yè)發(fā)展帶來(lái)諸多利益，但是，在如此多的調(diào)試手段中，如何選擇一個(gè)適合自己當(dāng)前應(yīng)用場(chǎng)景的，這需要經(jīng)驗(yàn)，需要不斷嘗試積累。
何提升Web頁(yè)面的性能，很多開發(fā)人員從多個(gè)方面來(lái)下手如JavaScript、圖像優(yōu)化、服務(wù)器配置，文件壓縮或是調(diào)整CSS。
很顯然HTML 已經(jīng)達(dá)到了一個(gè)瓶頸，盡管它是開發(fā)Web 界面必備的核心語(yǔ)言。HTML頁(yè)面的負(fù)載也是越來(lái)越重。大多數(shù)頁(yè)面平均需要40K的空間,像一些大型網(wǎng)站會(huì)包含數(shù)以千計(jì)的HTML 元素，頁(yè)面Size會(huì)更大。
如何有效的降低HTML 代碼的復(fù)雜度和頁(yè)面元素的數(shù)量，本文主要解決了這個(gè)問題，從多個(gè)方面介紹了如何編寫簡(jiǎn)練，清晰的HTML 代碼，能夠使得頁(yè)面加載更為迅速，且能在多種設(shè)備中運(yùn)行良好。
在設(shè)計(jì)和開發(fā)過程中需要遵循以下原則：
HTML,CSS 和JavaScript三者的關(guān)系
HTML 是用于調(diào)整頁(yè)面結(jié)構(gòu)和內(nèi)容的標(biāo)記語(yǔ)言。HTML 不能用于修飾樣式內(nèi)容，也不能在頭標(biāo)簽中輸入文本內(nèi)容，使代碼變得冗長(zhǎng)和復(fù)雜，相反使用CSS 來(lái)修飾布局元素和外觀比較合適。HTML元素默認(rèn)的外觀是由瀏覽器默認(rèn)的樣式表定義的，如在Chrome中h1標(biāo)簽元素會(huì)渲染成32px的Times 粗體。
三條通用設(shè)計(jì)規(guī)則：
文檔結(jié)構(gòu)方面也可以做優(yōu)化，如下：
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>
使用這兩種方法，瀏覽器會(huì)在解析HTML代碼之前將CSS信息準(zhǔn)備好。因此有助于提升頁(yè)面加載性能。
在頁(yè)面底部body結(jié)束標(biāo)簽之前輸入JavaScript代碼，這樣有助于提升頁(yè)面加載的速度，因?yàn)闉g覽器在解析JavaScript代碼之前將頁(yè)面加載完成，使用JavaScript會(huì)對(duì)頁(yè)面元素產(chǎn)生積極的影響。
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
使用Defer和async屬性，腳本元素具有async 屬性無(wú)法保證會(huì)按順序執(zhí)行。
可在JavaScript代碼中添加Handlers。千萬(wàn)別加到HTML內(nèi)聯(lián)代碼中，比如下面的代碼則容易導(dǎo)致錯(cuò)誤且不易于維護(hù)：
index.html:
<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
下面的寫法比較好：
index.html:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
js/local.js:
init();
var fooButton=document.querySelector('#foo');
fooButton.onclick=handleFoo();
驗(yàn)證
優(yōu)化網(wǎng)頁(yè)的一種方法就是瀏覽器可處理非法的HTML 代碼。合法的HTML代碼很容易調(diào)試，且占內(nèi)存少，耗費(fèi)資源少，易于解析和渲染運(yùn)行起來(lái)更快。非法的HTML代碼讓實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)變得異常艱難。
當(dāng)使用模板時(shí)，合法的HTML代碼顯得異常重要，經(jīng)常會(huì)發(fā)生模板單獨(dú)運(yùn)行良好，當(dāng)與其他模塊集成時(shí)就報(bào)各種各樣的錯(cuò)誤，因此一定要保證HTML代碼的質(zhì)量，可采取以下措施：
代碼格式
格式一致性使得HTML代碼易于閱讀，理解，優(yōu)化，調(diào)試。
語(yǔ)義標(biāo)記
語(yǔ)義指意義相關(guān)的事物，HTML 可從頁(yè)面內(nèi)容中看出語(yǔ)義：元素和屬性的命名一定程度上表達(dá)了內(nèi)容的角色和功能。HTML5 引入了新的語(yǔ)義元素，如<header>，<footer>及<nav>。
選擇合適的元素來(lái)編寫代碼可保證代碼的易讀性：
例如：
<div>Name: <input type="text" id="name"></div>
換種寫法會(huì)更好：
1: <div> 2: <label for="name">Name:</label><input type="text" id="name"> 3: </div>
布局
要提高HTML代碼的性能，要遵循HTML 代碼以實(shí)現(xiàn)功能和為目標(biāo)，而不是樣式。
CSS
雖然本文講解的是如何優(yōu)化HTML，下面介紹了一些使用css的基本技能：
以上就是本文介紹的優(yōu)化HTML代碼的技巧，一個(gè)高質(zhì)量高性能的網(wǎng)站，往往取決于對(duì)細(xì)節(jié)的處理，因此我們?cè)谌粘ｉ_發(fā)中，能夠考慮到用戶體驗(yàn)，后期維護(hù)等方面，則會(huì)產(chǎn)生更高效的開發(fā)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
