成都软件测试培训
达内成都天府中心

15023458194

热门课程

前端性能测试必备工具清单有哪些?

  • 时间:2017-08-11 10:51
  • 发布:成都达内
  • 来源:成都达内

在网页开发的世界里,尤其是前端开发,我们会用很多时间寻找最好的设计,以及最好的内容。虽然这是没有错的,但是,我们会忘记去优化我们的网页。这会让用户需要很久的时间,比如说,浏览器需要六秒到十秒以上才能完成整个渲染过程。在这篇文章,我会分享优化网页的检查清单。如果你觉得我有错漏的地方,请在下面留言。这张清单会包含一些优化搜寻引擎排名 (SEO) 的技巧,以及减少网页加载时间的最佳实践。

那些我们忘记的基本功

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?。

Purifycss

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

安装方法:

1 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?中获得更多信息。

minify CSS

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

成都软件测试培训成都软件测试培训班成都软件测试培训机构cd.qa.tedu.cn

上一篇:iOS黑盒测试与白盒测试有什么区别?
下一篇:如何在新团队中尽快的展开测试工作?

优秀的软件测试人员有哪些特征?

2017年软件测试前景怎么样?

哪些人适合学习软件测试

怎么样才能保证测试的覆盖率

选择城市和中心
贵州省

广西省

海南省