着笔于浏览器渲染的角度，探讨前端性能优化的思路

　　

着笔于浏览器渲染的角度，探讨前端性能优化的思路

　　

　　前端性能优化涉及计算机知识的许多方面，例如计算机网络，数据算法，图形和图像处理，浏览器渲染等，并且通常是前端工程师喜欢的技术讨论主题。因此，在面试中也很容易被问到。还有一个面试问题。

　　起源

　　这篇文章文章源自偶尔面试问答的想法。从浏览器渲染的角度，它讨论了前端性能优化的想法和实用建议。当然，浏览器渲染是一个复杂的过程。本文的作者将从两个关键词开始，即重新排列和重画。

　　目录结构

　　文章的总体思想如下：

　　URL输入页面显示的过程

　　在讨论浏览器解析html之前，有必要了解从输入到最终页面呈现的url过程。它可以帮助我们掌握整个过程，并让我们知道它是整个过程，然后再了解HTML解析的详细信息。在请求周期的哪个阶段，这对我们建立完善的知识图很有帮助。

　　首先，我们假设输入URL请求是最简单的Http请求。以GET请求为例，它可以大致分为以下步骤：

　　用户在浏览器的地址栏中输入要访问的URL地址。浏览器将首先根据此URL检查浏览器缓存系统缓存路由器缓存。如果在缓存中，请直接跳到步骤6；否则，请转至步骤6。如果没有，请按照以下步骤操作。

　　浏览器根据输入的URL地址解析主机名。

　　浏览器将主机名转换为服务器ip地址。浏览器首先查找本地DNS缓存列表，以查看ip是否存在于缓存中。如果存在，请转到步骤4。如果缓存中不存在该IP地址，它将向浏览器的默认DNS服务器发送查询请求，并将当前IP缓存在DNS缓存列表中。有关更多详细步骤，请参阅域名的DNS查找过程。

　　获得IP地址后，浏览器将从URL中解析出端口号。

　　获得ip和端口后，浏览器将与目标Web服务器建立TCP连接，这是传说中的三向握手。门户网站：完整的tcp链接。

　　浏览器将HTTP请求消息发送到服务器。

　　服务器将HTTP响应消息返回到浏览器。

　　关闭连接。浏览器解析文档。

　　如果文档中有资源，请重复6、 7、 8个操作，直到所有资源都已加载。

　　以上步骤简要描述了浏览器从输入URL到最终页面呈现的一般过程，但它不是很具体。例如，浏览器请求消息的类型是什么，它将遇到什么错误情况，浏览器是什么？没有解析响应消息等的具体说明。

　　实际上，在不同的情况下访问服务器的详细过程会有一些差异，例如使用或不使用代理，使用或不使用负载平衡，使用不同的http请求方法，但这不会影响我们对整个服务器的理解。访问链接，那些有兴趣的学生可以在线上对其进行更多了解，因此在此不再赘述。

　　DOM和JavaScript之间的关系

　　文档对象模型（DOM）是用于处理XML和HTML文档的与语言无关的API。在网络上，我们经常操纵HTML，但实际上，DOM也可以操纵XML文档。

　　我们现在知道DOM是与语言无关的API。换句话说，DOM是独立于语言的API。其他语言也可以实现用于操纵DOM的特定API，但是它在浏览器中使用JavaScript。为此，DOM现在已成为JavaScript编码中非常重要的一部分，因为JavaScript经常会操纵底层文档。

　　为什么操作DOM这么慢

　　尽管DOM是通过JavaScript实现的，但DOM和JavaScript是在浏览器中分别实现的。例如，在IE中，JavaScript的实现称为JScript，放置在jscript.dll文件中，而DOM放置在jscript.dll文件中。在另一个名为mshtml.dll的库中。在Safari中，使用Webkit中的WebCore实现DOM和呈现，而JavaScript由独立的JavaScriptCore引擎实现。类似地，在Chrome中，WebCore也用于呈现，而JavaScript引擎是由他们开发的V8引擎。

　　由于DOM和JavaScript是分别实现的，因此每次通过js操作DOM时，都必须先连接js和DOM。我们可以理解这一点：将DOM和JavaScript与两个岛进行比较，它们通过收费桥相连。每次访问DOM时，您都需要穿过这座桥并支付“通行费”。您访问的次数越多，通行费就会越高。在您访问DOM之后，操作特定的DOM还需要“操作费”。由于浏览器有很多访问DOM的操作，因此“旅行费用”和“操作费用”自然会增加，这就是DOM的操作非常慢的原因。

　　浏览器呈现HTML的步骤

　　HTML渲染大致分为以下步骤：

　　HTML被HTML解析器解析为DOM树，而css被css解析器解析为CSSOM树。

