IT工程師數位筆記本

1月15日到1月17日，3天時間閱讀完畢，對性能優化有了一定的了解。將從瀏覽器及代碼配合的角度，從宏觀到微觀總結。

一、web高性能指標是什么？

網頁是一種發布信息的工具，在此過程中，用戶與網頁參與互動，比如提交表單、點擊產生特效、用戶發布評論等。首先是讓用戶看見初始內容，再者就是流暢快速交互。所以，指標主要有：
1、加載時間。
（1）網頁原文件都部署于服務器端，從地理位置來看，服務器可放置于全球任何地方。客戶端與服務器地理位置越近，個別文件加載時間越短。
（2）實現相同功能的前提下，文件大小越小，個別文件加載時間越短。
（3）每分別加載一個資源，包括js文件、css文件、圖片等，都會有一次http請求。請求數越少，總加載時間越短。
瀏覽器采用單一線程來處理用戶界面（UI）刷新 和 js腳本執行。
2、js運行時間。
3、UI渲染時間。
4、線程中任務執行流程調配。

二、瀏覽器與js代碼的關系？

瀏覽器本身含有原生代碼，是由低級語言比如C++編寫的，執行速度更快。HTML是標記語言，用于內容及其結構的呈現；CSS是對內容樣式的渲染；JS是腳本語言，用于行為產生與用戶交互。瀏覽器內置

，把js代碼轉化為機器碼來執行。引擎優化，屬于編譯器層面的優化。 渲染引擎，關于css，用于UI渲染。 DOM引擎，DOM（文檔對象模型）是一個獨立于語言的，用于操作XML和HTML程序接口，其在瀏覽器中的接口用js實現。dom和js為兩個相互獨立的功能，所以用js操作dom特別耗時。三、如何提升性能？

文件加載與執行
js阻塞解決：（1）并發下載（2）將UI初始化渲染完畢后，再加載js，將外部鏈接js代碼放在html底部。

DOM操作。
盡量減少訪問DOM的次數，把運算盡量留在js一端。 使用innerHTML。
訪問和修改DOM。當涉及到網頁頁面樣式變化是，會導致重繪和重排，比如頁面上方彈出新的提示框導致頁面所有文本下移，則頁面重新繪制且dom結構重排。
事件委托。利用冒泡原理，將多個事件監聽由其共同父元素代理，減少事件代理程序的多次綁定
元素脫離文檔流。絕對定位->修改元素，只產生部分重繪->恢復定位，發生一次重排重繪。

代碼語法
數據存取。存儲格式有變量、數組、對象。
處于作用域的不同位置，訪問速度不同。
訪問對象屬性層次越深，訪問速度越慢。
對象的原型鏈。對象通過內部屬性 proto 綁定到它的原型。
所以把經常訪問的對象成員、數組元素、跨域變量保存在局部變量中改善js性能。
循環語句。
使用倒序循環。使對數組長度只一次屬性查找。減少控制條件比較。
循環體執行代碼優化。
條件語句。
依據判斷條件類型選擇 if switch。
減少判斷次數。將概率大的條件寫在前面。

快速響應用戶界面。
讓出UI渲染空余時間。使每一次js代碼任務執行時間少于100ms。使用定時器分割任務。由于定時器指從調用此代碼開始延遲一定時間后將預處理js任務放入執行隊列，由于瀏覽器識別精度問題，延時時間一般大于25ms。
使用worker運行環境，開啟其他線程，并行處理。新版瀏覽器支持，Safari 4 和Chrome 3只允許在頁面和worker之間傳遞字符串。

看文倉www.kanwencang.com網友整理上傳,為您提供最全的知識大全,期待您的分享，轉載請注明出處。
歡迎轉載：http://www.kanwencang.com/bangong/20170120/92440.html

文章列表

不含病毒。www.avast.com