常用的网站性能优化方法_知乎_

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 263

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 264

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 290

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 291

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 263

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 264

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 290

Warning: Illegal offset type in isset or empty in /www/wwwroot/www.moyuseo.com/wp-content/themes/justnews/themer/core/wpcom.php on line 291

在建立网站的过程中，我们经常忙于设计、内容推广等，所以我们忘记了保持业务网站快速正常运行的最基本部分：网站性能优化。事实上，速度是网站运营成功的关键因素，网站管理员应该始终优先考虑。

Web性能优化始终是当务之急，尤其是在竞争如此激烈的现在。众所周知是，更快的网站下载速度已显示出可以提高访问者的保留率和忠诚度以及用户满意度，尤其是对于网络速度较慢的用户和移动设备上的用户 而言！

常用web优化方法1. HTTP请求减少

一个完整的请求需要排队等待， DNS搜索地址、与服务器连接、发送请求、等待服务器响应、下载数据等漫长 和复杂的过程。通常，网页请求HTTP加载速度越慢，加载速度就越慢。因为浏览器限制了一定数量的同时连接到单个域名(通常是6-121)。为避免瓶颈，使用资源合并、雪碧图等来减少单个页面的请求数量。从而减少HTTP请求和加载网页所需的往返次数。HTTP要求是最重要的优化技术，影响最大。

2.文件压缩

Web页面是由HTML、CSS和JavaScript由代码文件组成。随着网页复杂性的提高，其代码文件和随后的加载时间也随之增加。文件压缩可以减少80%的代码文件，从而提高网站响应速度。通常使用webpack、gulp或grunt来压缩web代码,使用tinypng压缩图片。

3. 浏览器缓存

如果允许浏览器缓存您的网站文件(外部样式表，JavaScript文件、图像等。)意味着文件不需要每次用户要求网站上的网页时都下载。这可以加速用户导航到另一个网页的体验，因为它们已经存储在用户的浏览器缓存中，因为它们不需要下载风格表、图片和字体等内容。

那么，我们如何允许浏览器缓存文件呢？

当浏览器从我们的Web当服务器要求文件时，服务器将执行发送文件的操作之一HTTP标头HTTP标头包含所要求文件的元数据，以及浏览器应该如何处理文件的说明。

我们可以指定标准HTTP标头字段之一是Cache-Control设置缓存方法，Cache-Control允许我们定义浏览器缓存文件的方式。我们可以使用它Cache-Control标头字段告诉浏览器文件是否应该缓存，文件应该缓存多久。

您可以在DevTools 的Response Headers中看到Cache-control字段

Cache-Control: max-age=

顺便说一句，max-age以秒为单位。2.592，000秒。= 30天。

没有具体规定要缓存文件的确切时间，但最好的做法是尽可能长地缓存文件。

缓存持续时间取决于您更新网站文件的频率和要缓存的文件类型。例如，您可以max-age不经常更改的文件(如网站LOGO，JS文件和CSS文件)设置时间更长。

