構建現代網站的20個技巧(二）

2021-10-16 分類：網站建設

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

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

12.避免HTML中腳本標簽

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

13.不要在HTML元素中使用內聯腳本事件

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

三.CSS

14.熟悉和使用CSS級聯規則

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

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

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

16.用優雅的CSS處理兼容性，而不是hack

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

四.JavaScript

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

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

18.盡可能在Ready后立刻執行腳本

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

19.如果ajax關系用戶交互，越早請求越好

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

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

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

文章題目：構建現代網站的20個技巧(二）
網頁URL：http://m.kartarina.com/news35/131535.html

成都網站建設公司_創新互聯，為您提供網站營銷、企業建站、網站設計公司、網站制作、面包屑導航、做網站

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

猜你還喜歡下面的內容