发布时间：2022-9-2 分类： 电商动态
前端性能优化是一个非常广泛的概念。本书的前半部分或多或少地提到了一些前端优化方法，这是我们一直关注的重要事项。通过各种方法，手段和辅助系统，前端优化的最终目标是改善用户体验并提高页面性能。我们经常尽力优化前端页面，但忽略了它的效果和意义。不要急于探索如何进行前端优化。首先，让我们看看前端性能是什么，如何理解和评估前端页面的性能。
与桌面浏览器相比，移动Web浏览器有一些明显的功能：设备屏幕小，新功能兼容，支持一些较新的HTML5和CSS3功能，需要与Native应用程序进行交互。但是，移动浏览器可用的CPU计算资源和网络资源非常有限，因此通常需要做更多的事情来优化移动网络。
首先，在移动网络的前端页面呈现中，桌面浏览器端的优化规则也是适用的，并且移动端也需要一些极端优化以获得更好的结果。应当注意，并非移动终端的优化原理不适用于桌面浏览器侧，但是由于兼容性和差异，一些优化原则在移动侧更具代表性。
首先，网络加载类
1.第一个屏幕数据请求是高级的，以避免在加载JavaScript文件后请求数据。
为了进一步提高页面加载速度，您可以尽早考虑页面的数据请求，以避免在加载JavaScript后请求数据。通常，数据请求是页面内容呈现中关键路径中最长的部分，并且不能并行，因此如果可以推进数据请求，则可以大大缩短页面内容的呈现完成时间。
2.首先加载屏幕并按需加载，非第一屏幕内容滚动以确保第一屏幕内容最小化
由于移动网络速度相对较慢且网络资源有限，为了尽快完成页面内容的加载，必须确保第一屏幕加载资源最小化，并且非第一屏幕使用滚动方法异步加载内容。通常建议移动页面的第一个屏幕的数据显示延迟不超过3秒。目前，中国联通3G的网速为338KB/s（2.71Mb/s），因此建议第一屏上的所有资源不超过1014KB，即不超过1MB。
3.模块化资源的并行下载
在移动资源加载中，尽量保证JavaScript资源的并行加载，主要是指模块化JavaScript资源的异步加载，如AMD的异步模块，使用并行加载模式可以缩短多个文件资源的加载时间。
4.内联必备的CSS和JavaScript
通常，为了在加载HTML时在浏览器中创建基本样式，您需要通过< script>在页面呈现中内联必要的CSS和JavaScript。或< style>避免页面HTML加载。在显示页面内容的过程中，页面显示为空白。
<！DOCTYPE html>
< html lang='en'>
< HEAD>
< meta charset='UTF-8'>
<标题>样品LT; /标题>
< meta name='viewport'content='width=device-width，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no'>
<风格>
/*必须拥有第一个屏幕CSS */
Html，身体{
保证金: 0;
填充: 0;
背景色: ccc;
}
< /风格>
< /头>
<身体GT;
< /体>
5. Meta dns预取设置DNS预解析
设置DNS预解析文件资源，让浏览器提前解析静态资源的主机IP，避免在收到请求时启动DNS解析请求。通常在移动HTML中可以通过以下方式完成。
<！ - cdn domain pre-parsing - >
< meta http-equiv='x-dns-prefetch-control'content='on'>
< link rel='dns-prefetch'href='//cdn.domain.com'>
6.资源预加载
对于加载移动终端的第一屏幕后可能使用的资源，需要在加载第一屏幕后尽快加载，以确保用户在用户需要浏览时已完成加载。此时，如果重复异步请求，则速度很慢。
7.合理使用MTU策略
通常，我们认为TCP网络发送的最大传输单元（MTU）是1500B，即，在RTT（往返时间）时间内可以传输的最大数据量是1500字节。 。因此，在正面和背面分离的开发模式中，尽量确保页面的HTML内容在1 KB以内，这样整个HTML内容请求可以在一个RTT时间内完成，从而最大化HTML加载速度。
二，缓存类
1.合理使用浏览器缓存
除了上面提到的使用Cache-Control，Expires，Etag和Last-Modified来设置HTTP缓存之外，您还可以使用localStorage来保存AJAX返回的数据，或者使用localStorage来保存CSS或JavaScript静态资源内容。移动端的离线应用程序，最小化网络请求并确保快速加载静态资源内容。
2.静态资源离线解决方案
对于移动或混合应用程序，您可以设置脱机文件或脱机程序包机制，以允许在本地读取静态资源请求，加快资源加载并实施脱机更新。我们将在以下章节中重点介绍这一部分。
3.尝试使用AMP HTML
AMP HTML可用作优化前端页面性能的解决方案，使用AMP Component中的元素而不是原始页面元素进行直接渲染。
<！ - 不推荐 - >
< video width='400'height='300'src='http://www.domain.com/videos/myvideo.mp4'chace='path/poster.jpg'>
< div fallback>
< p>您的浏览器不支持HTML5视频</p>
</DIV>
< source type='video/mp4'src='foo.mp4'>
< source type='video/webm'src='foo.webm'>
< /视频>
<！ - 推荐 - >
< amp-video width='400'height='300'src='http://www.domain.com/videos/myvideo.mp4'chace='path/poster.jpg'>
< div fallback>
< p>您的浏览器不支持HTML5视频</p>
</DIV>
< source type='video/mp4'src='foo.mp4'>
< source type='video/webm'src='foo.webm'>
< /安培视频>
三，图片类
1.图像压缩处理
在移动端，通常需要确保页面中使用的所有图像都被压缩和优化，而不是直接以原始图像的形式使用，因为它消耗流量并且加载时间更长。
2.使用较小的图像并使用base64内嵌图像
在页面使用的背景图像小而小的情况下，可以将图像转换为嵌入在HTML页面或CSS文件中的base64代码，这可以减少页面的HTTP请求的数量。应注意，为确保图像小，一般图像大小超过2KB，不建议使用base64嵌入式显示。
.class-name {
背景图像: URL（ '数据:图像/PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/P + N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC'）;
}
3.以更高压缩比格式使用图像
使用具有更高压缩比格式的图像，例如webp。在相同图像质量的情况下，高压缩比格式的图像较小，并且可以更快地完成文件传输，从而节省网络流量。
< img src='//cdn.domain.com/path/photo.webp'alt='webp format image'>
4.图像延迟加载
为了最小化页面内容，加快页面呈现速度，并尽可能地节省移动网络流量。建议页面中的图像资源使用延迟加载在页面滚动时动态加载图像。
< img data-src='//cdn.domain.com/path/photo.jpg'alt='延迟加载图片'>
5.使用Media Query或srcset
，根据不同的屏幕加载不同大小的图像在响应章节的介绍中，我们了解到，针对不同的移动屏幕尺寸和分辨率输出不同尺寸的图片或背景图像可以确保在不牺牲用户体验的情况下节省网络流量，并且加速了一些模型的图像。加载速度，强烈建议在移动端。
6.使用iconfont而不是图像图标
在页面中使用iconfont而不是图像图标。其优点如下：使用iconfont尺寸小，是矢量图像，因此在缩放时不会失真;您可以轻松修改图像大小和颜色。但是，应该注意的是，iconfont是指不同webfont格式的兼容性，根据建议按以下顺序编写的经验，否则不容易与所有浏览器兼容。
@ font-face {
Font-family: iconfont;
Src: url（'./iconfont.eot'）;
Src: url（'。/iconfont.eot？iefix'）格式（'eot'），
网址（'./iconfont.woff'）格式（'woff'），
网址（'./iconfont.ttf'）格式（'truetype'）;
}
7.定义图像大小限制
加载的单个图像一般建议不超过30KB，以避免大图像加载时间并阻止页面其他资源的下载，因此建议在10KB以内。如果用户上传的图片太大，建议设置一个报警系统，以帮助我们观察整个网站的图片流量并进行进一步的改进。
四，脚本类
1.尝试使用id选择器
在选择页面DOM元素时尝试使用id选择器，因为id选择器是最快的。
2. DOM对象的合理缓存
对于需要重用的DOM对象，首先设置缓存变量，以避免每次使用时从整个DOM树中重新查找。
//不推荐
$（'mod .active'）。remove（'active'）;
$（'mod .not-active'）。addClass（'active'）;
//推荐
设$ mod=$（'mod'）;
$ mod.find（”有效”。）除去（”激活”）;
$ mod.find（”不活性。”）addClass（”激活”）;
3.页面元素尝试使用事件代理来避免直接事件绑定
使用事件代理可以避免绑定每个元素，并避免需要动态添加元素的内存泄漏和事件绑定问题，因此请尽量不要直接使用事件绑定。
//不推荐
$（'。btn'）。on（'click'，function（e）{
CONSOLE.LOG（本）;
}）;
//推荐
$（'body'）。on（'click'，'。btn'，function（e）{
CONSOLE.LOG（本）;
}）;
4.使用touchstart而不是单击
由于移动屏幕的设计，touchstart事件和点击事件触发时间之间有300毫秒的延迟。因此，如果未在页面中实现touchmove滚动处理，则可以使用touchstart事件代替元素的click事件来加速页面单击。用户体验的响应性。但与此同时，我们也应该注意页面重叠元素的触摸动作的点击渗透问题。
//不推荐
$（'body'）。on（'click'，'。btn'，function（e）{
CONSOLE.LOG（本）;
}）;
//推荐
$（'body'）。on（'touchstart'，'。btn'，function（e）{
CONSOLE.LOG（本）;
}）;
5.避免touchmove，滚动连续事件处理
有必要为touchmove和scroll等事件设置事件限制，这些事件可能会不断触发回调。例如，设置每16ms（60帧，帧间隔为16.7ms，因此可以合理地设置为16ms）用于事件处理以避免频繁事件调用导致移动页面被卡住。
//不推荐
$（'。scroller'）。on（'touchmove'，'。btn'，function（e）{
CONSOLE.LOG（本）;
}）;
//推荐
$（'。scroller'）。on（'touchmove'，'。btn'，function（e）{
让self=this;
的setTimeout（函数（）{
CONSOLE.LOG（个体）;
}，16）;
}）;
6.避免使用eval，使用join而不是connector +，建议使用ECMAScript 6字符串模板
这些是一些基本的安全脚本问题，使用尽可能高效的功能来完成这些操作，避免不规则或不安全的写入。
7.尝试使用ECMAScript 6+的功能进行编程
ECMAScript 6+更安全，更高效，某些功能执行速度更快，是未来规范所需，因此建议使用ECMAScript 6+的新功能进行后续开发。
五，渲染类
1.使用Viewport固定屏幕渲染来加速页面渲染内容
通常认为在移动端设置视口可以加速页面的呈现，同时避免缩放并使页面重新排列和重绘。在移动端固定视口设置的方法如下。
<！ - 设置视口不按比例 - >
< meta name='viewport'content='width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no'>
2.避免各种形式的重新排列和重绘
重新排序页面非常耗时，因此请务必尽量减少页面的重新排序。例如，页面图像大小更改，元素位置更改等将导致重新排列和重绘。
3.使用CSS3动画打开GPU加速
使用CSS3动画时，可以设置transform: translateZ（0）以启用移动设备浏览器的GPU图形处理加速，使动画过程更加流畅。
-webkit-transform: translateZ（0）;
-ms-transform: translateZ（0）;
-o-transform: translateZ（0）;
变换: translateZ（0）;
4.合理使用Canvas和requestAnimationFrame
选择一个更有效的动画实现，如Canvas或requestAnimationFrame，尽量避免使用setTimeout，setInterval等直接处理连续动画。
5. SVG而不是图像
在某些情况下，您可以考虑使用SVG而不是图像来实现动画，因为SVG格式的内容较小，并且SVG DOM结构易于调整。
6.不要滥用浮动
在生成DOM呈现树之后的布局呈现阶段中，浮动布局用于计算性能。因此，为了最大限度地减少浮动的使用，建议使用固定布局或弹性框灵活布局来实现页面元素布局。
7.不要滥用网络字体或过多的字体大小声明
过多的字体大小声明会增加字体大小计算，因此不是必需的。
六，架构协议类
1.尝试使用SPDY和HTTP 2
当条件允许时，您可以考虑使用SPDY协议进行文件资源传输，并使用连接多路复用来加速传输过程并缩短资源加载时间。将来还可以考虑HTTP 2。
2.使用后端数据渲染
使用后端数据渲染可以加快页面内容的呈现，避免空白页面的出现，并解决移动页面上的SEO问题。如果条件允许，后端数据呈现是一种很好的做法。以下章节详细介绍了后端数据呈现的详细信息。
3.使用Native View而不是DOM性能缺点
您可以尝试使用Native View的MNV开发模式来避免HTML DOM性能缓慢的问题。目前，MNV的开发模式可以使页面内容呈现体验接近客户端本机应用程序的体验。
页面优化的常用技术手段和思路主要包括上述内容。虽然有很多枚举，但仍有一些遗漏。可以看出，前端性能优化不是一件简单的事情，它涉及很多内容。您可以根据实际情况将这些方法应用于您自己的项目。完成所有这些操作几乎是不可能的，但很容易实现用户可接受的原则。
同时，我们必须清楚，在实现最终优化的同时，我们付出了高昂的代价，这也是前端优化的问题。从理论上讲，这些优化是可以实现的，但作为工程师，我们必须理解权衡。优化改善了用户体验并使数据加载速度更快，但项目代码可能中断，异步内容应该拆分，精灵的第一个屏幕可能分为两个，页面项目代码维护成本倍增，项目结构它也可能会混淆。
因此，在设计构造，组件解决方案的早期阶段，必须解决异步自动处理问题。优化的任何部分都可以深入完成，但不一定全部。在优化中，我们还必须考虑成本绩效。作为处理前端优化的前端工程师，这是我们应该具备的正确思路。
