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.newbst.com/news35/131535.html
成都網站建設公司_創新互聯,為您提供網站營銷、企業建站、網站設計公司、網站制作、面包屑導航、做網站
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