performance相关的贡献

用户感知速度:如何让你的移动Web应用像Native那样快

快到底是个什么概念?对工程师来说仅仅是几个冰冷的数字,对用户来说呢?他们并不关心你的页面进行了多少次HTTP请求,不关心你渲染的帧率,他们关心的只是你的页面用起来爽不爽,我们需要做的就是让页面看起来和数字上表现出来的快是相当的,对移动应用作者给出了几条不错的建议,在PC端同样适用~

High Performance Animations

Paul Lewis 和 Paul Irish为你解析哪些动画效果可以达到60FPS的速率,而哪些动画又可能让你的网页看起来很卡顿,遇到这些问题该咋办?各种动画的Library用起来很顺手,你知道背后工作原理么?

用pointer-events实现60FPS的高性能滚动

可能你没有觉察到,如果给页面上很多元素添加了hover样式,滚动页面的时候,这些元素会不断的被重绘,这样会加重浏览器的负担,从而可能让页面变的很卡,而实际上用户的滚动动作持续时间很短,有没有办法优化下呢?答案是肯定的,文中有人提出用pointer-events来实现,基本能解决问题,但是别忘了看文后评论哦。

Effeckt.css:跨浏览器的CSS动画(下)

随着硬件和浏览器的不断进化,之前很多只能用Javascript完成的动画内容,现在只需要CSS就能完成,并且效果更流畅,Effeckt.css是这方面的黑马,相比Animate.css他更专注性能,作者的声明是所有的动画能以60FPS的速率运行~

使用Beacon的最佳性能实践

从用户端收集数据通常都采用Beacon的方式,比如GA、New Relic等服务,有时候你会需要用到自己的Beacon,来上报有价值的信息,那么使用Beacon的时候有哪些好的实践?这里做了梳理~

图片压缩简明教程

根据HttpArchive的数据统计,所有网页中图片内容的占比最大,如何优化图片的下载和展示对于提高页面性能非常重要,那么图片压缩到底是咋回事儿?都有些什么工具?这里讲得很详细~

如何提高页面滚动时的性能

当你写好了所有的样式和交互之后,可能会觉得浏览器的滚动是自然而然的事情,不知道你有没有遇到过1些滚动起来非常卡顿的网页,他们给你什么感觉?为啥浏览器会变成这样呢?看看这篇文章,可能让你的网页滚动更流畅~

再说 CSS 性能:选择符和属性

虽说优化 CSS 的性能远没有优化网站后端和静态资源分发速度见效那么明显,但是站在用户的角度,即使是再小的优化,用户也能从中受益。使用不当的 CSS 会占用用户电脑更多的资源,也可能会让页面变的卡顿,有关 CSS 性能的方方面面~

图片优化工具概览

据HttpArchive的统计,目前的网页体积大小约1.5M,其中超过50%是图片,对PC用户来说这还不算什么,但是对移动用户,就是致命的伤害,针对包含大量图片的网页有些什么优化工具呢?从开发流程到线上部署都有很多可做的~

AirBnB的前端性能调优

当1个创业公司经历了野蛮生长和扩张之后,就需要在其所在的领域精耕细作,而技术团队则会话不少的精力进行应用的性能调优,看看AirBnB在这个过程中都干了些什么,应该对你有些启发。

DevTools: Visually Re-engineering CSS For Faster Paint Times

Sometimes it’s the small, seemingly insignificant things that can be the greatest performance bottlenecks in your application. Watch your CSS and also keep in mind that it’s quite plausible to have poor paint times due to non-optimal JS, such as onscroll handlers firing multiple times or occupying a great deal of time.

为什么我的 CDN 在移动端比较慢?

很多团队进行移动端的性能优化时,从实际采集到的数据中发现在移动端使用 CDN 效果并不明显,于是产生了 CDN 在移动端比较慢的结论,Ilya Grigorik 深入剖析了产生这种现象的原因,最后的结论是:CDN 并不慢,你尽管使用,但是需要让服务商在节点分布上多做优化~

