xml地图|网站地图|网站标签 [设为首页] [加入收藏]
PostCSS浓郁学习,测量试验你的前端代码
分类:web前端

参考资源

  • Front-End Performance Checklist 2018
  • 《高性能JavaScript》
  • 响应式图片
  • Preload
  • Resource Hints

    1 赞 6 收藏 评论

图片 1

光谱的一端——单元测试

顾名思义,代码以单元为单位进行测试。那么什么是单元呢?这就不同的编程语言的定义不一样了。它可以是一个函数、一个模块、一个包或者一个类,甚至是一个对象(比如 JavaScript 和 Scala 语言)。在 JavaScript 中,通常是以类或者模块作为一个单元。

以单元进行测试很重要的一点是其测试是独立的。对于一些场景这种测试非常适合,比如算法、某些功能性函数(如字符串中有多少字符)和包含一组验证性功能的类等场景。

这些场景下进行独立的单元测试非常容易,因为他们不依赖于其他单元。但是假设一个单元依赖于其他单元怎么办?可以有两种做法:两个单元一起测试,或者 mock 另一个单元。

什么是 mock?下面我们举例来解释:

假设一个模块是一个单元,模块中包含了 writeSumToFile 这个函数,函数接收两个数字参数,并把他们的和写入文件中。

这里注意,这个模块自己并没有做写文件操作。写文件操作是在另一个单元 fileSumWriter 中做的。

那么为了测试第一个单元,我们既可以传一个真实的 fileSumWriter 进来,也可以模拟(mock)一个写文件操作(并不用真的实现写操作)。

如果我们传递一个 mock 到这个函数,那么这个单元测试,当然可以叫做“单元测试”,因为没有涉及到其他单元。但是如果两个单元一起测试,那么可能就有人说你这并不是单元测试了。

还是那句话,我不关心这到底应该叫什么。

PostCSS入门

PostCSS在以惊人的速度发展,而且越来越受人欢迎。越来越多的人开始在了解它,使用它。因为他们意识到,在项目中使用PostCSS让他们意识到了眼前一亮。

图片 2

2014年总共不到140万的下载量,但从2015年1月份到6月份已经超过380万个下载。

Autoprefixer是PostCSS中最流行的插件,其中Google、Shopify、Twitter、Bootstrap和Codepen都在使用这个插件。Wordpress也使用Autoprefixer插件,而且还使用RTLCSS插件。Alibaba使用了几个PostCSS插件,以及也参加PostCSS的开发。

除此之外,Mark Otto也谈到将在Bootstrap v5中引入PostCSS:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.——@Mark Otto

PostCSS刚刚被CodePen.io引用,可以通过CSS设置中设置:

图片 3

PostCSS正在增长,是快速的增长,而且没有充分的理由。

8. 总结

最后用一张图来总结这篇文章所表达的内容,感谢@anjia帮忙画的这张图。

图片 4
图2. 总结这篇文章

非常感谢李松峰老师和安佳姐姐帮忙校验这篇文章。

测试你的前端代码 – part1(介绍篇)

2017/04/21 · 基础技术 · 测试

原文出处: Gil Tayar   译文出处:胡子大哈   

图片 5

最近我的一个刚刚接触前端开发的朋友,问我如何测试他的 app。当时是电话交流的,大家都知道测试是一个繁杂的知识体系,不可能通过电话说清楚,不过我也跟他保证了要给他发一份“测试指引”。

然后我通过 Google 搜索测试相关的主题,找到了非常多的文章,但是我对于这些文章所介绍的深度并不满意。另外对于一个前端新手来说,我找不到一个综合性的教程能让前端小白逐步深入地进行应用测试。我想要找的是理论结合实践的前端测试教程。

所以我决定自己写一个前端测试系列。这里就是这一系列的开始。

PostCSS不是一个清理/优化工具

Autoprefixer插件成功的导致了大家对PostCSS的一个普遍看法:PostCSS是用来清理CSS、优化速度和处理跨浏览器兼容性。直到今天,我学习了PostCSS大量的插件,我有了自己的看法。

是的,有很多奇秒的插件提供了清理和优化代码画能,但这也仅是PostCSS一小部分。

