經過QQ瀏覽器內核看browser性能優化

時間 2019-12-01

原文原文鏈接

內容來源：2017年6月24日，騰訊前端高級工程師凌實在「騰訊Web前端大會 TFC 2017 」進行《從瀏覽器內核看性能優化》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。
閱讀字數：2742 | 6分鐘閱讀

摘要

QQ瀏覽器內核架構組負責人，經過QQ瀏覽器X5內核在加載速度、流暢度方面所作的優化工做，帶你瞭解瀏覽器內核的工做原理、展現前端優化的指導性原則、以及更佳的優化方向。而且揭露一些影響瀏覽器性能但鮮爲人知的技術內幕，並對Mobile Web場景下瀏覽器內核後續的優化方向和新特性進行展望。html

嘉賓演講視頻地址：t.cn/Rp0Ca4K前端

PPT地址：android

背景

騰訊瀏覽服務（TBS）

騰訊瀏覽服務是將X5內核進行深刻整合，用一個應用或一個小的SDK就能夠將X5內核集成到APP中的能力。這對於X5內核在安全性、穩定性和HTML5能力加強方面有很強優點。web

目前咱們的X5內核已經在微信、QQ等公司內外超過1000個APP上被使用，內核覆蓋度超過97%。chrome

內核演進

X5內核最先是在QQ瀏覽器中集成和推出的。早在android2.二、2.3時代就推出了自有的內核。這個內核一方面主要是解決各類加載、渲染性能問題，另外一方面也是但願推進優化方面的一些體驗，以此不斷完善瀏覽體驗的過程。canvas

到了android4.2的時候，JB版本內核作了一個升級，支持了硬件加速，內核性能獲得了較大提高。這個內核仍是基於傳統的Webkit內核。小程序

在去年年初的時候，咱們將總體內核架構切換到了Blink內核上，後來還在不斷加快內核的迭代。目前你們在線上使用的是基於Blink m53的版本。咱們但願經過不斷的版本迭代和性能優化來推進業務的發展，減小用戶在業務上遇到的問題，同時應用到最新的內核能力。微信小程序

內核須要作哪些優化

對於一個頁面，咱們要從網絡上把頁面加載下來，對它進行解析排版，最後渲染。瀏覽器

咱們要求頁面加載速度要快，給用戶愉快的體驗，使用戶更好地去消費產品。緩存

頁面交互要流暢地完成，也是內核須要作的一個重點工做。

網頁加載優化

網頁加載特色

網頁加載一般爲突發的大小量文件下載。網頁的加載速度隨着帶寬的增長，在一開始時會有所提高；到後來不管帶寬提高到多少，加載速度都不會有明顯提高。

在加載一個文件或資源的時候，延遲和頁面加載速度是線性的關係。延遲越低，加載速度也會變得越低。

內核所要作的優化就是下降頁面在加載過程當中，每一個鏈接請求、每次內核工做的延遲。

頁面加載速度優化指標

頁面加載速度「快」實際上是用戶主觀體驗，通過一些摸索，咱們定義瞭如下指標：

一、首字——頁面最初有內容的時候。

二、首屏——頁面鋪滿全屏的狀態。

三、所有完成時間。

目前重點關注的是首屏鋪滿時間，首屏鋪滿時間越快，用戶體驗越好。

加載速度優化

儘快加載資源，減小內核、網絡加載資源延遲。

網絡層優化：

DNS緩存：DNS是一個比較耗費時間的階段，若是能把DNS緩存作得更好，就能大範圍減小鏈接的延遲。

資源Socket併發控制、預鏈接：經過Socket併發控制和預鏈接技術，一方面提高Socket重用率，另外一方面也是讓Socket鏈接保持活躍狀態。這樣就可讓頁面在加載過程當中保持高速狀態。

資源優先級：咱們但願在首屏內的資源能夠快速加載下來，首屏外的資源優先級能夠低一些，日後作一些延遲。

透明代理：透明代理主要是爲了解決在移動網絡下不一樣運營商環境以及CDN部署不合理出現的一些狀況，避免帶來很大的網絡延遲。經過後臺合理的透明代理，能夠解決這些不合理的應用狀況，優化總體延遲。在終端上咱們主要作的是在協議方面的協議優化。最先咱們用的是HTTP的透明代理，後來改用了SPDY，目前也在嘗試HTTP2，將來也可能去嘗試最新的QUIC。