瀏覽器性能

Coly 發布于2019-08-23 12:21 / 513人閱讀

摘要：因為當文件放在頂部時，頁面會逐步呈現，有較好的用戶體驗，如果將文件放在底部，瀏覽器為了避免回流，會阻塞內容的呈現。瀏覽器可能需要在本地存儲各種各樣的數據，例如等。

瀏覽器是怎么渲染的？

DOM樹+CSS規則樹—>渲染樹—調用系統GUI的API來繪制頁面
1）瀏覽器下載html文件之后，會根據html文件構建DOM樹，其中css會構建css規則樹，js會修改dom樹和css規則樹；
2）通過計算css樣式，形成渲染樹，然后進行布局和繪制頁面；
3）CSS文件要放在頂部，JS文件要放在底部。因為當CSS文件放在頂部時，頁面會逐步呈現，有較好的用戶體驗，如果將CSS文件放在底部，瀏覽器為了避免回流，會阻塞內容的呈現。可能導致白屏和內容閃爍的情況。JS文件要放在底部是因為JS文件可能對DOM樹進行修改，所以瀏覽器在加載JS文件時是阻塞的。而其他文件都可以并行下載。JS文件如果放在頂部會阻塞內容的逐步呈現，并且阻塞后面組件的下載。
4）回流reflow和重繪repaint
由于html默認采用的是流式布局，所以當元素的幾何尺寸發生變化時，會產生回流。回流會從當前元素遞歸往下重新計算元素的位置。比如說對DOM進行增、刪、改、移動或者動畫、還有resize時都會觸發回流reflow。
而當元素幾何尺寸沒有發生變化，僅僅是顏色和背景色發生變化時，會產生重繪。
瀏覽器會對某些操作進行異步回流
避免回流：不要一條一條修改樣式，可以預先定義好class的css然后修改類名；對DOM進行離線修改；盡量修改層級較低的DOM；為動畫的組件采用非流式布局；不使用table布局；

瀏覽器的組件

用戶界面 用戶界面包含了地址欄，前進后退按鈕，書簽菜單等等，除了請求頁面之外所有你看到的內容都是用戶界面的一部分

瀏覽器引擎 瀏覽器引擎負責讓 UI 和渲染引擎協調工作

渲染引擎 渲染引擎負責展示請求內容。如果請求的內容是 HTML，渲染引擎會解析 HTML 和 CSS，然后將內容展示在屏幕上

網絡組件 網絡組件負責網絡調用，例如 HTTP 請求等，使用一個平臺無關接口，下層是針對不同平臺的具體實現

UI后端 UI 后端用于繪制基本 UI 組件，例如下拉列表框和窗口。UI 后端暴露一個統一的平臺無關的接口，下層使用操作系統的 UI 方法實現

Javascript 引擎 Javascript 引擎用于解析和執行 Javascript 代碼

數據存儲 數據存儲組件是一個持久層。瀏覽器可能需要在本地存儲各種各樣的數據，例如 Cookie 等。瀏覽器也需要支持諸如 localStorage，IndexedDB，WebSQL 和 FileSystem 之類的存儲機制

垃圾回收

原理：找出不再使用的變量，然后釋放其占用的內存（垃圾收集器周期性地執行）
垃圾回收

方法：
1) 標記清除：目前主流的垃圾收集算法，將當前不使用的值加上標記，然后進行內存回收。（通過變量在執行環境中的生存周期）
2) 引用計數：記錄所有值被引用的次數，當引用次數為0時，進行內存回收。存在的問題：循環引用會導致內存泄露。所以最好手動解除引用。