页面运行时的性能检查清单

我们花了很多的时间来优化页面的下载时间,当这个下载时间够快,用户来到你的网站上,多数时间不再是等待,而是与页面交互?页面交互的性能存在瓶颈或者Bug么?这里是1份页面运行时的性能检查清单,让你的页面在用户的浏览器里面更流畅~

Chrome中的Prerender详解

Chrome从V13开始就支持1种新的网页提速方法:Prerender,开发者使用简单的标签就可以指使浏览器预加载某个页面,当用户真正点击的时候,瞬间就能打开,能极大的提高用户体验。那么什么场景下该使用Prerender?浏览器这边又有什么限制?随之而来的网页统计问题如何解决?

High Performance Browser Networking

Ilya Grigorik在Velocity Europe 2013上的演讲,演讲标题就是他的新书标题:High Performance Browser Networking,内容上可以说是那本书的精华版,深度剖析各种网络的性能及其影响因素,以及你所能做的优化~

Phantomas: 全方位收集网页性能指标

Phantomas是1个基于PhantomJS的能够帮你收集网页各方面的性能指标的开源工具,想做竟对分析?想做自己网站的主动监控?指标非常全面,大到JS多少小到节点数、DOM操作数都能获取到,并且很容易和现有的CI系统集成。

Prebrowsing: 给你的网页装上雷达

雷达能够在某些事件发生之前提前捕捉到,如果浏览器也能提前捕捉到用户接下来要去哪里,该有多好?利用各种Prebrowsing的技巧,你的网站在用户眼中可能就是瞬间就加在完成了。Steve Souders总结了各种Prebrowsing技术,并讨论了其与浏览器缓存的区别,以及缓存的局限,非常不错的文章~

使用 BigRender 优化页面渲染速度

研究过禁用了JS的淘宝首页么?Facebook为优化后端时间较长带来的延迟搞出来BigPipie,而淘宝的同学说,后端时间小于100ms时,再用BigPipe可能收效甚微,于是搞出了BigRender优化页面的渲染时间,工作原理是什么呢~

boomerang:开源的RUM库

想测量网站的性能,仅仅在实验室里搞搞是不够的,你需要知道实际用户那头的性能数据,如何用Javascript收集load,domready,首屏,关键部件可用时间等等性能参数?又如何测量用户的带宽和网络延迟?boomerang肯定对你有用~

性能监控: 主动和被动该如何选择?

开展性能工作肯定离不开监控,监控还分为主动监控和被动监控,被动监控指RUM(Real User Monitoring),也是很多同学正在努力的地方,来自Volecity 2013的演讲将两种方式进行了对比,并总结了实施时可能用到的各种工具,干货很多~

Better JavaScript animations with requestAnimationFrame

For a long time, timers and intervals have been the state of the art for JavaScript-based animations. While CSS transitions and animations make some animations easy for web developers, little has changed in the world of JavaScript-based animation over the years. That is, until Firefox 4 was released with the first way to improve JavaScript animations. But to fully appreciate the improvement, it helps to take a look at how animations have evolved on the web.

如何抽取网页所需的关键 CSS?

页面下载的 CSS 非常多,可是首屏渲染会用到的 CSS 可能连 20% 都不到,为了让首屏渲染的更快,可以考虑将首屏需要的 CSS 剥离出来内联到页面中,那么如何抽取首屏渲染所需要的 CSS?这个基于 CasperJS 的脚本能帮你完成~

前端性能的未来

Steve Souders认为,随着网页变得越来越复杂,虽然最佳实践就那么几条,但是能把他们做到极致的还是少数,公司需要专门的性能小组,才能真正从高性能中受益,你会这么投入的搞性能么?

RequestAnimationFrame:带给你如丝绸般细腻的动画

