菜单

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

2019年11月28日 - 银河官方网站
Web性能优化分析,热点回顾第一期

CSS 热点回顾第一期

2013/12/30 · CSS ·
CSS

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

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

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

推荐阅读

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

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

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

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

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

文章与教程

《通过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

工具

《Myth》

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

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

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

赞 收藏
评论

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

关于作者:黄余粮

图片 2

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

图片 3

网站优化的步骤

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

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

速度指标

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

速度指标越低越好。

图片 4

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

长话短说

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

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

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

渲染阻塞

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

图片 5

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

浏览器渲染的步骤

  1. 首先浏览器解析HTML标记去构造DOM树(DOM = Document Object Model
    文档对象模型)
  2. 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  3. 在将DOM和CSSOM树结合成渲染树之前,JS文件被解析和执行。

现在你知道浏览器如何进行解析了,让我们看看是哪一部分阻塞了渲染树的生成。

1. 阻塞渲染的CSS

有人认为CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用。

为了解决这个渲染阻塞,跟着下面的两个步骤做

  1. 将关键CSS内嵌入页面中,即将最重要的(首次加载时可见的部分页面所使用到的)style写入head中的 <style></style>里。
  2. 移除没用到的CSS。

那么我是如何找出没用到的CSS的呢。

  1. 使用Pagespeed
    Insight 去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据。例如:Flipkart的Pagespeed
    Insight统计结果。
  2. 使用Gulp任务,如gulp-uncss或是使用Grunt
    任务,如grunt-uncss。如果你不知道他们是什么,请阅读我之前的文章。

##专业小贴士

  1. 使用CSS
    Stats保证页面中完全没有未被用到的元素,唯一的样式和字体等等。
  2. Pagespeed Insight Chrome
    插件.
  3. Tag Counter Chrome
    插件.

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的浏览器支持。

内存泄漏

内存泄漏和页面臃肿 是前端开发者所要面对的问题之一。让我们来看看如何发现并解决内存泄漏。

在JavaScript中寻找内存泄漏

使用Chrome Task
Manager(任务管理器)去检测app所使用的内存以及js内存(总体内存+实时内存)。如果你的内存一直随着你的每次操作而提高,那么你可以怀疑有内存泄漏了。

下面是Chrome Task Manager的截图。

图片 6

Chrome DevTools分析

使用 Heap Profiler 去查看内存泄漏。打开Chrome devTools 然后点击profiles
标签,接着选中 take heap snapshot。如果你不了解Chrome
DevTools,请阅读之前的文章.

图片 7

Heap Profiler有四个快照视图(snapshot view)

  1. Summary 视图 –
    展示对象的总体数量以及它们的实例总数,浅部(Shallow)大小(对象本身的内存大小)以及保留(Retained)大小(自动GC发生后所释放的内存大小+无法执行到的对象的内存大小)。
  2. Comparison 视图-
    用于比较一个操作的前后的两个或多个快照,可以检测内存泄漏。
  3. Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow
    对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
  4. Dominators 视图-
    展示了 dominators 树的堆图。

点击了解更多 Heap
profiler。

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

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图