7. 性能监控

最后,你可能需要一个性能检测工具来持续监视网站的性能。

结语

那么你的测试到底在什么测试层级上呢?很多人说有一个测试金字塔——大量的单元测试,少部分的集成测试,非常小部分的端到端测试。但是我不想讨论这些,这个系列文章我希望讨论的是如何对前端代码进行单元测试、集成测试和端到端测试。

接下来的文章,第一篇将会介绍前端单元测试,第二篇会介绍端到端测试,第三篇会介绍集成测试。

应这个系列的博文需要,我写了一个小 app——计算器——我用它来展示如何进行不同类型的测试。你可以在这里获取它的源代码,不过请注意现在还不完整,当整个系列博文完成的时才算完整。

1 赞 2 收藏 评论

图片 6

到了总结的时候了

你需要知道的第一件事情就是PostCSS速度很快,这并没有充分理由,所以现在是时候该清晰的理解它,并帮助你如何在开发过程中使用PostCSS。

4. 交付优化

交付优化指的是对页面加载资源以及用户与网页之间的交付过程进行优化。

什么是测试?

我把测试定义成:是一段检测你的应用代码(也叫“生产代码”)是否按预期执行的代码。有些人称之为 TDD(Test-Driven Development 或者 Test-Driven Design),但是 TDD是一种特定的测试方法,它先写测试,然后用测试来驱动产品的设计和实现。

坦率地讲,我认为在生产代码完成之前写测试代码,还是在完成之后写测试代码并不重要。只要你写了足够多的测试样例测试你的生产代码,直到你对你的生产代码已经足够有信心就好。但是有很多人(包括我所尊敬的人)认为顺序很重要,这里我持自己的保留意见。

一个不好的现象是现在工业界已经把测试和 TDD 的概念混淆在一起,这样对于写生产代码的开发者所写的测试代码,就没有一个标准术语来称呼了。我倾向于叫它开发测试,或者普通测试。如果你对 “TDD vs 普通测试” 的讨论感兴趣,可以看这里,不过我建议你把我这个系列博文看完再参与讨论。

模块化

另一方面,PostCSS具有很可用的插件,你可以根据自己所需尽可能使用多的选择或尽可能少选择。

如果仅想用PostCSS让CSS是更有效率和让浏览器更友好的话,加载一些优化插件,你就可以闪人了。

如果仅想用POstCSS作为预处理器的话,使用一些语言扩展插件就OK。

PostCSS的基本原理是粒子化,模块化。简而言之,没有处理多个功能的笨重插件。相反,每创建一个插件,就是一个功能。

例如,你可以根据自己自己喜欢的语法做选择和创建自己或自定义自己的预处理器。或者,你可以加载PerCSS包,可以自动访问几个语言的扩展插件。

无论你是想使用PostCSS什么功能,你都只需要根据你自己特定目定安装所需的插件。意思就是说,你不需要安装任何依赖的插件。

4.1 异步无阻塞加载JS

JS的加载与执行会阻塞页面渲染,可以将Script标签放到页面的最底部。但是更好的做法是异步无阻塞加载JS。有多种无阻塞加载JS的方法:deferasync、动态创建script标签、使用XHR异步请求JS代码并注入到页面。

但更推荐的做法是使用deferasync。如果使用deferasync请将Script标签放到head标签中,以便让浏览器更早地发现资源并在后台线程中解析并开始加载JS。

测试的类型

另外一个新手学习测试很容易有疑问的地方是:有很多种不同的测试类型。如果你提前做了点功课的话,你可能听说过(这里列出部分测试方法列表):单元测试、验收测试、集成测试、端到端测试、组件测试和服务测试。

更糟的是,当谈到了上面某一个具体的测试时,不同的人又有不同的理解。

这里再次说明我的观点,我认为叫什么名字都不重要,因为各种测试的定义都不难理解。所有的测试都分布于“测试光谱”中,光谱的一头是单元测试,另一头是端到端测试(后面统一称为 E2E 测试)。