传统的JS动画要么使用setTimeout,要么使用setInterval,但大家都知道这些东西还是不太靠谱的,有没有遇到过JS动画卡顿的窘境,究其原因就是动画的执行密度和效率问题,多数现代浏览器提供的RequestAnimationFrame会让你的动画如丝绸般细腻润滑?如何使用呢?

为什么网页中图片的尺寸需要恰到好处?

Those questions aside, it’s already apparent that serving large images to the browser has some potentially series side effects from a rendering perspective. On the test page with 6x images (not unusual at the moment on many responsive sites), the combination of resizes and decodes added an additional 278ms in Chrome and 95.17ms in IE (perhaps more if we had resize data) to the time it took to display those 10 images. That much time spent on decoding and resizing can not only delay rendering of images, but c

移动网页应用开发的性能建议

iScroll 的作者在这片文章里总结了几个移动网页应用开发的性能建议:尽量简单、尽量少操作DOM、尽可能缓存、轻量级的回调,虽然主要针对移动应用开发,对PC网页开发还是有些参考意义的~

如何避免网页中的布局垃圾(Layout Thrashing)

如果你用Javascript粗暴频繁的读写DOM,就会发生Layout Thrashing这种现象,实际上就是会造成浏览器的频繁Reflow,影响页面的性能,那么是这种现象背后的原因究竟是什么?该用什么办法解决呢?看看这篇文章,再看看FastDOM的实现~

InstantClick:带给你比秒开更快的体验

InstantClick 能够在用户 Hover 都网页中的链接时,对链接指向的内容进行预加载,而当点击发生时,预加载的内容瞬间就会呈现出来,让网站的感知速度大幅度提高,同时支持 PC 和移动端浏览器。

Performance Calendar

Real User Monitoring (RUM) allows us to build a picture of how long our pages take to load in an actual visitor’s browser, chart the times and look for patterns, but what if we want to dig further? What if we want to get a better understanding of why some of our outliers are slow, or want to monitor the load time of a third-party component?

BigPipe学习研究

2010 年初的时候,Facebook 的前端性能研究小组开始了他们的优化项目,经过了六个月的努力,成功的将个人空间主页面加载耗时由原来的5 秒减少为现在的2.5 秒。这种新的页面加载技术,称之为Bigpipe。它究竟是如何工作的?

Grunt Cdnify:帮你把静态资源指向CDN

这款 Grunt 插件,能够在代码上线时帮你把页面上的静态资源地址指向你所配置的 CDN,省去手动维护的麻烦,网站太小不需要CDN?看看高性能网站建设那两本书你就找到理由这么做了,前端周刊周末就做了这样的更新,不信?看看页面的源代码~

janodvarko/harviewer

HAR Viewer is a web application that allows visualizing HTTP Archive logs (HARs) http://www.softwareishard.com/blog/har-viewer/

解开浏览器渲染性能的谜团

页面的渲染过程取决于你的Layout和Paint,如果页面变慢了,很可能是这两个环节出了问题,如何判断是Layout还是Paint导致页面变慢?如果原因不在此又作何处理?这篇文章会给你不少启发~

YUI的Combo能完胜浏览器缓存?

使用YUI最为底层框架的同学可能都知道Combo的概念,Combo将1个页面中用到的多个模块打包发送给浏览器,但是如果不同页面需要的模块不完全相同,那些相同的模块就需要重新加载,这样就没法利用浏览器缓存了,两者相比性能到底有何差别?

详解移动设备单击后的300ms延迟

快速响应是任何UI必备的特质,用户触发操作后100ms给出响应,才会有快的感觉,可是不知道你发现没有,在移动设备上上网时,不管单击什么貌似都慢半拍,准确的说是慢了300ms,这300ms到底是怎么产生的?在需要的时候如何禁用浏览器的这种行为?

警惕: 移动设备上的Data URI比外链资源慢6倍

Data URI能帮你把需要用到的图片直接编码到CSS或者HTML文件中,减少请求数,从而提高页面性能,看似是非常合理的推断,但是有同学测试后发现:移动设备上的Data URI比外链资源慢6倍!这是咋回事儿?什么时候该用Data URI?

