前端性能测试工具整理简介_性能测试工具都有哪些?

时间: 2018-05-21阅读: 446标签: 测试

Favicon
请不要忘记为你的网站加上它,它就好像是你的网站的 ID。无论你有没有 favicon.ico ,用户的浏览器依然会请求它。如果你忘记加上这个档案,你的网站就会返回 404 Not Found,这会让浏览器面红。。。所以你要小心一点,避免给予用户负面的第一印象。要解决这个问题,你可以透过?Favicon Generator?生成 favicon 和 manifest 档案。


Open Graph
加上社交媒体的 meta. 标签,用户更好地分享你的文章,同时 Google Ranking 也会提高,你可以使用?Meta. Tags?产生 Social meta. tags。
译者按:产生 Open Graph Meta. Tags,我的博客也加上了 Open Graph。


图片优化-压缩图像
载入图片会大幅地延长网页的加载时间,甚至达到整体网页载入时间的七成。如果可以的话,请使用 SVG,以及压缩你的那些精致图像。你可以使用?Compress PNG?来帮忙压缩图像。


CSS 优化-Autoprefixer
解决跨浏览器上的 CSS 问题。我们都会在自己喜欢的浏览器下写 CSS 的规矩,而我则是使用 Chrome。虽然如此,你依然需要为这些规矩加上 prefix 来支持所有类型的浏览器。 Autoprefixer 会使用现在浏览器热度,对各种属性支持度的资料,来提供你所需要的 prefix。你可以透过命令行来运用它。

npm install -g postcss-cli autoprefixer
postcss *.css use autoprefixer -d build

你也可以使用 Webpack 设置,或者使用?Autoprefixer CSS online?。


CSS 优化-Purifycss
删除项目内没有用到的 CSS 规矩。它会读取内容 (HTML/JS/PHP) 和 CSS,然后返回必须的 CSS。它是一个非常有用的工具,如果你是在用 CSS 框架比如说 Bootstrap,这个能够减少很多的 CSS 文档大小。

安装方法:

npm install -g purify-css

使用方法:

purifycss src/css/main.css src/css/bootstrap.css src/js/main.js — min — info — out src/dist/index.css

你可以在 purify-css 的?Github Page?中获得更多信息。


CSS 优化-  minify CSS
你可以使用 purify-css 或使用网上的CSS Compressor。


减少载入时间
PageSpeed Insights 可以用来检查载入网页速度,它会分别在手提电话和计算机运行测试。它会使用手提电话的 user-agent,以及 Desktop 的 user-agent。PageSpeed 会检查网页时候已经应用网页的最佳实践,并提供一个 0﹣100 的分数,同时提供如何提高分数的意见。


GZIP
开启 GZIP 压缩,是其中一个减少网页载入速度的最快改善方法。Just Do IT,设置 GZIP,并让你的用户享受飞一般的感受,下图是节省流量的效果图。

PICSrush GZIP 测试图
你可以在Check GZIP compression?网站中测试你的网站是否已经开启 GZIP 压缩功能。


CDN
根据维基百科,内容传递网络(CDN)是指一种透过互联网互相连接的计算机网络系统,利用最靠近使用者的服务器,更快地传送档案。简单来说,CDN 就是一种网络上的缓存系统。你可以使用免费的?CloudFlare?来达到这个效果。
编者按:你可以用 cdnjs 或其他 cdn。


优化平台-Sentry
对于前端工程师来说,它是一个非常正的工具。Sentry 检查在浏览器环境下,是否存在任何 uncaught JavaScript. exceptions,主动追踪发生的错误,并提供报告。它提供丰富的 API,使得你可以自定义如何在其他地方显示这些数据。
它会透过 Email, SMS 或 Slack 通知你,当前端环境发生错误时,它亦会提供用户回应。


优化平台-  Google Tag Manager
Google Tag Manager 可以一站式管理你所有会传送到第三方,例如 Facebook 和 Twitter 的 JavaScript. 代码。透过使用它,你减少网页的载入时间,以及更加方便地在同一个地方管理 JavaScript. 代码。 
 

vue-cli3 配置开发-测试环境

首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同

使用Fiddler进行Web接口测试

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark。为什么使用fiddler?原因如下:

web测试流程及注意事项

界面对不懂技术的客户来说那相当关键,慢慢体会就会明白的。Web界面设计中,对各种元素(如按钮、单选框、复选框、列表框、超连接、输入框等等)的设计是非常重要的。

在 Angular 中引入 Jest 进行单元测试

整体测试跑起来的时候难以定位测试出错的定位,怎么办呢,那就让跑整个测试的时候各个文件之间也没有依赖可以单独跑好了,所以就想到了 Jest。实践证明,在 Angular 中, Jest 大法也非常好使。

node.js 断言的使用

assert模块提供了一组简单的断言测试,分严格模式(strict)和遗留模式(legacy),严格模式下,对比的方式比较严格,但在遗留模式下是可以通过的。官方推荐使用严格模式, 所以本文基于strict模式下学习。

针对web系统的常用测试方法

针对web系统的常用测试方法如下:页面链接检查、相关性检查、检查按钮的功能是否正确、字符串长度检查、字符类型检查、特殊字符检查

webdriver定位元素

在UI层面的自动化测试开发中,元素的定位与操作是基础。webdriver提供了很多种定位方法,以下总结了6种:万能法:find_element_by_xpath()、id定位:find_element_by_id(\"id\"),id属性是唯一的、class定位

几款Web服务器性能压力测试工具

http_load程序非常小,http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载。webbench是Linux下的一个网站压力测试工具,最多可以模拟3万个并发连接去测试网站的负载能力。ab是apache自带的一款功能强大的测试工具。安装了apache一般就自带了。

常用的web网站负载/压力/性能测试工具

在网站上线发布之前,我们除了必要的安全、功能测试外,往往还需要进行压力测试。通过模拟实际应用的软硬件环境及用户使用过程的系统负荷,长时间或超大负荷地运行测试软件。包括:Apache JMeter 、LoadRunner、NeoLoad等

power assert_更智能、优雅的全方位 assert 断言库

在写测试代码时,以往我们需要翻阅文档,学习各种 API 才能明白如何操作断言。而现在我们可以透过 power-assert 的 assert 方法来减轻调试压力。不仅如此,它还提供更加直观,具体的运行效果,帮助 DEBUG。写测试代码,其实可以很容易。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全