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

資訊專欄INFORMATION COLUMN

前端優化

ad6623 / 3118人閱讀

摘要：如果在循環中需要訪問非本作用域下的變量時請在遍歷之前用局部變量緩存該變量，并在遍歷結束后再重復那個變量，這一點對全局變量尤其重要，因為全局變量處于作用域鏈的最頂端，訪問時的查找次數是最多的。

鏈接：前端優化
前端優化

瀏覽器發送HTTP請求，服務器收到請求全文后，返回HTTP響應，在瀏覽器接收之后結束這個過程。瀏覽器和服務器只有一次互動的機會，瀏覽器主動發起，而服務器被動地根據收到的請求內容返回結果。一個完整的請求都需要經過DNS尋址、與服務器建立連接、發送數據、等待服務器響應、接收數據的過程。

前端優化的途徑

頁面級別的優化，例如HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等；

代碼級別的優化，例如JavaScript中的DOM操作優化、CSS選擇符優化、圖片優化以及HTML結構優化等。

頁面級優化 1. 減少HTTP請求數 減少HTTP請求數的主要途徑

1、從設計實現層面簡化頁面

保持頁面簡潔、減少資源的使用是最直接的。能使用CSS替代效果就盡量少使用圖片。

2、合理設置HTTP緩存

恰當地緩存設置可以大大減少HTTP請求。被緩存資源的請求服務器是304響應，只有Header沒有body，沒有節省帶寬。對于多個頁面都可能使用到的代碼，盡量拆分到同一個文件中。如果是嵌入頁面換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。

3、資源合并和壓縮

如果可以，盡可能將外部的腳本、樣式進行合并，多個合為一個。另外，CSS、JavaScript、image都可以用相應的工具進行壓縮。

4、CSS Sprites

合并CSS圖片，減少請求數的有一個好辦法。

5、lazy load image

這個策略實際上并不一定能減少HTTP請求數，但是卻能在某些條件下或者頁面剛加載時減少HTTP請求數。對于圖片而言，在頁面剛加載時可以只加載第一屏，當用戶繼續往后滾屏時才加載后續的圖片。以前的做法是在加載時把第一屏之后的圖片地址緩存在textarea標簽中，待用戶往下滾屏時才惰性加載。百度圖片和花瓣網也是用這種流行的瀑布流加載圖片。

2. 將外部腳本置底

外鏈腳本在加載時會阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態，直到腳本加載完成后才會開始加載。如果把腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗。最簡單可依賴的方法是將腳本盡可能往后挪，減少對并發下載的影響。如果時效性允許的話，可以考慮在DOMLoaded事件觸發時加載，或者用setTimeout方式來靈活控制加載的時機。

3. 異步執行inline腳本

inline腳本對性能的影響比外部腳本大很多。首先，與外部腳本一樣，inline腳本在執行時也會阻塞并發請求，除此之外，由于瀏覽器在頁面處理方面時單線程的，當inline腳本在頁面渲染之前執行時，頁面的渲染工作則會被推遲。簡而言之，inline腳本在執行時頁面處于空白狀態。

鑒于以上兩點，建議將執行時間較長的inline腳本異步執行。異步執行的方式有很多種，例如使用script元素的defer屬性、使用setTimeout，此外，在HTML5中引入了web workers的機制，恰恰可以解決此類問題。

4. lazy load JavaScript

目前的做法大概有兩種，一種是為流量特別大的頁面專門定制一個專用的mini版框架，另一種則是lazy load，最初只加載核心模塊，其他模塊可以等到需要使用的時候才加載，類似于java的swing，引入需要的組件庫文件。

5. 將CSS放在head中 6. 減少不必要的HTTP跳轉

對于以目錄形式訪問的HTTP鏈接，很多人都會忽略鏈接最后是否帶/，假如服務器對此區別對待，那么其中很可能隱藏了301跳轉，增加了多余請求。

代碼級優化 1. JavaScript

1、DOM

DOM操作應該是腳本中最耗性能的一類操作，例如增、刪、查、改DOM元素或者對DOM集合進行操作。如果腳本中包含了大量的DOM操作則需要注意html collection。

在腳本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合，在平時使用的時候大多將它作為數組來使用，因為它有length屬性，也可以使用索引訪問每一個元素。不過在訪問性能上則比數組要差很多，原因這個集合并不是一個靜態的結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果。所謂的訪問集合包括讀取集合的length屬性、訪問集合中的元素。