| 文件类型 | 持续缓存时间 | | --- | --- | | CSS | 1年 | | JavaScript | 1年 | | 图片(例如PNG，JPG，GIF） | 1个月 | | HTML | 不使用缓存 |

对于SVG我们可以使用文件svg-sprite-loader创建自己的图标库：

4. 开启GZIP

虽然开启GZIP压缩可以在很大程度上压缩资源文件，但也有一些地方需要注意：

旧浏览器：有些浏览器可能仍然无法处理压缩内容（可以接受，但实际上不能）。压缩内容：大多数图像、音乐和视频都被压缩了。不要浪费时间再次压缩它们。事实上，你可能只需要压缩三个文件（HTML，CSS和JavaScript）。CPU负载：动态压缩内容占用CPU节省时间和带宽。压缩速度和CPU性能限制通常将压缩等级设置为6（随着压缩等级的增加，压缩比增加，但在6级后，压缩时间与压缩比正相关）。

如果使用Nodejs可作为服务器使用compression插件来开启gzip。如果使用nginx作为静态资源服务器，开启gzip方法如下：

gzipon;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/jpg image/gif image/svg image/png;
gzip_disable "MSIE[1-6]\\.";
gzip_vary on;5. 预加载DNS预取-DNS Prefetch

这将通知客户端，我们需要在未来通过特定的方式URL为了获取资产，浏览器可以尽快分析DNS。假设我们需要URL图像或音频等资源需要从www.gogoing.site下载网站HTML的中，添加以下代码：

<link rel="dns-prefetch" href="//www.gogoing.site">

然后，当我们要求文件时，我们将不再需要等待DNS查找。Chrome一直在做类似的事情。假如你只是在做URL将域名的一小部分键入栏中，自动预分析DNS(有时甚至是预渲染页面)，从而节省了每个请求的毫秒数。

资源预取-Prefetch<link rel="prefetch" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-f693ed.jpg">

Prefetch和DNS Prefetch相同。Prefetch应主要用于预加载静态资源，例如图像，CSS和JavaScript文件。在浏览器缓存中下载并保存整个文件。也可以提前提取HTML文档。

但是，您不能依赖正在下载的资源。浏览器将在空闲时没有其他任务下载资源文件。如果用户的网络连接缓慢，它将完全忽略大文件。

子资源- subresource<link rel="subresource" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-f693ed.jpg">

subresource与Prefetch同样。从服务器预下载指定文件，并将其存储在浏览器缓存中。但不同的是，根据Chromium文工作方式如下：

LINK rel=“subresource它提供了一种新的链接关系类型，其语义和LINK rel="prefetch"不同。尽管rel="prefetch"为后续页面提供低优先级资源下载，rel="subresource"则允许及早加载当前页面中的资源。

因此，如果当前页面需要资产或尽快需要资产，最好使用它subresource，否则请使用prefetch。

预渲染-Prerender

这里介绍的预渲染功能是最强大的技术。从根本上保证所有必要的静态资源URL在后台完全加载和设置。您可以想象它是在新选项卡中提前打开的URL，但在用户实际调出页面之前，它一直处于隐藏状态。在实际页面下载过程中发生的所有活动都将在后台进行。

但由于兼容性，我们通常同时使用它Prefetch和Prerender来预加载HTML文档。

任何丢失的文件都会产生HTTP 404 错误。如果你要求一个不存在的脚本文件，因为浏览器求脚本文件时，即使您返回404，也会尝试遵循Javascript分析响应中的内容。这无疑会增加很多处理时间。

6. 重绘和回流

在了解重绘和回流之前，让我们回顾一下浏览器的工作原理：

浏览器解析HTML源代码，并构造一个DOM树，每一棵HTML树上有一个相应的节点，标签之间的文本块也会产生一个文本节点。DOM树中的根节点是documentElement浏览器分析(标记)CSS代码：基本规则在User-Agent在样式表（浏览器默认设置）中，可以编码用户样式表、作者样式表、外部风格、导入风格、内联风格和最终风格styleHTML下一步是结构渲染树（render tree）。渲染树有点像DOM树，但不完全匹配。渲染树可以获得样式信息，所以如果你隐藏元素，display: none，它不会出现在渲染树中。其他不可见元素(例如，head所有元素)也是如此。另一方面，例如，渲染树文本节点可能存在* 用多个节点表示DOM元素。渲染树中的节点称为box（CSS box 盒模型)，每个节点都有CSS框属性-渲染树后的宽度、高度、边框、边距等结构visible节点，匹配合适的节点CSSOM rules并应用它们，然后浏览器在屏幕上绘制渲染树节点。重新绘制-repaint

由于节点属性或样式的变化(如变化)opacity，color，background-color，visibility），因此，屏幕的某些部分需要更新。此屏幕更新称为重绘（repaint）。

回流-reflow

渲染树的一部分（或整个树）需要重新计算，包括元素的位置、宽高度以及边框等几何形状以及所有受影响的其他元素的位置都会由浏览器重新绘制，此过程称为回流。更改单个元素会影响所有的子元素，祖先元素和兄弟元素。

回流肯定会导致重绘。

通常，以下情况会导致回流：激活伪类，如：hover内容输入，如input添加输入、删除样式表、删除、更新DOM节点使用offsetWidth和offsetHeight为DOM节点设置动画和使用JS来块操作DOM节点使用display: none(重visibility: hidden（仅重绘，因为不会有位置变化，也不会影响后节点的显示)隐藏DOM节点用户操作，如调整窗口大小，更改字体大小或滚动

如何通过为容器设置固定高度来限制受影响元素的使用，减少重绘和回流，避免使用表格布局offsetWidth和offsetHeight先将其缓存到本地变量中，不要每次直接从元素属性中读取，尽量添加/修改className控制节点样式，减少节点样式CSS规则层次和复杂使用CSS批量更新选择器DOM，且减少DOM深度。使用documentFragment来操作DOM更改数据。更新/克隆/替换节点时，首先将节点样式设置为display: none,替换完成后再移出display: none样式(总共2个回流和2个重绘)，7. 避免301重定向

重定向是性能的杀手，应尽量避免使用。重定向会产生额外的往返时间（RTT），因此，在浏览器开始加载其他资源之前HTML文档所需的时间将迅速翻倍。

8. 浏览器存储

使用浏览器存储（localStorage或sessionStorage）存储网站中使用的不可变数据，以确保页面的加载速度，减少不必要的请求。在某些情况下（如商场），还可以保存主页数据，保证主页快速加载，减少白屏时间。

9. 避免404错误

请关注

如果你认为这篇文章对你有帮助，请注意-前端学校，更多精彩的文章等着你！