国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

網(wǎng)站代碼優(yōu)化

Forest10 / 1627人閱讀

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

將面試整理的網(wǎng)站優(yōu)化資料記一記，針對移動端的代碼說的。

html

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

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

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

4: 對一些js的異步加載

css

1: 嵌套層級不要太深，一般三層最多了。這個主要還是看團(tuán)隊項目結(jié)構(gòu)，命名規(guī)范對這個有很大影響，互有取舍，是命名長一點不會有重復(fù)還是命名方便一點嵌套深一點

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

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

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

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

javascript

以一個for循環(huán)來構(gòu)建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這種語句記得將其存在變量里，每一句$()都是非常重的函數(shù)，能盡量少用就少用。

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

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

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

    05. 對于大型的for循環(huán)，可能導(dǎo)致執(zhí)行時頁面卡住，可以考慮使用數(shù)組分塊技術(shù)將循環(huán)分割成多個循環(huán)一部分一部分的執(zhí)行

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

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

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

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

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

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

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

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

    14. 善用事件委托：如果有許多類似的結(jié)構(gòu)要綁定事件，都利用事件冒泡的機(jī)制，在上層元素上綁定事件

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

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

    改成：

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

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

    17. 函數(shù)盡量簡單，少用閉包，嵌套的對象成員也會影響性能，總之結(jié)構(gòu)盡量簡單，能少一層就少一層

    18. 對于非常頻繁調(diào)用的函數(shù)，如scroll觸發(fā)的函數(shù)，可以考慮使用函數(shù)節(jié)流，debounce，throttle

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111250.html

    相關(guān)文章

    • 【譯】如何對網(wǎng)站進(jìn)行優(yōu)化提速？

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

      JessYanCoding 評論0 收藏0

    • 淺聊SEO

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

      yedf 評論0 收藏0

    • 提高網(wǎng)站加載速度的一些小技巧

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

      baukh789 評論0 收藏0

    • 前端開發(fā)中的SEO

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

      LeexMuller 評論0 收藏0

    • 網(wǎng)站優(yōu)化之301 轉(zhuǎn)向， Apache應(yīng)注意這幾點

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

      Tecode 評論0 收藏0

    • 我是如何優(yōu)化網(wǎng)站首頁性能的

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

      kun_jian 評論0 收藏0

    發(fā)表評論

    0條評論

    Forest10

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <