前端从浏览器的渲染到性能优化

本文将浏览器的渲染原理、流程以及相关的性能问题，特别是针对前端开发者常见的问题进行解答。通过深入了解浏览器的渲染过程，我们可以更有效地优化网页性能。

目录：

一、问题前瞻

在浏览器渲染原理之前，我们先来思考一些常见的问题：

1. 为什么CSS需要放在头部？

2. JS为什么要放在body后面？

3. 图片的加载和渲染会阻塞页面DOM构建吗？

4. DOM完才出现页面吗？

5. 首屏时间根据什么来判定？

二、浏览器渲染

1. 浏览器渲染图解

浏览器渲染页面主要经历了以下几个步骤：处理HTML标记构建DOM树，处理CSS标记构建CSSOM树，将DOM与CSSOM合并成一个渲染树，根据渲染树进行布局计算每个节点的几何信息，最后将各个节点绘制到屏幕上。在这个过程中，浏览器会忽略一些不可见的节点，如脚本标记、元标记等，以及通过CSS隐藏的节点。

2. CSS规则

在浏览器渲染过程中，CSS的规则至关重要。CSS规则涉及到从左向右和从右向左的匹配规则。从左向右意味着需要遍历更多的节点，而从右向左则能更快定位出当前DOM是否符合样式规则。了解这些规则有助于我们更有效地优化页面性能。

三、深入理解浏览器渲染原理

1. DOM树和CSSOM树的构建对页面性能有重大影响。没有DOM树，页面基本的标签块都没有；没有样式，页面也基本是空白的。了解CSS的规则和JS如何影响页面渲染至关重要。

2. JavaScript会影响页面渲染。通过将JS放在body后面，可以避免阻塞页面的初始渲染。使用异步加载和懒加载技术可以进一步提高页面性能。

3. 图片的加载和渲染可能会阻塞页面DOM构建。为了优化这一点，我们可以使用懒加载技术，或者在图片资源上使用优先级提示。

4. DOM并非完就出现页面。在DOM构建过程中，浏览器会逐步渲染页面，直到整个页面渲染完毕。优化首屏时间和页面加载速度是提高用户体验的关键。

5. 首屏时间主要取决于HTML下载时间、CSS下载时间、JS执行时间以及渲染阻塞等因素。通过压缩资源、使用缓存、优化网络请求等技术可以缩短首屏时间。

3. JavaScript的加载与执行机制

JavaScript使我们能够动态地修改网页的内容、样式和交互。但这也意味着它会对页面的DOM结构产生影响。在浏览器和构建DOM、CSSOM的过程中，JavaScript的执行会阻塞这两个过程的进行，无论是外部脚本还是内联脚本都是如此。

那么，JavaScript的位置是否会影响DOM的呢？

实际上，我们推荐将JavaScript放在body标签的底部进行加载。从数据上看，无论将JavaScript放在head还是body之后，页面的domcontentload时间都是相同的。这是因为，如果将JavaScript放在头部，那么在页面内容区域还未到的时候就会被阻塞，用户看到的是白屏；而放在body后面，虽然页面DOM尚未完全完成，但已经渲染出部分内容了。这也是为什么我们如此重视页面的首屏时间。

在DOM和CSSOM树构建完成并合并成渲染树之前，页面是不会开始绘制的。但这并不意味着要等到整个DOM树和CSSOM树都构建完毕后再开始绘制。实际上，为了提供更好的用户体验，浏览器会在构建呈现树和设置布局的过程中，尽可能快地将内容显示在屏幕上。它不必等到整个HTML文档完毕之后才开始。

至于JavaScript的具体执行时间，这涉及到浏览器渲染的多个阶段，详细情况可以进一步查阅关于浏览器渲染时间点的。

4. 图片的加载与渲染机制

图片的加载和渲染是否会影响页面的渲染？答案是不会。那么，HTML标签中的图片和样式中的背景图片的加载和渲染时间是什么样的呢？

浏览器在HTML遇到图片标签时开始加载图片，接着构建DOM树并加载样式。在样式时，背景图片的链接虽然存在但并不立即加载。当DOM树和样式规则树匹配构建渲染树时，浏览器会遍历DOM树并加载对应的样式规则上的背景图片。计算元素位置进行布局后，开始渲染图片。

值得注意的是，在构建渲染树的过程中，如果元素对应的样式规则包含display:none，浏览器会认为该元素不可见，并不会将其添加到渲染树上。

性能优化

CSS优化

关于CSS的优化，减少层级是关键。过多的层级意味着在匹配时需要遍历更多的DOM节点，影响性能。例如，在写CSS时，我们应尽量避免不必要的嵌套和冗余的类名。使用Less或SASS等预处理器时，也要注意嵌套的规范，以减少渲染时的计算成本。这样不仅能提升页面的加载速度，还能减少浏览器的计算负担，从而提升用户体验。优化网页加载与渲染体验的策略及实践

随着移动互联网的飞速发展，网页的加载与渲染速度成为了衡量用户体验的重要指标之一。为了提高用户体验，我们需要关注以下几个方面：使用类选择器、按需加载CSS、理解async与defer、减少资源请求以及延迟加载图像。

一、使用类选择器

使用类选择器代替标签选择器，可以减少匹配次数，提高样式渲染的效率。通过为不同的元素添加不同的类名，我们可以更精确地定位到需要应用样式的元素，从而减少不必要的样式渲染。

二、按需加载CSS

为了提高页面加载速度，我们可以采用按需加载CSS的策略。根据页面的实际需求，动态加载所需的CSS文件。这样，不仅可以减少页面首次加载时的资源请求数量，还可以提高页面的渲染速度。

三 理解与运用async与defer

在网页加载过程中，async和defer是两个重要的属性。如果脚本是模块化的并且不依赖于任何脚本，我们可以使用async属性，以实现脚本的异步加载，提高页面渲染速度。如果该脚本依赖于另一个脚本或由另一个脚本所依赖，则使用defer属性，以确保脚本按照预期的顺序进行加载和执行。

四、减少资源请求

为了减少浏览器因为优先加载很多不必要资源所带来的页面渲染阻塞时间，我们应该减少页面加载的资源。通过压缩合并资源、懒加载等方法，我们可以有效地减少页面的资源请求数量，提高页面加载速度。

五、延迟加载图像

尽管图片的加载和渲染不会影响页面渲染，但为了尽可能地优先展示首屏图片和减少资源请求数量，我们需要对图片做懒加载。通过延迟加载图像，我们可以确保用户首先看到他们需要的核心内容，同时减少页面首次加载时的资源请求数量。

在实践这些策略时，我们需要注意以下几点：确保代码的可读性和可维护性，以便在需要时进行修改和调整。关注性能监控和数据分析，以便了解优化策略的实际效果。持续优化和更新策略，以适应不断变化的技术和用户需求。通过这些努力，我们可以提高网页的加载与渲染速度，提升用户体验，从而吸引更多的用户并提升网站的竞争力。当文档准备就绪时，我们的故事才刚刚开始。主角是那些带有 "lazy" 标签的图片们。它们在后台默默等待时机，直到它们即将出现在用户的视野中。这是一种懒加载的策略，旨在优化用户体验和提升页面性能。

想象一下，你是网页的导演，如何在资源有限的情况下展现精彩的画面？懒加载与异步加载就是我们的制胜法宝。它们是大促活动性能优化的重要手段，简单说，就是让用户按需加载内容。那些用户暂时不需要或者不会立即看到的内容，我们会放到首屏渲染完成后再去加载。这样，首屏渲染的数据加载量会大大减少，同时js和css的执行带来的性能损耗也会降到最低。

在网页的世界里，我们的主角是那些带有 "lazy" 标签的图片们。它们安静地待在舞台上，等待时机展现出自己的风采。当这些图片即将进入用户的视野时，它们会被赋予新的生命力。这是一种神奇的转变过程，我们称之为懒加载。这意味着只有当图片即将被用户看到时，它才会被加载出来。想象一下，这就像是在舞台上等待表演的节目，只有当观众的目光聚焦过来时，节目才会开始。

在繁忙的大促活动中，我们更需要考虑性能的优化。大量的数据和内容需要在有限的时间内加载出来，这时懒加载和异步加载就派上了用场。它们能够确保用户在浏览页面时享受到流畅的体验，不会因为长时间的等待而失去耐心。它们像舞台上的幕后工作者一样，默默地为我们提供支持和帮助，确保大促活动的顺利进行。

为了让这些懒加载的图片能够顺利登场，我们需要密切关注用户的滚动行为、窗口大小的变化以及屏幕方向的改变。一旦这些条件满足，我们就会立即触发图片的加载过程。这个过程是如此之快，以至于用户几乎感觉不到任何延迟和卡顿。这正是我们的目标所在——为用户带来无缝的浏览体验。通过懒加载和异步加载的实施，我们可以确保网页在繁华的大促活动中展现出最佳的表演效果。2.1 导航下拉异步加载

导航下拉内容是一个复杂的html结构，若直接加载，会延长页面整体加载时间。我们选择异步加载这段html片段，待页面首屏渲染完成后再展示。以下是实现的大致代码：

使用jQuery发起异步请求：

```javascript

$.ajax({

url: url,

async: false,

timeout: 10000

})

.done(function (data) {

var container = document.querySelector('container');

containernerHTML = data;

var appendHtml = $('

');

var tempHtml = $('

');

$('footer').append(tempHtml);

feloader.onLoad(function() {

feloader.use('@cloud/mon-resource/header', function() {});

$('footer').css('display', 'block');

});

})

.fail(function (XMLHttpRequest, textStatus, errorThrown) {

console.log(XMLHttpRequest.status, XMLHttpRequest.readyState, textStatus);

});

```

2.2 图片懒加载

官网的cui套件已经集成了图片懒加载的插件，使用方式十分简单。例如：

```html

```

官网的页脚设计巧妙，采用了懒加载技术以实现更流畅的页面加载体验。页脚图片在CSS中引用，通过延迟加载页脚CSS来达到懒加载的效果。在CSS样式加载的瞬间，页脚可能会因样式缺失而显示混乱。为了解决这个问题，我们在CSS样式加载前将页脚强势隐藏，等待CSS加载完成后，页脚自带的display:block属性使其自动显现。（由于页脚对SEO的重要性，我们并未对其进行懒加载。）

接下来，让我们深入楼层内容的懒加载。借助xtpl的懒加载能力与pep定制页面模板的逻辑，我们实现了HTML的懒加载。页面初次渲染时，仅展示每个楼层的大体框架和标题等关键信息，可使用默认图片或设置最小高度占位来防止锚点定位失效。当页面滚动到该楼层时，JS代码方开始执行，初始化函数中加载、渲染该楼层的HTML，实现楼层图片和HTML的懒加载，大大减少首屏时间。

套餐数据的加载也经过了精细优化。本次双十一，我们对套餐脚本进行了数据缓存，并在指定范围进行套餐数据的渲染。与楼层懒加载相结合，未展示的楼层不请求套餐数据，下拉框不渲染，询价接口不调用。这大大提升了首屏加载的性能，尤其在套餐数据较多的情况下。

我们还合并了加载方式相同的基础功能js并进行了压缩。例如将官网中用的分散的基础功能js合并成一个mon.js，经过伏羲流水线发布后，cui套件会自动将js压缩。这样做可以减少官网页面请求资源数，减小资源大小。

我们实现了资源的异步加载。官网的大部分js都是放在头部或body后顺序加载的，这些资源的加载时间必定在DOMOnLoad之前。为了降低首屏加载时间，我们整理出哪些资源可以在onload之后去加载。这些资源在页面加载时并不需要执行，因此我们可以将其移到页面渲染完成后去加载。这样减少了js逻辑执行时的阻塞，大大降低了页面首屏渲染的时间。利用cui套件中的feloader插件，我们能够轻松掌控js和css的加载时机。feloader为我们提供了一个便捷的工具，让我们可以按需加载所需的资源。

