黑马程序员技术交流社区

标题: 【上海校区】浏览器工作原理及web 性能优化 [打印本页]

---

作者: 不二晨    时间: 2018-8-20 09:32
标题: 【上海校区】浏览器工作原理及web 性能优化
浏览器工作原理一、浏览器简介

• 分类：现在主要有五大主流浏览器: Chrome, Internet Explorer, Firefox, Safari and Opera.移动端上是Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers,除了Opera，这些浏览器都是基于WebKit内核的（目前可能有变）。
• 功能 ：根据W3C制定的一系列规范，从服务端请求并渲染资源
• 普遍外观：地址栏，前进后退，书签，刷新及取消，主页
• 深层结构：下边主要介绍———渲染引擎及JS引擎
  
  • 用户界面（UI Interface） ：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
  • 浏览器引擎（Browser engine）： 在用户界面和呈现引擎之间传送指令。
  • 呈现引擎（Rendering engine）： 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
  • 网络（Networking） ： 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
  • 用户界面后端（UI backend）：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
  • JavaScript 解释器（JS Interpreter）：用于解析和执行 JavaScript 代码。
  • 数据存储（Datapersistence）：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
    

二、渲染引擎

• 分类：不同浏览器用不同渲染引擎。
  

Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.WebKit 是一个开源渲染引擎，起初作为Linux platform的引擎，后被 Apple应用于Mac. 详见 webkit.org.

• 加载：
  
  • 浏览器根据 DNS 服务器得到域名的 IP 地址
  • 向这个 IP 的机器发送 HTTP 请求
  • 服务器收到、处理并返回 HTTP 请求
  • 浏览器得到返回内容
    

客户端：如在浏览器输入https://www.baidu.com/，经过 DNS 解析，查到baidu.com对应的 IP（不同时间、地点对应的 IP 可能会不同），浏览器向该 IP 发送 HTTP 请求。
服务端：服务器接收到 HTTP 请求，经计算，返回 HTTP 请求，内容如下：

水平有限，在此就不深入介绍了，如感兴趣可参考百度大神nwind的博客：从输入 URL 到页面加载完成的过程中都发生了什么事情？

• 渲染：
  

浏览器对请求的呈现。默认渲染引擎可以呈现html，xml及图片。（通过插件）也可以呈现其它数据，比如pdf等。 目前只考虑html和css方面。

渲染主流程：

Figure : Rendering engine basic flow

Figure : WebKit main flow

content tree:在此，渲染引擎解析html文档并将元素转换成DOM节点。

render tree:在此，渲染引擎解析style（外部css文件或内联style）并转换。

这是一个渐进式过程. 为保证好的UED,渲染引擎尽早展现内容. 在开始构建并展现render树之前，它不会等所有html被解析。部分内容被解析并呈现，同时进程继续解析网络中不断请求到的其余内容。
具体渲染过程

• 根据 HTML 结构生成 DOM 树
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染
  

浏览器拿到了 server 端返回的 HTML 内容后，开始解析并渲染。最初拿到的内容就是一堆字符串，必须先结构化成计算机擅长处理的基本数据结构--- DOM 树 (最基本的数据结构之一)。
解析过程中，如果遇到<link href="...">和<script src="...">这种外链加载 CSS 和 JS 的标签，浏览器会异步下载，下载过程和上文中下载 HTML 的流程一样。只不过，这里下载下来的字符串是 CSS 或者 JS 格式的。

• 浏览器的容错机制
  

您在浏览 HTML 网页时从来不会看到“语法无效”的错误。这是因为浏览器会纠正任何无效内容，然后继续工作。

1. 明显不能在某些外部标签中添加的元素。在此情况下，我们应该关闭所有标签，直到出现禁止添加的元素，然后再加入该元素。2. 我们不能直接添加的元素。这很可能是网页作者忘记添加了其中的一些标签（或者其中的标签是可选的）。这些标签可能包括：HTML HEAD BODY TBODY TR TD LI（还有遗漏的吗？）。3. 向 inline 元素内添加 block 元素。关闭所有 inline 元素，直到出现下一个较高级的 block 元素。4. 如果这样仍然无效，可关闭所有元素，直到可以添加元素为止，或者忽略该标记。复制代码CSS 解析

和 HTML 不同，CSS 是上下文无关的语法，可以使用简介中描述的各种解析器进行解析。事实上，CSS 规范定义了 CSS 的词法和语法。