如何优化 Angular 处理复杂数据时的性能问题?

Angular 用来快速搭建应用原型式非常适合的,因为有 Data Binding、Dependency Injection,还有类似与 Web Components 的 Directives,可是当 Angular 遇到超长列表或者复杂的数据结构时,表现就不如人意,页面会变得很卡,有哪些办法来优化性能呢,这篇文章列出的都是实战总结出来的~

使用r.js来优化你的RequireJS项目

如果你接触过AMD和RequireJS,并且在你的个人项目中开始适用RequireJS来加载代码,你可能有过这样的烦恼,开发时粒度越细越好,项目的Javascript模块越来越多,但是在生产环境网页动辄需要加载十数个模块,能不能做下优化?让生产环境的模块粒度粗点呢?r.js就是为干这个诞生的~

A developer's guide to rendering performance

When we look back over the history of web performance we see a heavy focus on reducing the number of requests and getting files to the browser quickly. Our platform has changed a lot, and while optimizing for network performance remains a crucial part of our jobs, we now have to broaden our performance horizons. Our users also expect smooth scrolling, animations and interactions, even on mobile devices. In short we need to deal with not just how quickly our sites and apps load, but also how quickly they run

Etsy: DIY WebPagetest 的那些事

WebPageTest是1个公开免费的测试网页性能的服务,但是用的人越多就越慢,甚至要和12306一样排队,还好WPO将这个项目开源,你可以自己搭建WebPageTest实例,Etsy的那帮家伙就这样搞了,进展还不错。如果你脑子里闪过类似的念头,这个就很值得借鉴~

什么时候不应该用YUI?

YUI前作者帮你剖析YUI,指出什么时候该用YUI,什么时候该用原生Javascript,什么时候又应该考虑其他的库,以及做出这些选择时该考虑哪些因素。

大量图片页面的性能优化之路

相对于CSS和JS,图片本身对网页的性能影响会更大,因为他的体积通常比较大,而因为业务需要有些页面需要展示非常多的图片,导致加载速度很慢,如何对这种页面做性能优化呢?美团的优化过程和这个很类似,可能也值得你借鉴~

用 Grunt 衡量页面的前端性能

有想过用 Grunt 衡量页面的前端性能么?有了 Phantomas 实现这个很容易啦,每次发布之后对你的页面进行全面的诊断,非常适合与简单的 WebAPP 进行整合,对于大型网站的前端性能监控也存在不少借鉴意义~

Chrome中的JS加载机制

根据Steve Souders的建议,JS文件通常要放到底部,这样能避免页面阻塞,但是随着浏览器的进化,在外部资源加载上表现的越来越智能,Chrome在这方面就做的挺不错,如果你细心看过Chrome中页面加载的瀑布流,应该能看出写端倪~

如何获取页面第1次渲染的时间?

对网页性能的关注应该是全流程端到端的,当用户拿到网页之后,首次渲染时间是1个非常重要的指标,IE10中有msFirstPaint,Chrome中有loadTimes,其他浏览器怎么办?有很多的trick,有人专门做了整理~

Javascript中的AOP编程入门

AOP是1种让你对对象的方法、函数等行为进行增强的技术和方法,利用AOP你能很方便的从外部修改某个对象的方法,也能让你的代码更有层次。

Node 服务器性能调优

这里收录了几篇 Node 服务器性能调优的文章,如何让 Node 服务器处理百万每秒的请求?如何让 Node 服务器突破1.4GB的内存限制?都有真实的实验和数据,如果你在生产环境用 Node,可以看看这个~

Base64 编码到底好还是不好?

做过前端性能优化的同学可能都知道某些时候为了减少网络请求的数量,会把页面中内联或者 CSS 中需要的图片做 base64 编码,但是这样做到底好还是不好?如果不好,是因为什么原因?都做了非常详细的分析。

想看更多类似内容?