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

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

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

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

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

不同于引入腳本，腳本標(biāo)簽需要瀏覽器停止渲染（處理腳本），阻礙后續(xù)資源文件的分析和下載。這導(dǎo)致頁(yè)面初始加載減慢，甚至留下可怕的“空白頁(yè)”體驗(yàn)。而且腳本分散在內(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)擊了頁(yè)面觸發(fā)事件從而嘗試調(diào)用腳本程序，但是其實(shí)腳本還沒加載——引發(fā)錯(cuò)誤!

三.CSS

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

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

15.面向未來(lái)的使用前綴特定屬性

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

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

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

四.JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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