因此，當你需要遍歷HTML collection時，盡量將它轉為數組后再訪問，以提高性能。即使不轉換為數組，也請盡可能少地訪問它，例如在遍歷的時候可以將length屬性、成員保存到局部變量后再使用局部變量。

2、慎用with

with(obj){p=1};代碼塊的行為實際上是修改了代碼塊中的執行環境，將obj放在了其作用于的最前端，在with代碼塊中訪問非局部變量都是先從obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用with相當于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的，過長的作用域鏈會導致查找性能下降。

因此，除非你能肯定在with代碼中只放obj中的屬性，否則慎用with，替代的可以使用局部變量緩存需要訪問的屬性。

3、避免使用eval和Function

每次eval或Function構造函數作用于字符串表示的源代碼時，腳本引擎都需要將源代碼轉換為可執行代碼。這是很消耗資源的操作——通常比簡單的函數調用慢100倍以上。

eval函數效率特別低，由于事先無法知曉傳給eval的字符串中的內容，eval在其上下文中解析要處理的代碼，也就是說編譯器無法優化上下文，因此只能有瀏覽器在運行時解析代碼，這對性能影響很大。

Function構造函數比eval略好，因為使用此代碼不會影響周圍代碼，但其速度仍很慢。

此外，使用eval和Function不利于JavaScript壓縮工具執行壓縮。

4、減少作用域鏈查找

作用域鏈查找問題，這一點在循環中尤其需要注意。如果在循環中需要訪問非本作用域下的變量時請在遍歷之前用局部變量緩存該變量，并在遍歷結束后再重復那個變量，這一點對全局變量尤其重要，因為全局變量處于作用域鏈的最頂端，訪問時的查找次數是最多的。

此外，要減少作用域鏈查找還應該減少閉包的使用。閉包的變量可能保存到內存中，內存消耗很大，解決方法是在退出函數前，將不使用的局部變量刪除。

5、數據訪問

JavaScript中的數據訪問包括直接量（字符串、正則表達式）、變量、對象屬性以及數組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數組的訪問需要更大的開銷。當出現以下情況時，建議將數據放入局部變量：

對任何對象屬性的訪問超過1次

對任何數組成員的訪問次數超過1次

另外，還應當盡可能的減少對對象以及數組深度查找。

6、字符串拼接

在JavaScript中使用+號來拼接字符串效率是比較低的，因為每次運行都會開辟新的內存并生成新的字符串變量，然后拼接結果賦值給新變量。之前使用jQuery+Ajax交互頁面，很多時候都是將后臺傳輸過來的數據和前端HTML結構拼接成字符串，然后呈現在頁面HTML容器里。

與之相比更為高效的做法是使用數組的join方法，即將需要拼接的字符串放在數組中最后調用其join方法得到結果。不過由于使用數組也有一定的開銷，因此當需要拼接的字符串較多時可以考慮使用此方法。

2. CSS選擇符

在大多數人的觀念中，都覺得瀏覽器對CSS選擇符的解析是從左往右進行的。

如果是從右往左解析則效率會很高，因為第一個ID選擇基本上就把查找的范圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。#tag A {color: "#ccc";}，瀏覽器必須遍歷查找每一個A標簽的祖先節點，效率并不像之前想象的那么高。根據瀏覽器的這一行為特點，在寫選擇符的時候需要注意很多事項。

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

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

相關文章

  • 前端性能優化

    摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。 優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

    Dean 評論0 收藏0

  • 前端優化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

    VincentFF 評論0 收藏0

  • 王下邀月熊_Chevalier的前端每周清單系列文章索引

    摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進行分類，具體內容看這里前端每周清單年度總結與盤點。 感謝 王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進行分類，具...

    2501207950 評論0 收藏0

  • 前端優化-Javascript篇(1.腳本放在底部)

    摘要：從本篇博客開始，我會跟大家分享下我關于前端優化方面的學習，由于時間原因每篇博客只能分享一小點內容，一點點深入前端優化的細節。在前端優化這個問題上，最被大家熟知的應該就是雅虎前端優化條軍規以及雅虎前端優化條規則。 　　從本篇博客開始，我會跟大家分享下我關于前端優化方面的學習，由于時間原因每篇博客只能分享一小點內容，一點點深入前端優化的細節。　　做過前端的人都知道，前端優化是一個永遠都不會...

    JerryC 評論0 收藏0

  • 前端每周清單年度總結與盤點

    摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點 在過去的八個月中，我幾乎只做了...

    jackwang 評論0 收藏0

發表評論

0條評論

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