经过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。

优化效果

如图是未经优化的网络和通过了优化的网络对比。能够看到未经优化的时候每一个链路请求都会比较长，用户的并发性并非很好，总体耗时长。

优化后每一个链路的链接时间或解析时间会减小，大部分时间都是下载资源的时间，链接请求都处于并发状态，这样是最有利于用网络进行加载的。

前端推荐工具

PageSpeedInsight和Webpage Test这两个工具能够帮助你们定位本身的站点在加载方面有哪些性能问题，甚至能为CDN不合理的方面提供一些建议。我建议你们能够利用这些工具去衡量本身页面的加载速度方面是否有更多的优化空间。

在内核的发展过程当中，根据咱们对行业的观察来看，目前在Hybrid APP发展较快的状况下，不少时候并不支持加载一个网页，而是把页面当成APP的表现形式去展现。

内核后续优化方向

在Hybrid APP阶段，对加载速度提出了更高的要求。

更加贴近Native APP的加载方式。

基于ServiceWorker的加载

容许APP提早将业务的资源放入到内核缓存，跳过shouldInterceptRequest，手机QQ上的个别业务上首屏性能有25%左右的提高。

首屏标签

在首屏位置插入首屏标签，内核解析到首屏标签当即停止解析并排版和上屏。

<html>
<meta name=”x5-pagetype” content=”optpage”>
<body>
…
<first-screen/>
…
</body>
</html>

关键子资源缓存

关键子资源是影响首屏性能的关键（阻塞）资源。

咱们但愿在事先就能知道页面有哪些关键的子资源是会阻塞它的加载进程。目前内核经过统计的方式去看用户经常使用的子资源有哪些，并将这些子资源加入预缓存名单。以后在Web的规范化方面也会作更多突破。

页面渲染优化

页面交互优化

页面交互的流畅涉及到页面的滚动、缩放，页面上动画的播放是否流畅，是否能快速响应交互。

如何作到流畅

在渲染过程当中，渲染速度受多种条件制约，渲染管线各阶段耦合紧密。

内核要想优化渲染的过程，要解耦渲染管线，让渲染管线之间没有太强的联系，避免重复绘制。

当前的渲染架构

内核会经过硬件加速和图层混合来减小渲染的节点或任务。图层混合就是把一些相关的元素放在同一层，非相关的元素放在另外的层去汇总。

优势

Layer的内容变化，只须要更新所属的GraphicsLayer的缓存便可。

CPU绘制内容，GPU混合GraphicsLayer。

分层依据：CSS Transform&Opacity、Fixed、Overflow-scroll、特殊元素（canvas、webgl）。

如何分层才是渲染最优？

分层的目的主要是减小重绘，当元素有位置变化时适合分层。

虽然分层可以减小浏览器的重绘，可是物极必反。分层太多会致使浏览器遍历和计算的耗时变长，分层面积过大会致使渲染所用内存增大。

可视区域内分层太多且须要绘制面积太大，渲染性能很是差，甚至达到没法正确显示的地步。

静止的元素周围的内容频繁变化的元素须要单独分层。

分层原则

分层原则是减小渲染重绘面积与减小分层个数和分层总面积。

元素只有相对位置变化的须要分层。

元素更新频繁须要分层。

较长较大的页面注意总的分层个数。

避免某一块区域分层过多，面积过大。

后续展望

Web发展趋势

HybridAPP和Web APP对于Web发出了新的挑战。如今的页面再也不是网页，而是变成一个真正由APP承载的界面。

前端有不少框架来优化性能。

在终端，最近比较火的是微信小程序架构，Google也在推广他们的Progressive Web APP架构，也是为了解决在新的挑战下Web所遇到的瓶颈。

内核会经过性能提高和更丰富的能力扩展来进行优化。

这是Google对于内核发展方向给出的简要示意图。

之后你们使用的不是单一的内核状态，而是把内核的加载、网络渲染甚至js引擎，均可以做为一个独立的service对Web提供服务的能力。经过解耦让Web获得更多能力的扩充。

WebAssembly

Chrome、Firefox、Safari、Edge共同推进定制的一套标准。2017年2月28日，一致宣布MVP版本完成，chrome M57和iOS 11支持。

执行效率方面更高效。执行效率约是JavaScript的2-3倍，Native的60%以上。

WebAssembly与JavaScript可互相调用，并支持C/C++编码。

WebAR

VR是一个新的领域，不管是资源仍是使用过程都存在一些问题，也期待你们一块儿尝试探讨，怎样推进VR的实际使用。

我今天的分享就到这里，感谢聆听！

推荐文章

B站高性能微服务架构

移动端SDK优化的特色与经验分享