構(gòu)建現(xiàn)代網(wǎng)站的20個技巧(二）

2021-10-16 分類：網(wǎng)站建設(shè)

11.將JS在HTML文件底部引入

瀏覽器會先檢索、解析和執(zhí)行加載的腳本，然后渲染剩余的頁面內(nèi)容，以防腳本創(chuàng)建新元素。腳本在底部后，瀏覽器可以一直渲染頁面直到腳本加載完全，以便用戶盡快加載頁面顯示出來。

12.避免HTML中腳本標(biāo)簽

不同于引入腳本，腳本標(biāo)簽需要瀏覽器停止渲染（處理腳本），阻礙后續(xù)資源文件的分析和下載。這導(dǎo)致頁面初始加載減慢，甚至留下可怕的“空白頁”體驗。而且腳本分散在內(nèi)聯(lián)標(biāo)簽里很難維護(hù)。

13.不要在HTML元素中使用內(nèi)聯(lián)腳本事件

例如<button onclick="validate()">Validate</button>。這種做法違反了標(biāo)簽、表示和行為之間的清爽原則。而且，如果相關(guān)的腳本實(shí)在文檔底部加載，用戶可能先點(diǎn)擊了頁面觸發(fā)事件從而嘗試調(diào)用腳本程序，但是其實(shí)腳本還沒加載——引發(fā)錯誤!

三.CSS

14.熟悉和使用CSS級聯(lián)規(guī)則

簡單的id和class選擇器是好用的，但是這也意味著標(biāo)簽混亂，到處是無法重用的的id和class。應(yīng)該用標(biāo)簽，子元素標(biāo)簽，同列標(biāo)簽和，小部分的id和class標(biāo)簽組合，使css更簡單和通用。避免使用“!imporant”。

15.面向未來的使用前綴特定屬性

新草案制定時，一些瀏覽器廠商會通過添加前綴以實(shí)現(xiàn)可能支持的標(biāo)準(zhǔn)。為了確保CSS標(biāo)簽以后可用，帶前綴的和標(biāo)準(zhǔn)的屬性名稱都用上最好。這篇文章還提供了一個JavaScript解決方法。

16.用優(yōu)雅的CSS處理兼容性，而不是hack

CSS hack隨著瀏覽器的更新，顯得不可靠。解決方法是為html或body標(biāo)簽添加特定瀏覽器的class，并在css規(guī)則中使用。條件注釋也可以在特定瀏覽器版本時使用需要的CSS文件。

四.JavaScript

17.總是將功能探測優(yōu)先于瀏覽器(navigator.useragent)探測。

判斷是否存在一個特定功能（或錯誤）時，useragent字符串是一個糟糕的指標(biāo)。更嚴(yán)重的是，解析useragent的代碼是錯誤的。例如，一個瀏覽器探測庫期待主版本號是一個一位數(shù)字，所以會把Firefox 15報告為Firefox 1，把IE 10報告為IE 1!更可靠的是直接探測功能或問題，并用它作為代碼分支決策的標(biāo)準(zhǔn)。我們推薦Modernizr，它是實(shí)現(xiàn)功能探測的最簡單方法。

18.盡可能在Ready后立刻執(zhí)行腳本

技術(shù)上如jQuery的$(document).ready()使腳本在HTML頁面加載完后立即執(zhí)行，也是腳本可以安全執(zhí)行的最早時刻。然而復(fù)雜的腳本會讓頁面顯得遲緩，并阻止用戶立刻操作頁面。所以，一些比如tooltip（提示框）,dialog（對話框）在需要顯示時初始化，不造成頁面卡頓。

19.如果ajax關(guān)系用戶交互，越早請求越好

ajax請求會花費(fèi)很長時間，而且不需要等待HTML頁面渲染就可以發(fā)起請求。所以，把$(document).ready()放在ajax請求完成回調(diào)函數(shù)中更好。

20.延遲加載非必要的腳本（如Facebook Like，Google +1，Twitter）。

所有人都希望他們的網(wǎng)頁在社交網(wǎng)絡(luò)上流行，但是社交網(wǎng)絡(luò)的腳本往往很大，可能會引起用戶響應(yīng)遲緩。在請求這些腳本前等待頁面加載完畢，可以使頁面響應(yīng)更快。更妙的是，重新考慮這些按鈕是否有必要，以及它們是否改善了你的頁面整體體驗。

文章題目：構(gòu)建現(xiàn)代網(wǎng)站的20個技巧(二）
網(wǎng)頁URL：http://www.muchs.cn/news35/131535.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、企業(yè)建站、網(wǎng)站設(shè)計公司、網(wǎng)站制作、面包屑導(dǎo)航、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容