热点回顾第一期,Web性能优化分析

作者: 前端知识  发布:2019-08-29

工具

《Myth》

Myth 是一个CSS预处理器。通过它,你可以专注于写纯CSS代码,而不必担心浏览器的版本(不支持新特性)。

《Unison.js – 在CSS、JS和HTML中统一断点》

Unison.js是一个插件,它允许你在一个地方定义断点,然后自动同步到JS、CSS和HTML中。

赞 收藏 评论

2. 渲染阻塞的JavaScript

如果在解析HTML标记时,浏览器遇到了JavaScript,解析会停止。只有在该脚本执行完毕后,HTML渲染才会继续进行。所以这阻塞了页面的渲染。

为了解决它

在<script></script>标签中使用 async或defer特性。

  1. <script async>将会在HTML解析时下载该文件并在下载完成后马上执行。
  2. <script defer> 将会在HTML解析式下载该文件并在HTML解析完成后执行。

例如: async and defer都在Google Analytics中使用

点击查看async 和defer的浏览器支持。

文章与教程

《通过Emmet来为你的CSS开发提速》

Josh Medeski 在这篇文章中分享了一些通过Emmet来帮助你更高效地写CSS的技巧。

《响应式相册》

Terry Mun 写的一篇教程,介绍了如何开发一个用来展示相册的Wordpress插件。展示相片的效果很好,请参见这个Demo。

《BEM,多修饰符,尝试使用属性选择器》

Tommy Marshall 在这篇文章中探索了一种让你的前端代码保持 DRY 的新方法。不过,这种方式也有多个缺陷,参见作者的介绍和文章的评论。

《Firefox 29支持CSS变量》

Firefox 29 开始支持CSS变量了,或者称之为自定义属性。你可以定义CSS变量,然后在样式中引用它们。

《Sasstraction》

CSS变量应该继续交给预处理器(例如:Saas, LESS),还是浏览器?

《如何解决在Google Chrome下的难看的字体渲染问题》

Christian Lavie 展示了如何优雅地解决WebFonts的渲染问题。这种方案的唯一不足之处就是你不得不自己保存字体相关的文件。

网站优化的步骤

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

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

CSS 热点回顾第一期

2013/12/30 · CSS · CSS

本文由 伯乐在线 - 黄余粮 翻译。未经许可,禁止转载!
英文出处:css-weekly。欢迎加入翻译组。

CSS的热点回顾涉及的内容包括:最新推荐阅读的文章、业界的动态、最新推荐的工具和各种创意。尽管每一期可能有所不同,但大体是这个结构。如果你也在跟进CSS这块的技术,欢迎投递分享CSS技术文章与资讯到这里,或者加入我们的 前端开发 小组,同我们一道翻译与传播优质的内容。

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

推荐阅读

《用Chrome DevTools来为你的网站提速》

Addy Osmani 通过这篇文章讲述了如何使用Chrome DevTools来让你的网站更流畅。

《创建一个简单的响应式HTML邮件》

在这篇教程中,Nicole Merlin 展示了如何创建一个简单的响应式HTML邮件,并且确保可以在每一个邮件客户端(包括手机邮件客户端和App)上正确显示。其方法就是采用最小的Media query和不固定宽度的方式,尽可能地保证兼容性。

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

关于作者:黄余粮

图片 1

伯乐在线发起人。热爱技术和产品,崇尚极客文化。 个人主页 · 我的文章 · 13 ·  

图片 2

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

速度指标

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

速度指标越低越好。

图片 3

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

图片 4

DOM泄漏

对DOM元素的引用会导致DOM泄漏并且阻碍自动垃圾回收(GC)的进行。

来看一个例子

1
2
3
4
5
<div>
    <div id="container">
        <h1 id="heading">I am just a heading nothing much</h1>
    </div>
</div>
1
2
3
4
5
6
7
8
var parentEle = document.getElementById('container'); //get parent ele reference 得到父元素的引用
 
var headingEle = document.getElementById('heading'); //get child ele reference 得到子元素的引用
 
parentEle.remove(); //removes parent element from DOM 从DOM中移除父元素
 
//but its child ref still exist, So parentEle won't collect GC'd and causes DOM Leak
//但是它的子元素引用仍然存在,所以parentEle不会被GC回收,因此导致了DOM泄漏。

将它的引用设置为null即可修复DOM泄漏。

1
headingEle = null; //Now parentEle will be GC'd

上面就是前端开发者常遇到的问题。今天就讲到这。如果你喜欢我的文章,请分享或者在下面评论。谢谢!!

本文由金沙澳门官网发布于前端知识,转载请注明出处:热点回顾第一期,Web性能优化分析

关键词: 金沙澳门官网