合作专线:17362615757
行业资讯

AI科技

当前位置:首页 > 行业资讯 > AI科技

前端部分别哭!最新发布不断优化性能方面实践经验我分享号外号外 | 各种技术新闻


作者 | Dimitris Kiriakakis译者 | 风车云马编辑 | Jane出品 | Python大本营(id:pythonnews)
【导语】Angular、React、VueJS 是现在一些主流的 JS 框架,那它们在构建网站或前端程序时,是如何保证性能,减少大家诟病的?今天这篇文章,就为大家介绍一些工具或技术技巧,来帮助前端工程师保证开发性能与效率,毕竟快过节了,要赶紧把研发和优化都做到位,少加班!
(图片来源:作者 Dimitris Kiriakakis 的原文)     
如果网站页面超过 3 秒还未加载出来,会是什么结果?你会失去近 50% 的访客!也许这个数字让你有些意想不到。长时间加载对应用程序的转化率会产生负面影响,而减少页面的加载时间可以显著提升用户体验、提高效率、优化搜索等,最终保证产品的成功率。
想保证构建的网站或前端程序的性能,可以从哪些方面思考呢?接下来,我们就先谈如何衡量,再谈如何优化。
一、如何衡量性能?
首先,我们必须要有一些衡量性能的指标。在衡量前端应用程序的性能时,有两个工具推荐给大家:
(1) 谷歌浏览器 Lighthouse(2) Speedcurve
这两款工具都可以跟踪主要的性能 KPI(如页面响应速度指数 Pagespeed Index,页面变为可交互的时间 TTI,首次对用户显示内容的时间 FCP等)。其中 Lighthouse 包含在 Chrome 开发工具里,通过分析网站/应用程序提供一些非常有用的提示,从而告诉开发人员如何提升相应的指标。使用 Speedcurve,可以在任何时间监测所有这些 KPI 及其性能。
       Chrome 的 Lighthouse 提示信息
衡量产品前端性能之后,下一步就要优化我们的网站,使其发挥最大作用。

二、如何优化?
(一)优化图像
任何一个网站,图像都是至关重要的部分。平均而言,图像类数据占 Web页面加载数据的 60%以上,因此,图像的优化也是最重要的一环,其实也是最容易实现的。为什么这么说?可以从哪几方面入手?
1、调整图像大小
如何调整图像大小使其符合布局要求。最重要的一点是:检查图像的分辨率是否合适。此外,确保图像响应与布局响应相同。这方面可以推荐给大家一个很棒的工具——响应图像生成器(Responsive Image Breakpoints Generator),它可以生成不同版本的图像,可以根据你的需要或习惯,以及可使用的 HTML5 代码。这些代码还可以在任何前端应用程序或网站中使用。
如果对gulp感兴趣,可以使用 gulp-responsive 插件自动执行此过程。
       响应式布局需要响应式图像
2、确保延迟加载
延迟加载可以通俗理解为不需要立即加载图像,但可以在之后需要的时候加载显示。这个概念,结合一下使用经验就容易理解了。无论使用哪个框架,都可以使用延迟加载图像的插件,如 VueJS 中的 v-lazy-image,当然开发者们也可以自己构建,不过需要检测元素进入或退出的时间。
3、图像传输:使用 CDN 进行
上面主要是从网站加载图像的大小和数量两个维度采取优化措施的,之后要考虑哪些问题呢?举一个例子,如果你想让你的网站在全球范围都是可用的,可以怎么做?这里向大家介绍 CDN 方法——内容分发网络来实现。
CDN 在其全球分布的服务器网络上缓存映像。它是如何帮助优化的?举个例子,你在欧洲,一个澳大利亚的用户向网站发送一个图像的请求,CDN 会从另一个,离这位澳大利亚用户更近的站点发送图像,而不是从欧洲的服务器上检索并发送图像,这就减少了加载图像所需的往返时间。
(二)CSS, JS 和 HTML
几乎所有框架都提供了优化代码的方法,如代码拆分、摇树优化、压缩等,除了代码,还能优化什么?
1.优化 HTML 文档
HTML(几乎)是所有 Web 应用程序的基础。在 HTML 文档中引用资源时,有下面两点建议想与大家分享!
(1)将 CSS 引用放在 HTML 头文件的顶部,确保渐进呈现。(2)将 JavaScript 属性放在 HTML 主体的底部,并选择异步脚本加载。这可以防止任何<script> 标记阻塞 HTML 的呈现过程。
2.确保只加载需要的东西
       延迟加载组件和模块
Angular、React 和 VueJS 都提供延迟加载,所以开发者只需根据自己的需要正确地分割代码,并在真正需要的时候加载所需模块。例如,一个电子商务网站,应该确保用户在主页时,购物车页面(模块)或支付页面(模块)没有被加载。
3.压缩和缓存
前端开发中需要的所有资源,比如图像或代码,是否都压缩,采取争取的缓存方式了?为什么要讲这一点?文件压缩可以让程序变得更轻,减少请求往返所需要的时间,最常用的文件压缩方法之一是 Gzip,一种用于压缩代码块、文档、图像和音频文件的好方法。
Brotli 是另一种文件压缩算法,并且越来越受欢迎。这个开源算法现在由谷歌和其他组织的软件工程师在定期更新维护。和现有方法相比,它能以更好的比率压缩文件。
此外,还可以通过修改它们的配置文件,如在 nginx 上启用 brotli 或在 Apache 上启用 brotli,在 nginx、Apache 或其他正在使用的服务器上选择喜欢的压缩方法。
谈到缓存,最常用的缓存技术是利用浏览器缓存,Lighthouse 也推荐使用这个方法,同样可以通过修改服务器的配置文件来启用(启用浏览器缓存)。
总结
通过分享上面几个经验,总结为一个核心问题就是:前端问题,性能是一个重要的问题,需要前端工程师们认真地思考与对待。
最后,也希望这篇文章能帮助前端工程师,正在前往前端开发路上的小伙伴们一些帮助,在 Review 的时候,别忘了确保前端的性能。
原文链接:
(本文为Python大本营原创文章,转载请微信联系1092722531)
长三角开发者联盟代码就是力量,长三角的开发者联合起来!加入「长三角开发者联盟」将获得以下权益长三角地区明星企业内推岗位
CSDN独家技术与行业报告
CSDN线下活动优先参与权
CSDN线上分享活动优先参与权
扫码添加联盟小助手,回复关键词“长三角2”,加入「长三角开发者联盟」。推荐阅读:
打开阿兹海默之门:华裔张复伦利用RNN成功解码脑电波,合成语音 | NaturePython程序员Debug利器,和Print说再见 | 技术头条前端程序员别哭,优化性能的经验分享给你如何使用Python玩转PDF各种骚操作?人工智能先驱 Nils Nilsson 去世,吴恩达、Yann LeCun 悼念!关于谷歌云,你应该知道的一切! | 技术头条养生 996 的崛起:马云竟给他最痛恨的「兔子」站台?澳洲生活7年, 前阿里程序员谈我们的区块链差距究竟在哪?她说:为啥程序员都特想要机械键盘?这答案我服!
点击阅读原文,了解「CTA核心技术及应用峰会」。
粤ICP备19111974号