通过feloader.onLoad函数，我们可以确保特定的js和css资源在onload事件之后进行加载。例如：

```javascript

feloader.onLoad(function () {

feloader.use([

'@cloud/link-to/index',

'@cloud/mon-resource/uba',

'@cloud/mon-resource/footer',

'@cloud/mon-resource/header',

'@cloud/mon-resource/mon',

'@cloud/mon-resource/prompt.css',

'@cloud/mon-resource/footer.css',

]);

});

```

这样，我们可以清晰地看到js的加载被转移到了onload事件之后，确保了页面的快速呈现给用户。

在优化页面加载的过程中，图片压缩也是不可忽视的一环。除了对设计给出的图片进行压缩，我们还对一部分不常更新的小图标图片进行base64编码，以减少页面的图片请求数量，进一步加速页面加载。

除了上述的延迟加载和图片压缩，我们还采用了预与预加载的技术来进一步提升页面的加载性能。

DNS预是一个重要的技术，当用户访问官网后，DNS预能够使用户在访问其他页面（如双十一活动页）时，提前进行DNS，从而减少活动页面的DNS时间。其实现方式非常简单，只需要在HTML中添加如下代码：

```html

```

这样，用户在访问其他页面时，浏览器会提前进行DNS，提高页面的访问性能。

我们还使用了preload预加载的方式来提升页面加载性能。对于活动页的部分js资源，我们利用preload进行预加载。HTML器在创建DOM时，如果碰上同步脚本，会停止创建DOM，转而加载脚本。预加载器通过分析HTML文档的早期结果，找到可能包含资源的标签，并将这些资源的URL收集起来，有序地加载这些资源。这样，浏览器可以尽快地加载页面所需的重要资源，提高页面的加载性能。

我们通过feloader插件、图片压缩、DNS预和preload预加载等技术手段，全方位地优化了页面的加载性能，确保了用户可以快速、流畅地访问我们的官网。在网页的世界里，每一个瞬间的加载速度都可能关乎用户的体验和满意度。为此，前端团队在优化网页性能方面不遗余力，不断追求极致的加载速度。他们如同熟练的工匠，精心雕琢每一个细节，确保用户能够享受到流畅、快速的浏览体验。

为了提升网页的渲染速度和性能，前端团队采用了一系列前沿的技术手段。通过利用preload预加载技术，他们将一些关键的脚本和资源提前加载，确保在用户访问页面时能够迅速呈现出来。这些脚本和资源包括但不限于JavaScript库、图片等，它们在网页的运行和展示中起到了至关重要的作用。通过优化这些资源的加载方式，前端团队显著提升了页面的加载速度。

其中，一些具体的优化实践包括引入第三方库、使用CDN加速资源加载等。这些措施不仅能够减少资源的加载时间，还能够提高页面的稳定性和安全性。前端团队还关注浏览器对不同类型资源的渲染效率，通过调整资源的类型和大小来适应不同的设备和网络环境，从而为用户提供更好的浏览体验。

华为云官网的前端团队在性能优化方面更是走在了前列。他们不断新的技术和方法，将官网的页面加载性能做到极致。无论是响应式图片的引入还是动态加载技术的应用，都体现了他们对性能优化的执着追求。他们的努力不仅提升了用户体验，也为整个行业树立了一个典范。

前端性能优化的道路仍然漫长。官网前端团队将继续学习、更多的优化手段，不断挑战自我，追求卓越。他们的目标是将每一毫秒的加载时间都变成用户体验的一部分，让用户在浏览网页时享受到无与伦比的流畅和快捷。

以上就是前端从浏览器渲染到性能优化的详细内容。想要了解更多关于性能优化的知识，请关注狼蚁SEO的其他相关文章。让我们一同见证前端性能的无限可能！