PostCSS特别之处

  • 多样化的功能插件,创建了一个生态的插件系统
  • 根据你需要的特性进行模块化
  • 快速编译
  • 创建自己的插件,且具可访问性
  • 可以像普通的CSS一样使用它
  • 不依赖于任何预处理器就具备创建一个库的能力
  • 可以与许多流行工具构建无缝部署

2.1 数据读取速度

事实上数据访问速度有快慢之分,下面列出几个影响数据访问速度的因素:

  • 字面量与局部变量的访问速度最快,数组元素和对象成员相对较慢
  • 变量从局部作用域到全局作用域的搜索过程越长速度越慢
  • 对象嵌套的越深,读取速度就越慢
  • 对象在原型链中存在的位置越深,找到它的速度就越慢

推荐的做法是缓存对象成员值。将对象成员值缓存到局部变量中会加快访问速度

为什么测试?

我不打算在这里讨论为什么要进行测试。如果你不想写测试,那你就不写。不过你需要手动地一遍又一遍地测试你的 web 应用,这简直糟透了。那些讨厌的 bug,会不断地过来讨扰你。把这样的代码部署到生产环境,将是你噩梦的开始。

所以,我不打算深入讨论为什么要进行测试。

你可以像使用CSS一样使用PostCSS

大多数PostCSS插件不需要使用自定义的语法,其实它就是典型的预处理器。相反,它们可以应用常规的CSS语法。这也意味着,你可以使用PostCSS就像是使用CSS一样。比如说,你要完成一个前端框架,你完全可以使用别人项目中的文件,例如Normalize.css文件。

这也意味着,你不需要固定使用一个特殊的预处理器,比如说Stylus、Sass或LESS,因为你总是可以应用PostCSS编译后的CSS。例如,你使用Sass编写的Foundation,完全可以使用PostCSS的优化和未来语法的插件生成新的CSS文件。

4.4.2 preconnect

preconnect用于启动预链接,其中包含DNS查找,TCP握手,以及可选的TLS协议,允许浏览器减少潜在的建立连接的开销。

<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>

1
2
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

光谱的另一端——端到端测试

上面介绍了以一个单元为单位的测试。现在介绍端到端测试——测试整个应用。测试过程中,应用的所有配置会设置成和生产环境一样,应用中的一切都会被测试到。

这两个是“测试光谱”的两端。上面提到的其他测试方法,都是分布在这两个极端中间。他们的基本思路是逐步扩大测试范围,被测试的代码越来越多,mock 的代码越来越少。

很多人把这两个极端测试中间的部分叫做“集成测试”,但是对于 TDD 崇尚者们来说,集成测试是另一个完全不同的概念。在本系列文章中我将会使用这个概念模糊的名字——集成测试,具体说来就是:测试多个单元,但不是测试全部单元。

PostCSS不是后处理器

PostCSS名称中有一个”post”单词,但它不是一个真正的”后处理器“。后处理器通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效,常做的一件事情就是给CSS属性添加浏览器私有前缀。然而,PostCSS并不局限于这种操作。正如上面提到的,它可以像一个预处理器。

最好的也就是视PostCSS为处理器。PostCSS创造者Andrey Sitnik在Twitter上这样描述的:

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.https://github.com/postcss/postcss …

Maxime Thirouin作为PostCSS贡献者和插件开发人员,他在Twitter上说,PostCSS中的”post”指的是加工,它可以让CSS变得更好,甚至是超越CSS。

It’s not post-processing if it happens before hitting the browser. @prefixfree is a post-processing tool. @PostCSS is not.——by @HugoGiraudel


@HugoGiraudel nobody in postcss contributors is using this expression anymore. Now it is Postcss like “css and beyond” —— by @MoOx

4.4.4 prerender

prerender用于标识下一个导航可能需要的资源。浏览器会获取并执行,一旦将来请求该资源,浏览器可以提供更快的响应。

<link rel="prerender" href="//example.com/next-page.html">

1
<link rel="prerender" href="//example.com/next-page.html">

浏览器将预加载目标页面相关的资源并执行来预处理HTML响应。

测试光谱

简而言之

PostCSS是什么?最好的定义来自于PostCSS自身项目在github上的描述:

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

简而言之,PostCSS是CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。

