網站代碼優化

xcold 發布于2019-08-19 17:18 / 2566人閱讀

摘要：將面試整理的網站優化資料記一記，針對移動端的代碼說的。而第三種里面在移動端里使用號比數組快很多，在端得看瀏覽器，不同瀏覽器不同版本對這兩種方式的優化不同。盡量減少對的操作這個例子需要動態添加，動態刪除，每個標簽有事件。

將面試整理的網站優化資料記一記，針對移動端的代碼說的。

html

1: 標簽嵌套層級不要太深，標簽盡量簡潔化.如懶加載后將data屬性去除

2: DNS預先處理 dns-prefetch，如果一個頁面有多個不同地址的引用，則DNS預解析很有用。頁面預先處理link標簽的prefetch

3: 大量圖片的懶加載策略，以及一些元素利用ajax在onload后實行延遲加載

4: 對一些js的異步加載

css

1: 嵌套層級不要太深，一般三層最多了。這個主要還是看團隊項目結構，命名規范對這個有很大影響，互有取舍，是命名長一點不會有重復還是命名方便一點嵌套深一點

2: css解析從右向左，所以最右邊的應該是相對少一點的，比如.on.li_lick 就比.li_click.on要好（如果.on很多的話）

3: html用了base64的img的話，并不會緩存起來，可以將這個base64的圖片放在css文件里，css會緩存，圖片就緩存起來了

4: 盡量不用后代元素選擇器，最右邊的一層不要是標簽，尤其是像div這種非常常用的標簽

5: 多使用css的繼承，而不是每一次都書寫時都全部重寫一遍。寫多個css屬性時，能連在一起寫的就連在一起寫。如:background: #fff url() center center no-repeat

javascript

以一個for循環來構建DOM文檔舉例（使用jquery）

// var lis = document.getElementsByTagName("li")
var lis = [1, "2", "3", "4"];
var ulObj = $("ul");
var lisLength = lis.length;
var html = "";
for (var i = 0; i < lisLength; i++) {
    if (lis[i] === 1) {
        html += "" + lis[i] + "";
    } else {
        html += "" + lis[i] + "";
    }
}
ulObj.html(html);

01. 緩存變量。$("ul") 使用jquery這種語句記得將其存在變量里，每一句$()都是非常重的函數，能盡量少用就少用。

02. 使用諸如getElementsByTagName這類LIVE類型的collections時，更要注意對其length的緩存

03. var html = ""。賦值時，用字面量的方式

04. for 循環。實踐證明，遞減循環比遞增循環要快那么一點點。

05. 對于大型的for循環，可能導致執行時頁面卡住，可以考慮使用數組分塊技術將循環分割成多個循環一部分一部分的執行

06. for循環里的條件判斷lis.length一定要緩存在變量里，不然每一次都要去查詢一次長度。

07. 構建DOM結構。一般有三種方式：
①：使用節點關系createElement，appendChild這些去構建生成節點關系。
②：使用文檔片段documentFragment的方式。
③：直接用字符串拼接：這個又分為兩種，直接+號拼接和數組join拼接。第三種速度效率最高。而第三種里面在移動端里使用+號比數組快很多，在PC端得看瀏覽器，不同瀏覽器不同版本對這兩種方式的優化不同。

08. 插入到DOM文檔：使用innerHTML的方式比appendChild要效率高。綜上,移動端還是使用+號拼接字符串最后使用innerHTML的方式

09. 插入到DOM中時，一定要將插入結果放在變量里，在for循環結束后插入，千萬不能在for循環中執行插入操作，會造成大量的重繪重排。盡量減少對DOM的操作

10. 這個例子需要動態添加，動態刪除，每個li標簽有click事件。如果每次插入到DOM后給li添加click事件，那么刪除時就要清除注冊在li上的click事件。非常麻煩。所以采用事件委托的機制，將事件綁定在ul上，通過target屬來判斷

11. 條件判斷： == 與 ===，==要進行類型轉換比較，多了一個步驟，效率低

12. 使用直接函數，而不是與之等同的函數，比如$.ajax(),其他$.get()等最終都是調用$.ajax()，多余的步驟多余的調用必然導致效率相對低

13. 選擇器：使用原生的選擇器一定是最快的getElementById(),getElementsByTagName()這些，因為是用編譯語言寫好的方法。所以jquery里$("li")標簽選取器的效率是很高的，所以$("li .my_li")這樣寫比$(".my_li")效率要高

14. 善用事件委托：如果有許多類似的結構要綁定事件，都利用事件冒泡的機制，在上層元素上綁定事件