說明：
1) 在標記清除時，如何確定變量不再被使用？
JS中分為全局執行環境和函數的執行環境，代碼運行時，會先將全局執行環境壓入棧中，然后當執行流進入函數時，會創建函數的執行環境和相應的作用域鏈。
每個函數都有自己的執行環境，對應著相應的作用域鏈。對變量的查找和賦值都沿著自己的作用域鏈向上查找。
創建函數時，會創建一個預先包含全局變量對象的作用域鏈；當執行函數時，會創建本地活動對象（包括arguments和局部變量），并將其推入作用域鏈前端。當執行函數時，對變量的查找會沿著作用域鏈向上搜索，直到作用域鏈的最頂端—全局變量對象。當函數執行完畢后，本地活動對象會在內存中銷毀。而閉包中，當外層函數執行完畢后，外層函數的作用域鏈被銷毀，但被閉包函數引用的活動對象還存在內存中。
不確定：任何函數（包括閉包函數）在執行完畢后，只能銷毀本地活動對象，所以為了銷毀閉包引用的活動對象，需要銷毀閉包函數，即解除引用null。

2) 如何引用計數？
將引用類型值賦給已聲明的變量，引用計數加1，若該變量的值變為了其他，則引用計數值減1。當引用計數為0時，進行內存回收。

自我理解代碼執行過程：將全局執行環境推入執行棧中，將所有var 變量和函數聲明提升到其作用域的頂部，創建函數時，會創建一個預先包含全局變量對象的作用域鏈；然后從第一行代碼開始順序執行，所有函數都會當函數執行時，則將函數的執行環境推入棧中，并形成其作用域鏈，函數在聲明時會形成一個包含全局對象的作用域鏈，當函數執行時，會將當前活動對象加入到作用域鏈中，對變量的查找都是沿著作用鏈進行查找的。

性能問題：垃圾收集器的執行間隔：IE6根據內存分配量運行，當內存量大時，一般整個程序所需要的內存量就很大，這樣會造成垃圾收集器的頻繁執行。IE7重寫了之后采用的規則：觸發垃圾收集的臨界值動態變化。初始觸發垃圾收集的臨界值與IE6相同，若回收的內存分配量低于15%，則臨界值加倍；若回收的內存分配量大于85%，則臨界值保持不變。

google V8引擎

V8內存回收
V8優化技術及注意事項

瀏覽器內核有哪些

IE（Trident）；firefox（Gecko）；Safari和chrome（WebKit）；Opera（Presto）

gbk與utf-8

GBK、Unicode、ASCII碼都為字符集，UTF-8為編碼方式；
ASCII碼一共規定了128個字符的編碼；
GBK包含全部中文字符；2個字節表示中文；
unicode 中所有符號都全球唯一；
UTF-8作為Unicode的實現方式之一，包含全世界所有國家需要用到的字符。一個字節表示英文，3個字節表示中文。UTF8占用的數據庫比GBK大。

更多博客：https://github.com/Lmagic16/blog

GPU云服務器云服務器高性能服務器性能云主機標準性能和高效性能高性能服務器性能參數瀏覽器

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

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

前端性能優化

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

Dean 2019-08-21 18:19 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

philadelphia 2019-08-01 15:44 評論0 收藏0
《高性能JavaScript》讀書筆記

摘要：除此以外，讓元素脫離文檔流也是一個很好的方法。因為元素一旦脫離文檔流，它對其他元素的影響幾乎為零，性能的損耗就能夠有效局限于一個較小的范圍。講完重排與重繪，往元素上綁定事件也是引起性能問題的元兇。高性能這本書非常精致，內容也非常豐富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...

W_BinaryTree 2019-08-21 15:12 評論0 收藏0
使用性能API快速分析web前端性能

摘要：性能時間線以一個統一的接口獲取由和所收集的性能數據。瀏覽器支持下表列舉了當前主流瀏覽器對性能的支持，其中標注星號的內容并非來自于性能工作小組。頁面的性能問題一直是產品開發過程中的重要一環，很多公司也一直在使用各種方式監控產品的頁面性能。從控制臺工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange這種侵入式java...

mj 2019-08-21 10:48 評論0 收藏0
圖說 WebAssembly（五）：高性能原因

摘要：本文是圖說系列文章的第五篇。這樣的話，使用的開發者也不需要做任何適配，但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行，稱為垃圾回收。本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章，建議您從第一篇入手。在上一篇文章中，我們說到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 評論0 收藏0