• WebKit CSS 解析器WebKit 使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。正如我们之前在解析器简介中所说，Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。这两种解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。
  

图：解析 CSS处理脚本和样式表的顺序

• 脚本:遇到 <script>文档的解析将停止，直到脚本执行完毕。如果脚本是外部的，那么解析过程会停止，直到从网络同步抓取资源完成后再继续。HTML5 增加了一个选项----“defer”，这样不会停止文档解析，而是等到解析结束才执行.
  
• 预解析WebKit 和 Firefox 都进行了这项优化。**在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。**通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改 DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。
  
• 样式表:理论上来说，应用样式表不会更改 DOM 树，因此似乎没有必要等待样式表并停止文档解析
  
• render树构建:在 DOM 树构建的同时，浏览器还会构建：render树---按照正确的顺序绘制内容。
  
• render树和 DOM 树的关系:呈现器是和 DOM 元素相对应的，但并非一一对应。非可视化的 DOM 元素不会插入呈现树中，例如“head”元素。如果元素的 display 属性值为“none”，那么也不会显示在呈现树中（但是 visibility 属性值为“hidden”的元素仍会显示）。
  
  

Web 安全浏览器重新渲染（re-render）：重绘（repaint）与重排（reflow）

重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。"重绘"不一定需要"重排"，"重排"必然导致"重绘"。重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。

• 触发重新渲染的常见情况：
  
  • 修改DOM
  • 修改样式表
  • 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）
  • 访问元素属性：
    
    • offsetTop/offsetLeft/offsetWidth/offsetHeight
    • scrollTop/scrollLeft/scrollWidth/scrollHeight
    • clientTop/clientLeft/clientWidth/clientHeight
    • getComputedStyle()
      

• 提高性能的技巧：
  
  • css：
    
    • display（none->block）
    • position（absolute，fixed）
    • visibility（hidden）
      
  • js：
    
    • 使用优秀类库的Virtual DOM（React，Vue）
    • 注意作用域
      
      • 避免全局查找
      • 避免with
        
    • 选择正确的方法
      
      • 避免没必要的查找(性能部分的一部分是和解决问题的算法和方法相关的)
      • 优化循环
      • 展开循环
      • 避免双重解释
      • 其它
        
        • 原生方法较快：
        • switch语句较快
        • 位运算符较快
          
    • 最小化语句数
      
      • 多个变量声明
      • 插入迭代值
      • 使用数组和对象字面量
        
    • 优化DOM交互（如下）
      
  • BOM：
    
    • window.requestAnimationFrame
    • window.requestIdleCallback
      
  • DOM：
    
    • document.createDocumentFragment:最小化现场更新
    • innerHTML：要不使用标准DOM方法创建同样的DOM快得多（内部方法是编译好而非解释执行的）。
    • 事件代理：页面处理程序的数量和页面响应UED速度负相关。
    • 注意HTMLCollection：最小化对它们的访问，以下会返回HTMLCollection对象
      
      • getElementByTagName
      • childNodes
      • attributes
      • 特殊集合：document.forms,document.images etc.
        
    • cloneNode
    • 集中DOM的读写操作
    • 缓存样式数据
    • 
      

web性能优化（web performance）为什么要性能优化

• 留住用户（Performance is about retaining users）
• 提升转化率（Performance is about improving conversions）
  

转化率就是金钱- 关乎用户体验（Performance is about the user experience）- 以人为本（Performance is about people）如何去优化要发送什么（Mind what resources you send）

构建高性能应用程序的有效方法是审核发送给用户的资源。虽然Chrome开发人员工具中的网络面板可以很好地总结给定页面上使用的所有资源，但如果您到目前为止尚未考虑性能，那么知道从哪里开始可能会令人生畏。以下是一些建议：

• 如果您使用Bootstrap或Foundation来构建UI，请问自己是否有必要。这些抽象添加了浏览器必须下载，解析和应用于页面的大量CSS，所有这些都是在特定于站点的CSS进入图片之前。 Flexbox和Grid在使用相对较少的代码创建简单和复杂布局方面非常出色。由于CSS是一种render阻塞资源，因此CSS框架的开销可能会显着延迟渲染。您应该通过消除不必要的开销来寻求加速渲染，而非尽可能依赖于浏览器中的工具。
  
