15个你可以用来改善前端优化的有用技巧

英文 | 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标识符快速访问它们

许多东西。如果该类已挂起，则须要CSS。

13、使用CSS动画代替JavaScript

有时用JS制作棘手的动画非常酷，但是你必须始终读懂，这对插件来说是很大的负担。更不用说额外的js标识符了。长期以来，CSS3一直备受推崇，能随意使用过渡和关键帧。当然，你应该考虑所需的插件对这些属性的支持。动画通常是装饰性的，互补的。如果使用者的插件不支持CSS切换，那么他将看到动态相片。但是，如果必须实施动画，则值得用javascript制作它。

14、避免繁琐的DOM操作

你最喜欢的客户喜欢调整屏幕上的窗口大小观看时，改变位置，从显示器边缘跳出。不幸的是，领导们没有听到处理器上的旧散热器如何开始啸叫，也没有看到插件中的内存消耗。但是，所有的站点访问者都拥有配备Core i7和8 GB内存的MacBook。当然，能在不干扰DOM的情况下展开某些切换，而仅通过式样和媒体查询方可。但是通常，你必须以旧JS的形式重新连接。

15、AJAX允诺并分析来自伺服器的数据传输

你不能自己决定的另一点，是它与伺服器的交互。与你的后端同事讨论客户端和伺服器之间的数据交换。协商数据格式和API。一起构筑REST服务。毕竟，你是知道客户端上须要什么数据的人。例如，如果你须要有关新浪网商店的购买者的一般信息，请从允诺中删除所有带有名称，价格和折扣的订单上不必要的数据。在单独的允诺中将其取出。你的允诺越简单，越轻便，处理允诺就越容易，伺服器上的负载也就越少。

总结

以上就是我撷取的15个后端强化的小基本功，这些基本功对我的帮助还是很大的。