構(gòu)建現(xiàn)代網(wǎng)站的20個技巧(二）
2021-10-16 分類： 網(wǎng)站建設(shè)
11.將JS在HTML文件底部引入
瀏覽器會先檢索、解析和執(zhí)行加載的腳本，然后渲染剩余的頁面內(nèi)容，以防腳本創(chuàng)建新元素。腳本在底部后，瀏覽器可以一直渲染頁面直到腳本加載完全，以便用戶盡快加載頁面顯示出來。
12.避免HTML中腳本標簽
不同于引入腳本，腳本標簽需要瀏覽器停止渲染（處理腳本），阻礙后續(xù)資源文件的分析和下載。這導致頁面初始加載減慢，甚至留下可怕的“空白頁”體驗。而且腳本分散在內(nèi)聯(lián)標簽里很難維護。
13.不要在HTML元素中使用內(nèi)聯(lián)腳本事件
例如<button onclick="validate()">Validate</button>。這種做法違反了標簽、表示和行為之間的清爽原則。而且，如果相關(guān)的腳本實在文檔底部加載，用戶可能先點擊了頁面觸發(fā)事件從而嘗試調(diào)用腳本程序，但是其實腳本還沒加載——引發(fā)錯誤!
三.CSS
14.熟悉和使用CSS級聯(lián)規(guī)則
簡單的id和class選擇器是好用的，但是這也意味著標簽混亂，到處是無法重用的的id和class。應該用標簽，子元素標簽，同列標簽和，小部分的id和class標簽組合，使css更簡單和通用。避免使用“!imporant”。
15.面向未來的使用前綴特定屬性
新草案制定時，一些瀏覽器廠商會通過添加前綴以實現(xiàn)可能支持的標準。為了確保CSS標簽以后可用，帶前綴的和標準的屬性名稱都用上最好。這篇文章還提供了一個JavaScript解決方法。
16.用優(yōu)雅的CSS處理兼容性，而不是hack
CSS hack隨著瀏覽器的更新，顯得不可靠。解決方法是為html或body標簽添加特定瀏覽器的class，并在css規(guī)則中使用。條件注釋也可以在特定瀏覽器版本時使用需要的CSS文件。
四.JavaScript
17.總是將功能探測優(yōu)先于瀏覽器(navigator.useragent)探測。
判斷是否存在一個特定功能（或錯誤）時，useragent字符串是一個糟糕的指標。更嚴重的是，解析useragent的代碼是錯誤的。例如，一個瀏覽器探測庫期待主版本號是一個一位數(shù)字，所以會把Firefox 15報告為Firefox 1，把IE 10報告為IE 1!更可靠的是直接探測功能或問題，并用它作為代碼分支決策的標準。我們推薦Modernizr，它是實現(xiàn)功能探測的最簡單方法。
18.盡可能在Ready后立刻執(zhí)行腳本
技術(shù)上如jQuery的$(document).ready()使腳本在HTML頁面加載完后立即執(zhí)行，也是腳本可以安全執(zhí)行的最早時刻。然而復雜的腳本會讓頁面顯得遲緩，并阻止用戶立刻操作頁面。所以，一些比如tooltip（提示框）,dialog（對話框）在需要顯示時初始化，不造成頁面卡頓。
19.如果ajax關(guān)系用戶交互，越早請求越好
ajax請求會花費很長時間，而且不需要等待HTML頁面渲染就可以發(fā)起請求。所以，把$(document).ready()放在ajax請求完成回調(diào)函數(shù)中更好。
20.延遲加載非必要的腳本（如Facebook Like，Google +1，Twitter）。
所有人都希望他們的網(wǎng)頁在社交網(wǎng)絡上流行，但是社交網(wǎng)絡的腳本往往很大，可能會引起用戶響應遲緩。在請求這些腳本前等待頁面加載完畢，可以使頁面響應更快。更妙的是，重新考慮這些按鈕是否有必要，以及它們是否改善了你的頁面整體體驗。
文章題目：構(gòu)建現(xiàn)代網(wǎng)站的20個技巧(二）
網(wǎng)頁URL：http://m.rwnh.cn/news35/131535.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、企業(yè)建站、網(wǎng)站設(shè)計公司、網(wǎng)站制作、面包屑導航、做網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)站易用性設(shè)計，如何打造高易用性設(shè)計網(wǎng)站 2021-10-16
- 企業(yè)建站與網(wǎng)站建設(shè)公司建站的區(qū)別在哪 2021-10-16
- 網(wǎng)站過期幾年了還能續(xù)費使用嗎 2021-10-16
- 遵循這三點要求，官網(wǎng)制作更出色 2021-10-16
- SEO網(wǎng)站優(yōu)化關(guān)鍵詞選擇技巧 2021-10-16
- 網(wǎng)站關(guān)鍵詞排名突然消失100名以外是什么原因 2021-10-16
- 為什么很多網(wǎng)頁打開速度慢呢 2021-10-16
- 企業(yè)網(wǎng)站文章優(yōu)化需要從哪三個方面入手？ 2021-10-16
- 醫(yī)療網(wǎng)站專題頁面該怎么能抓住用戶的心理 2021-10-16
- 網(wǎng)站結(jié)構(gòu)目錄對SEO有影響嗎 2021-10-16
- 怎樣做好網(wǎng)站SEO優(yōu)化 2021-10-16
- 解析網(wǎng)站優(yōu)化內(nèi)鏈的搭建方法有哪些？ 2021-10-16
- 網(wǎng)站推廣之如何做QQ空間、論壇推廣 2021-10-16
- 醫(yī)療行業(yè)的SEOER都注意啦 2021-10-16
- 百度收錄規(guī)則那些事 2021-10-16
- 構(gòu)建計算機網(wǎng)站安全智能系統(tǒng) 2021-10-16
- 網(wǎng)站標題怎么定位主題 2021-10-16
- 新技術(shù)時代下的網(wǎng)絡營銷 2021-10-16
- 如何建設(shè)制作體驗好受關(guān)注的的企業(yè)網(wǎng)站 2021-10-16