15. 將一些多條件判斷賦值語句用數組來做，比如：

   switch(a) {
    case 0:
        result = "一";
        break;
    case 1:
        result = "二";
        break;
    }

改成：

var arr = ["零", "一"];
result = arr[a]

16. 對于有復雜動畫的模塊，盡量用定位使其脫離文檔流。利用css3實現的動畫，調用一下translate3d(0， 0， 0)或其他的的3d變換，就會調起硬件加速，這個頁面其他動畫就都會有硬件加速的效果了。要考慮低端機型的話慎用

17. 函數盡量簡單，少用閉包，嵌套的對象成員也會影響性能，總之結構盡量簡單，能少一層就少一層

18. 對于非常頻繁調用的函數，如scroll觸發的函數，可以考慮使用函數節流，debounce，throttle

云服務器 GPU云服務器優化網站代碼網站優化代碼網站代碼優化怎么優化網站代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78391.html

【譯】如何對網站進行優化提速？

摘要：對于網站，建議使用插件來自動優化網站的圖片。避免重定向重定向是對網站訪問者的一種極大的刺激。另一種選擇是將這些代碼內嵌到網站上，同時需要確保的優化。那么，又該如何減少請求請見以下步驟減少網站上的對象數量。快速的頁面加載對提升搜索引擎排名、網站轉化率和整體的用戶體驗是非常重要的。網站頁面的加載速度也是衡量網站性能的一個重要因素。如果網站不是以最好的性能在運行，遲緩的加載會讓你在...

JessYanCoding 2019-05-29 18:00 評論0 收藏0
淺聊SEO

摘要：白帽是搜索引擎提倡的，也是一種良性競爭。這當然不被搜索引擎提倡，甚至于說是頭疼的，還需要想辦法如何在搜索結果內剔除掉那些頁面。影響搜索引擎對網站排名的合理和公正性。扁平化目錄層次網站層次既然要清晰，目錄最好不要超過三次分級。 SEO【search engine optimization】即搜索引擎優化。搜索引擎對用戶來說，就是搜東西，那他是怎樣展示關鍵詞的相關東西呢？這就需要有人每天...

yedf 2019-08-02 16:14 評論0 收藏0
提高網站加載速度的一些小技巧

摘要：各種各樣的編碼錯誤可能會導致網站加載速度非常慢，從而用戶離開的網站。同時提高網站加載速度也是提高網站排名的必要步驟之一。翻譯：瘋狂的技術宅原文：https://likegeeks.com/improve... 為你網站的用戶留下良好的第一印象是非常必要的。隨著商業領域的競爭，擁有一個吸引人的網站可以幫助你脫穎而出。研究表明，如果加載時間超過3秒，會有 40％的用戶放棄訪問你的網站...

baukh789 2019-08-23 16:12 評論0 收藏0
前端開發中的SEO

摘要：它能夠讓用戶了解到當前的位置，了解網站內容的組織方式。標記應該放在文本中間，即使用替代突兀的標記。表格標題季度銷售額強調網頁中的重要內容應該使用標記，避免使用標記對搜索引擎不友好。什么是SEO SEO由英文Search Engine Optimization縮寫而來，中文意譯為搜索引擎優化。SEO是指從自然搜索結果獲得網站流量的技術和過程，是在了解搜索引擎自然排名機制的...

LeexMuller 2019-08-01 14:48 評論0 收藏0
網站優化之301 轉向， Apache應注意這幾點

摘要：網站優化之轉向中應該怎么設置轉向呢今天冬鏡就為大家一一講解轉向中會遇到的情況，并給予相對應的解決方案，主要以來演示。網站優化之轉向，應注意這幾點其中表示開始，或者說從根目錄，也代表當前的域名的意思，反正你理解是那一回事就行。今天一位站長朋友咨詢301問題，本來以為很簡單的，沒注意到其中的細節，從而導致冬鏡花費了一點時間才解決了?，F在給大家分享出來，希望以后的站長朋友再遇到此類問題，就可以避免...

Tecode 2022-06-28 19:00 評論0 收藏0
我是如何優化網站首頁性能的

摘要：分位值解釋分位值目前是我們看性能指標的一個重要參考點。為什么是，因為跟進高的優化經驗，分位值的數據取點最能放大問題。分位值下，一個散文件可能就是的影響。最近接到一個任務，首頁性能優化。目標：95分位值下看到頁面框架主體內容6s（優化前10s左右），優化提升40% 看到操作詳細內容9s（優化前12s左右），優化提升25%。側面看出我們系統的龐大程度吧，這個不值得驕傲，項目...

kun_jian 2019-08-19 17:43 評論0 收藏0