英文 | https://javascript.plainenglish.io/15-useful-techniques-you-can-use-to-improve-your-frontend-optimization-8317cb6e54e9

翻译 | 小爱

如今，前端开发人员越来越多，因此，对于前端人员的要求也越来越高。很多时候，我们在开发一些项目时，我们的项目在成长的话，其要求和复杂性也在增加。其中，作为前端开发人员，一个非常重要的能力就是网站的优化能力，这样，才能使网站变得更快，更便于浏览器阅读。

本文将向你分享一些网站优化技巧，并为你提供一些工具，以帮助你提升专业性与工作效率。

一般而言，所有前端优化都归结为两种类型的任务。首先，是通过加快网络的数据传输。它由两个子项目组成：减少对服务器的请求数量和减少传输的数据量。其次，是加快浏览器中的应用程序的速度。

现在，让我们进行深入研究学习。

1、缓存JavaScript和CSS样式

尽可能少地向服务器发出请求。记得10年前，一个页面上要加载5-6个JS，但理想情况下，你应该有一个JS文件和一个CSS文件，这就足够了。

只要确保JavaScript的不同部分在不同页面上执行即可。此外，请记住有关缓存的信息：下载一次文件后，用户会将其保存到浏览器缓存中，并且下一次你登陆此网站时，浏览器将立即从缓存中加载，而不是从远程服务器加载静态信息。

2、压缩JavaScript，CSS样式和HTML代码

即使我们每个服务器仅发出一个请求，也不要忘记这个数据也很重要。压缩代码可使你最多减少40％到50％的代码量。对于移动设备尤其如此。有大量的在线服务可以进行缩小优化，例如minifycode.com。但是使用诸如grunt.js，gulp.js或webpack.js之类的前端构建工具要方便得多。

3、图片压缩优化

基本上，我们不需要在网站上上传10MP照片。它们不仅可以降低分辨率，而且还可以以最小的质量损失来压缩图像。通常，我们不需要超高图片质量的网站。另外，如果不需要透明度，也可以将图像从png转换为jpg。

像Photoshop这样的图形软件都可以提供帮助（它们甚至具有特殊的选项“为网络压缩”）和相同的构建工具，例如gulp-imagemin和image in-pngquant插件。

4、制作大合成图

小图标，按钮的背景，复选标记和箭头，这些很小的图片，但需要对服务器进行很多请求。要分别提供每个图标，请将其粘贴到图片中，合并制作为一张大图片，减少服务器的请求。

5、应用延迟加载—图像的延迟加载

延迟加载是指脚本也指样式，同时，也经常引用到图像中。具有十二个屏幕和巨大着陆页的图片，无论我们拥有多快的互联网，加载这些海量数据都是一个问题。

延迟加载的想法是仅在真正需要资源时才加载资源。对于图像，仅加载当前可见的那些图像。如果用户仅滚动登录页面的前几个屏幕，则许多图片将隐藏在网站的“下方”，因此不会加载。所以，我们的服务器将摆脱不必要的烦人请求，更重要的是，将节省流量和站点访问。

6、不要偷懒，要预览图像

有多少人无视这些简单的规则。你在网站上看到一个漂亮的画廊，上面载满了图像，然后想到“多么伟大的人”。然后，你会注意到滑块上的缩略图是相同的大图像，只是在CSS中有所减少。然后你会想，“这到底是怎么回事？”

创建缩略图的任务不能称为第一线。如果你必须自己做，我只能表示同情。通常，这是通过专门指派的人员来完成的，这些人员需要亲手完成这项不费力的工作，或者借助批处理图像处理工具来完成。或者，如果慈善事业对你而言并不陌生，那么就在后端。

在将图像上传到服务器或首次访问所需图像时，通常由CMS /框架插件对图像进行大小调整。无论如何，作为前端开发人员，你都应该了解确保快速加载站点，把内容呈现给你的客户。

7、提供来自不同域/子域的静态内容

如果你有一个小型项目，博客或网站，你将不会有任何收益。但是，如果你知道，你正在开发第二个Facebook，则应将许多静态信息和相同的照片散布在不同的子域或域中。事实是，浏览器对从一个（子）域下载资源的线程数量有所限制。因此，如果你有大量的内容，最好将其分散。

8、将JavaScript代码或文件放在页面末尾

在内容结束标签前，浏览器必须先下载内容，然后才下载JS。当然，如果你是单页应用程序，则此建议将无济于事。如果你正在使用SPA，那么一切都很好。

9、包含动态样式

渲染裸HTML后尝试加载样式。页面加载加速可能会忽略不计。但是你的HTML可能会有的可怕，以至于没有样式，用户会很快就从网站中逃脱。通常，请尝试并确定是否需要它。

10、摆脱不必要的DOM元素

DOM操作是浏览器中最难的部分之一。不要在两个浮动div足够的表上做。不要为了美而雕刻额外的跨度。除非javascript逻辑要求，否则不要为容器包装程序创建包装程序。一般而言，请保持简单并努力追求极简主义。

11、用JavaScript代替jQuery

我们不要使用jQuery来操纵dom。我们刚刚习惯了编写$（'＃myDiv'）比document.getElementById（'myDiv'）更方便。但是支持IE的时代已经过去，如果优化对你来说真的很关键，那么请切换到Native，使用DOM的工作速度将提高数十倍甚至数百倍。

12、不要害怕将ID放在DOM元素上，以便从JavaScript代码快速访问它们

请保留JS的ID，这是访问所需项目的最快方法。此外，你将很快不再对应用样式的优先顺序感到困惑，并且将永远知道：如果id放在此元素上，则javascript需要从中获取一些东西。如果该类已挂起，则需要CSS。

13、使用CSS动画代替JavaScript

有时用JS制作棘手的动画非常酷，但是你必须始终记住，这对浏览器来说是很大的负担。更不用说额外的js代码了。长期以来，CSS3一直备受推崇，可以随意使用过渡和关键帧。

当然，你应该考虑所需的浏览器对这些属性的支持。动画通常是装饰性的，互补的。如果用户的浏览器不支持CSS转换，那么他将看到静态图片。但是，如果必须实施动画，则值得用javascript制作它。

14、避免繁琐的DOM操作

你最喜欢的客户喜欢调整屏幕上的窗口大小观看时，改变位置，从显示器边缘跳出。不幸的是，领导们没有听到处理器上的旧散热器如何开始啸叫，也没有看到浏览器中的内存消耗。但是，所有的站点访问者都拥有配备Core i7和8 GB内存的MacBook。

当然，可以在不干扰DOM的情况下进行某些转换，而仅通过样式和媒体查询即可。但是通常，你必须以旧JS的形式重新连接。

15、AJAX请求并分析来自服务器的数据传输

你不能自己决定的另一点，是它与服务器的交互。

与你的后端同事讨论客户端和服务器之间的数据交换。协商数据格式和API。一起构建REST服务。毕竟，你是知道客户端上需要什么数据的人。

例如，如果你需要有关在线商店的购买者的一般信息，请从请求中删除所有带有名称，价格和折扣的订单上不必要的数据。在单独的请求中将其取出。你的请求越简单，越轻便，处理请求就越容易，服务器上的负载也就越少。

总结

以上就是我分享的15个前端优化的小技巧，这些技巧对我的帮助还是很大的。

学习更多技能

请点击下方公众号