|
Web性能优化始终是当务之急，尤其是在竞争如此激烈的此刻。众所周知是，更快的网站下载速度已表示出能够加强拜访者的保存率和忠诚度以及用户满意度，尤其是针对网络速度较慢的用户和移动设备上的用户而言！
常用web优化办法
1. HTTP请求减少
一次完整的请求都需要经过队列等待、 DNS寻址、与服务器创立连接、发送请求、等待服务器响应、下载数据这般一个 “漫长” 而繁杂的过程。一般，网页请求的HTTP越多，加载速度就越慢。由于浏览器限制了单个域名下同期必定数量的同期连接数（通常为6-12个）。为避免瓶颈，运用资源合并、雪碧图等以减少了单个页面的请求数量。从而减少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=2592000
顺便说一句，max-age以秒为单位指定。2,592,000秒= 30天。
针对要缓存文件的确切时间，无详细的规定，然则最佳实践是将文件缓存的时间尽可能长。
缓存连续时间取决于您更新站点文件的频率以及要缓存的文件类型。例如，您能够max-age为不经常更改的文件（例如网站的LOGO，JS文件和CSS文件）设置更长的时间。
文件类型缓存连续时间CSS1年JavaScript1年照片（例如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办法如下: gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 6;
gzip_typestext/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的<head>中，加入以下代码： <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-159822f693ed.jpg">
Prefetch和DNS Prefetch相同。Prefetch应主要用于预加载静态资源，例如图像，CSS和JavaScript文件。全部文件将下载并保留在浏览器缓存中。亦能够预取HTML文档。
然则，您不可依赖正在下载的资源。浏览器会在处在空闲状态时并且无其他要执行的任务下载资源文件。倘若用户的网络连接较慢，它亦将完全忽略大文件。
子资源- subresource<link rel="subresource" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.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（<html>标记）浏览器解析CSS代码：基本规则在User-Agent样式表（浏览器默认设置）中，而后可能有用户样式表，作者样式表，外边样式，导入样式，内联样式以及最后样式被编码为styleHTML标签的属性接下来是构造渲染树（render tree）。渲染树有点像DOM树，但不完全匹配。渲染树会获取样式信息，因此呢，倘若您将元素隐匿display: none，则它将不会出此刻渲染树中。其他不可见元素（例如，head以及其中的所有元素）亦是如此。另一方面，例如在渲染树状文本节点中可能存在* 用多个节点暗示的DOM元素。渲染树中的节点叫作为box（CSS box 中的盒模型），每一个节点都有CSS框属性-宽度，高度，边框，边距等构造渲染树后，针对每一个visible节点，匹协同适的节点CSSOM rules并应用它们，而后浏览器在屏幕上绘制渲染树节点。
重绘-repaint
因为节点属性的更改或样式更改（例如更改opacity，color，bac公斤round-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错误
即时获取更新，认识更加多动态，请关注 https://www.gogoing.site
倘若你觉得这篇文案对你有帮忙，欢迎关注微X公众号-前端学堂，更加多精彩文案等着你！
| 
发表于 2024-7-27 01:52:10