• JavaScript库很方便，但并不总是必要的。以jQuery为例：由于querySelector和querySelectorAll等方法，元素选择得到了极大的简化。使用addEventListener可以轻松进行事件绑定。classList，setAttribute和getAttribute提供了使用类和元素属性的简便方法。如果你必须使用类库，研究更精简的替代品。例如，Zepto是一个较小的jQuery替代品，Preact是React的一个小得多的替代品。
  
• 并非所有网站都需要是单页面应用程序（SPA），因为它们经常广泛使用JavaScript。 JavaScript是我们在字节的web字节上提供的最昂贵的资源，因为它不仅必须下载，还必须解析，编译和执行。例如，具有优化前端架构的新闻和博客站点可以像传统的多页体验一样表现良好。
  
  

如何发送（Mind how you send resources）当您知道需要为您的应用发送哪些资源以使其成为您想要的美观和功能时，请考虑下一步如何发送它们。与预见和预防一样，交付对于构建快速用户体验至关重要。

• 迁移到HTTP / 2。 HTTP / 2解决了HTTP / 1.1中固有的许多性能问题，例如并发请求限制和缺少头压缩。
• 使用资源提示加快资源交付。 rel = preload是一个这样的资源提示，它允许在浏览器发现它们之前提前获取关键资源。这可以对页面呈现产生明显的积极影响，并在明智地使用时降低交互时间。 rel = preconnect是另一个资源提示，可以掩盖为第三方域上托管的资源打开新连接的延迟。
• 现代网站平均提供大量JavaScript和CSS。在HTTP / 1环境中将样式和脚本捆绑到大型捆绑包中很常见。这样做是因为大量请求对性能有害。现在不再是HTTP / 2在场的情况，因为多个同时请求更便宜。考虑在webpack中使用代码拆分来限制下载的脚本数量，使其仅限于当前页面或视图所需的内容。将CSS分成较小的模板或特定于组件的文件，并仅包含可能使用它们的资源。
  

数据规模（Mind how much data you send）

通过一些关于哪些资源适合发送以及如何发送它们的想法，我们将介绍一些限制发送数据的建议：

• 配置服务器以压缩资源。压缩会大大减少您发送给用户的数据量，尤其是在涉及文本资产的情况下。 GZIP在这个领域是一种令人尊敬的格式，但Brotli压缩可以更进一步。但是，要理解压缩并不是性能问题的全部：一些隐式压缩的文件格式（例如，JPEG，PNG，GIF，WOFF等）不响应压缩，因为它们已经被压缩。
• 优化图片以确保您的网站尽可能少地发送图片数据。由于图片构成了网络上每页平均有效负载的很大一部分，因此图片优化代表了提升性能的独特机会。
• 客户端提示可用于根据当前网络条件和设备特征定制资源交付。 DPR，Width和Viewport-Width标头可以帮助您使用服务器端代码为设备提供最佳图像，并提供更少的标记。 Save-Data标头可以帮助您为明确要求您的用户提供更轻松的应用程序体验。
• NetworkInformation API公开有关用户网络连接的信息。此信息可用于修改较慢网络上的用户的应用程序体验。
• 减少请求（HTTP requests reduction）
• 文件压缩（File compression）
• 优化web缓存（Web caching optimization）
  

Web Caching Optimization reduces server load, bandwidth usage, and latency. CDNs use dedicated web caching software to store copies of documents passing through their system.Leveraging the browser cache is crucial. It is recommended to have a max-age of 7 days in such cases. This saves server time and makes things altogether faster.

• 简化代码（Code minification）
  
• 矢量图替换位图（Replacement of vector graphics）
  
• 避免301 重定向
  
  

Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round-trip times and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.

• 采用基于云的网站监控（Adopt Cloud-based Website Monitoring）
  
• 预取重连Prefetch and reconnect在用户实际关注链接之前，域名预取是已经解析域名的一个很好的解决方案。
  
• SSL certificate/ HTTPS
  
• 热链接保护（Hotlink protection）限制HTTP引用，以防止他人将您的资源嵌入其他网站。 热链接保护将通过禁止其他网站显示您的图像来节省带宽。
  
• 基础设施（Infrastructure）
  
• 数据库优化（Database Optimization）
  
  

【转载】
链接：https://juejin.im/post/5b721656f265da28140e53ba

---

作者: 梦缠绕的时候    时间: 2018-8-21 16:27

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2