本质上是没有很制PostCSS插件操纵CSS,也就是说它可以适用于任何CSS。只要你能想到的,你都可以编写一个PostCSS插件,让它来转成CSS。

PostCSS插件可以像预处理器,它们可以优化和autoprefix代码;可以添加未来语法;可以添加变量和逻辑;可以提供完整的网格系统;可以提供编码的快捷方式……还有很多很多。

4.4.3 prefetch

Prefetch用于标识下一个导航可能需要的资源。浏览器会获取该资源,一旦将来请求该资源,浏览器可以提供更快的响应。

<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials"> <link rel="prefetch" href="/library.js" as="script">

1
2
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

浏览器不会预处理、不会自动执行、不会将其应用于当前上下文。

ascrossorigin选项都是可选的。

PostCSS不是未来的新语法

有一些优秀的PostCSS插件允许你写未来的语法,即使这些CSS语法尚未得到广泛支持。然而PostCSS并不是天生下来就支持未来语法。

有一些开发人员表示不愿意使用PostCSS就是这个原因之一,因为他们不知道如何让自己适应去写未来的CSS。然而,写未来的语法只不过是利用PostCSS之一。

如果你选择了,PostCSS完全改变你的开发过程。

1.2 设定目标

  • 100毫秒的界面响应时间与60FPS
  • 速度指标(Speed Index)小于1250ms
  • 3G网络环境下可交互时间小于5s
  • 重要文件的大小预算小于170kb

以上四种指标的设定都有据可循。详细信息请查看RAIL性能模型。

可以创建任何自己想要的插件

PostCSS是用JavaScript编写的插件,这样只要能编写JavaScript的就可以创建一个自己想要的插件,达到自己的目的。值得庆幸的是,就算你不是专业的JavaScript开发人员,但使用PostCSS开发插件也就只需要短短的几个小时,就可以开发出一个全功能的插件。

在项目中使用像Stylus、Sass和LESS这样的预处理器能很好的工作,但它们不能成为每个人的一切。必须决定哪些特性能更好的为他们的用户群体服务。比如说,如果你想要一个功能,你可以做这样的功能,但它有可能会被其他人在项目中使用,但也很有可能其他人在项目中不需要使用。如法自由的结合到项目需求中。

即使有一个功能需求被认为适合项目需求,但项目维护人员或许没有时间去开发它。如果你自己又不具备这方面的技术水平,那么你也只能想想而以,无法使用上。

但是使用PostCSS,你不需要问任何人。如果你想要一个新特性,你自己完全可以做到。从我自己的经验来说,只要你略懂点JavaScript技术或经验,你就可以使用PostCSS创建自己需要的功能插件,而且自己是完全可控的。

在本系列后面的教程中,将通过创建一个PostCSS插件为例,告诉你如何创建PostCSS插件步骤。即使你认为自己不是一位JavaScript专家,我觉得你也会发现自己完全可以创建一个PostCSS插件。

5.1 使用预编译

拿Vue举例,如果您使用单文件组件开发项目,组件会在编译阶段将模板编译为渲染函数。最终代码被执行时可以直接执行渲染函数进行渲染。而如果您没有使用单文件组件预编译代码,而是在网页中引入vue.min.js,那么应用在运行时需要先将模板编译成渲染函数,然后再执行渲染函数进行渲染。相比预编译,多了模板编译的步骤,所以会浪费很多性能。

PostCSS可以与流行工具无缝衔接

由于PostCSS是基于JavaScript编写,所以它不需要你安装Ruby等,而且你可以将其集成在多个开发者工具中。

  • PostCSS插件可以通过Grunt,Gulp,Webpack,Broccoli,Brunch和END等工具一起使用
  • CodePen允许你使用PostCSS
  • Prepros支持Autoprefixer和cssnext插件
  • postcss-use插件允许你使用简单的CSS规则加载其他插件
  • 你可以使用一个package.json文件,通过npm可以在命令终端输入npm install自动安装任何PostCSS插件。这样可以在项目中共用PostCSS插件,也不用担心插件的配置与变化

我们将通过本系列的“快速入门指南”这部分告诉大家如何设置和使用PostCSS,敬请期待。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:PostCSS浓郁学习,测量试验你的前端代码

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文