　　在解析DOM树和CSSOM树之后，将它们附加在一起以形成渲染树。

　　节点信息计算（重新安排），此过程称为“布局”（Webkit）或“重排”（Mozilla）。也就是说，根据渲染树计算每个节点的几何信息。

　　渲染（重新绘制），此过程称为（绘画或重新绘制）。也就是说，将根据计算出的信息来绘制整个页面。

　　以上4个步骤简要描述了浏览器的渲染过程。从理论上讲，每次dom更改或CSS几何属性更改都会导致浏览器重新布置/重绘过程，如果它不是css的非几何属性，则Changes仅会导致重绘过程。因此，重新排列肯定会导致重新绘制，而重新绘制并不一定会导致重新排列。

　　重新布局/重排

　　在了解什么是重新排列之前，我们需要知道：浏览器使用默认的基于流的布局模型（Flow Based Layout）来呈现页面，这非常重要。

　　所谓的重排实际上是根据渲染树中每个渲染对象的信息来计算每个渲染对象的几何信息（DOM对象的位置和大小），并将其放置在正确的位置。界面。

　　因为浏览器呈现界面基于流式布局模型，也就是说，如果某个DOM节点信息发生了更改，则有必要重新计算DOM结构，重新布局该界面并再次引起重排，但是结构更改的程度将决定周围的DOM更改范围，即全局范围和局部范围，例如，当我们更改窗口大小或方向时，全局范围是从根节点html重新布局整个渲染树。或修改根元素的大小或字体大小；本地布局可以是重新布局渲染树的某个部分或某个渲染对象。

　　在这里，将导致回流的操作总结如下：

　　页面首次呈现。

　　浏览器窗口的大小已更改。

　　元素的大小或位置已更改。

　　元素的内容发生变化（文本数或图像大小等）。

　　元素的字体大小改变。

　　添加或删除可见的DOM元素。

　　激活CSS伪类（例如：：hover）。

　　设置样式属性

　　查询某些属性或调用某些方法。导致重新排列的常见属性和方法

　　宽度

　　高度

　　保证金

　　填充

　　显示

　　边界

　　位置

　　溢出

　　clientWidth

　　clientHeight

　　clientTop

　　clientLeft

　　offsetWidth

　　offsetHeight

　　offsetTop

　　offsetLeft

　　scrollWidth

　　scrollHeight

　　scrollTop

　　scrollLeft

　　scrollIntoView（）

　　scrollTo（）

　　getComputedStyle（）

　　getBoundingClientRect（）

　　scrollIntoViewIfNeeded（）

　　重排也称为重排。实际上，回流的字面意思也就是回流。之所以称其为“重排”，可能是因为人们对重排有了更好的理解，并且更符合中国人的思想。标准文档称为Reflow，因为浏览器呈现基于“流布局”模型。实际上，流程使我们经常说的是文档流。当dom或css的几何特性发生变化时，文档流将通过波动的链接而发生变化，流就像河流中的水，而回流就像将石头扔进河中，引起波纹，然后导致周围环境水流受到影响，因此称为回流。这种理解似乎更加标准和规范。但这并不重要，重要的是我们真正了解该过程。

　　重新粉刷

　　与重新排列相比，重绘要简单得多。所谓的重绘是指当页面上元素的样式不影响其在文档流中的位置时，例如，如果更改了字体颜色，浏览器将更改新样式。重画被称为。

　　引起浏览器绘制过程的常见属性包括：

　　颜色

　　边框样式

　　可见度

　　背景

　　文本装饰

　　背景图片

　　背景位置

　　背景重复

　　轮廓颜色

　　概述

　　轮廓样式

　　边界半径

　　轮廓宽度

　　盒子阴影

　　背景尺寸

　　性能优化

　　我们知道操作DOM是一项高成本的操作，这不仅是因为js和DOM之间的链接访问，还因为操作DOM会导致一系列连锁反应（重新安排）。因此，从性能优化的角度来看，我们可以从以下几个方面开始：

　　使用更好的API代替高消耗量的API，转换和优化高消耗量的集合

　　减少重新排列

　　css和*敏*感*词*处理

　　最终摘要

　　本文文章主要是捕获从输入到最终呈现到界面中的url。浏览器解析并呈现HTML步骤，以探索前端优化的思想和原因。核心思想是基于重新安排和重新绘制。关系开始讨论，主题大致如下：

　　最后，由于个人能力的原因，如果存在写作不完整或遗漏和错误的情况，我恳请读者批评和纠正我。非常感谢您的光临！

　　感谢您这个时代，让我们站在巨人的肩膀上，窥探编程世界的辉煌。我想纯洁地走遍编程世界！我希望每一个走入编程世界的同事都能活出自己想要的东西。来吧。