10种最常见的Web应用程序的性能问题,Web性能优化

10种最常见的Web应用程序的性能问题

2015/04/07 · HTML5, JavaScript · 性能

本文由 伯乐在线 - 段昕理 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:www.neotys.com。欢迎加入翻译组。

Web应用程序总是不可避免的会发生问题。Neotys公司(法国一家负载测试解决方案提供商)的业务主要是通过网站监控和测试帮助您避免这些问题。但任何地方都可能出问题,有时候你只需要知道去哪找就可以了。因此,我们将您经常碰到的一些性能问题并整理成一个简短的指引。

请务必要记住,解决性能问题的最佳方式就是在其影响用户之前就发现并消除。一个良好的维护计划可以成为你的好帮手。制定停机时间策略,创建冗余和扩展计划。为用户负载在一个月或一年后可能会达到的量级做提前的思考。当然,首先要定期做测试负载并持续监控产品性能。

无论你对网站考虑得如何周全,但是有些问题总是要发生的。下面是一些常见性能问题的原因和解决办法。

Web性能优化系列(1):Web性能优化分析

2015/04/08 · CSS, HTML5, JavaScript · 性能优化

本文由 伯乐在线 - 鸭梨山大 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:gokulkrishh.github.io。欢迎加入翻译组。

如果你的网站在1000ms内加载完成,那么会有平均一个用户停留下来。2014年,平均网页的大小是1.9MB。看下图了解更多统计信息。

图片 1

网站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的网站。通过降低页面加载的时间,很多著名公司的收入和下载量有显著的提升。比如

  • Walmart 每降低100ms的加载时间, 他们的收入就提高1%.
  • Yahoo 每降低400ms的加载时间,他们的访问量就提升9%。
  • Mozilla 将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。

给初学者:JavaScript 中数组操作注意点

2017/12/27 · JavaScript · 数组

原文出处: CarterLi   

问题 1: 糟糕的代码

糟糕的代码会使Web应用程序出现诸如算法低效、内存溢出、以及死锁等问题。软件版本过旧,或是集成了历史遗留的系统同样会拖累性能。确保你的团队成员都在使用适合其岗位的工具 – 从自动化分析到最佳编程实践的代码审查工具。

网站优化的步骤

  1. 设定性能预算。
  2. 测试当前的性能。
  3. 找出导致性能问题的地方。
  4. 最后,duang,使用优化特技。

下面有几种方法可以提升你的页面性能,让我们来看看

不要用 for_in 遍历数组


这是 JavaScript 初学者常见的误区。for_in 用于遍历对象中包括原型链上的所有可枚举的(enumerable)的 key,本来不是为遍历数组而存在。

使用 for_in 遍历数组有三点问题:

遍历顺序不固定

JavaScript 引擎不保证对象的遍历顺序。当把数组作为普通对象遍历时同样不保证遍历出的索引顺序。

会遍历出对象原型链上的值。

如果你改变了数组的原型对象(比如 polyfill)而没有将其设为 enumerable: false,for_in 会把这些东西遍历出来。

运行效率低下。

尽管理论上 JavaScript 使用对象的形式储存数组,JavaScript 引擎还是会对数组这一非常常用的内置对象特别优化。
可以看到使用 for_in 遍历数组要比使用下标遍历数组慢 50 倍以上

PS:你可能是想找 for_of

问题 2:未经优化的数据库

优化好的数据库可以达到很好的安全级别和处理性能,反之,没有优化的数据库可能会拖垮生产环境下的应用程序。索引的缺失会减慢SQL的查询性能,从而使整个网站变慢。一定要用脚本和文件分析检查任何低效的查询。

速度指标

速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。

速度指标越低越好。

图片 2

速度指标可以通过Webpagetest 来测试(由Google维护)

不要用 JSON.parse(JSON.stringify()) 深拷贝数组


有人使用 JSON 中深拷贝对象或数组。这虽然在多数情况是个简单方便的手段,但也可能引发未知 bug,因为:

会使某些特定值转换为 null

NaN, undefined, Infinity 对于 JSON 中不支持的这些值,会在序列化 JSON 时被转换为 null,反序列化回来后自然也就是 null

会丢失值为 undefined 的键值对

JSON 序列化时会忽略值为 undefined 的 key,反序列化回来后自然也就丢失了

会将 Date 对象转换为字符串

JSON 不支持对象类型,对于 JS 中 Date 对象的处理方式为转换为 ISO8601 格式的字符串。然而反序列化并不会把时间格式的字符串转化为 Date 对象

运行效率低下。

作为原生函数,JSON.stringify 和 JSON.parse 自身操作 JSON 字符串的速度是很快的。然而为了深拷贝数组把对象序列化成 JSON 再反序列化回来完全没有必要。

我花了一些时间写了一个简单的深拷贝数组或对象的函数,测试发现运行速度差不多是使用 JSON 中转的 6 倍左右,顺便还支持了 TypedArray、RegExp 的对象的复制

https://jsperf.com/deep-clone…

问题 3:失控的数据增长

数据系统一般会随时间的推移变慢。制定一项计划来管理和监控数据,因为维持数据的增长对高性能的Web应用不可或缺。首先,找出业务中导致数据增长的主因。然后,研究并制定合适的存储解决方案。留意所有数据库、缓存、以及更复杂存储方案的选项。

长话短说

Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…

例如:查看amazon在webpagetest上的测试结果 。

可以看看这个视频,了解由 Patrick Meenan 讲解的关于webpagetest的更多信息(需要梯子)。

不要用 arr.find 代替 arr.some


Array.prototype.find 是 ES2015 中新增的数组查找函数,与 Array.prototype.some 有相似之处,但不能替代后者。

Array.prototype.find 返回第一个符合条件的值,直接拿这个值做 if 判断是否存在,如果这个符合条件的值恰好是 0 怎么办?

arr.find 是找到数组中的值后对其进一步处理,一般用于对象数组的情况;arr.some 才是检查存在性;两者不可混用。

问题 4:流量峰值

我们通常认为流量的增长是件好事。但是当做完市场推广或是经历了疯狂传播的热门视频后,应用程序如果没有做好相应的准备,任何人都知道流量峰值会造成什么结果。提前准备是关键,同时搭建一个通过模拟用户做监测的预警系统例如 NeoSense。这样一来,你就会提前发现流量增长影响到了业务,从而避免了用户的糟糕体验。

渲染阻塞

如果你知道浏览器如何运行,那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。

图片 3

点击how a browser works了解更多浏览器工作原理(作者为Tali Garsiel 和Paul Irish).

不要用 arr.map 代替 arr.forEach


也是一个 JavaScript 初学者常常犯的错误,他们往往并没有分清 Array.prototype.map 和 Array.prototype.forEach 的实际含义。

map 中文叫做 映射,它通过将某个序列依次执行某个函数导出另一个新的序列。这个函数通常是不含副作用的,更不会修改原始的数组(所谓纯函数)。

forEach 就没有那么多说法,它就是简单的把数组中所有项都用某个函数处理一遍。由于 forEach 没有返回值(返回 undefined),所以它的回调函数通常是包含副作用的,否则这个 forEach 写了毫无意义。

确实 map 比 forEach 更加强大,但是 map 会创建一个新的数组,占用内存。如果你不用 map 的返回值,那你就应当使用 forEach

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:10种最常见的Web应用程序的性能问题,Web性能优化

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。