一、背景： 智能终端的普及改变了人们对互联网的使用习惯，终端环境对页面性能有更高的要求，接下来以一张图来分析：1s内渲染一个移动页面 网络整体消耗来分析： 1、服务器响应应该小于200ms 2、尽量少的重定向 3、尽量少的第一次渲染的请求 4、避免过多堵塞的js和css堵塞 js执行效率和渲染效率： 1、...
首先看一个图： 注：右图在我们工作中经常用到 我们专注的web性能指标有那些？ 1、页面加载时间 从页面开始加载到页面onload事件触发的时间。一般来说onload触发代表着直接通过HTML引用的CSS，JS，图片资源已经完全加载完毕。 2、全部页面加载时间 全部页面载入时间指从最初启动浏览开始，直到所有元素都被加载完成后，在2秒后仍然没有网络活动的时间。 0-2秒：用户体验最好，打分1002-8秒：用户可...
本文由 伯乐在线 - J.c 翻译，sunbiaobiao 校稿。未经许可，禁止转载！英文出处：www.deanhume.com。欢迎加入翻译小组。 最近，我参加了在伦敦举办的Facebook移动开发者大会。在那天期间，有很多的交谈，但真正让我关注的是一场关于性能的，名为“让m.facebook.com更快”的交流会，它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。 Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome ...
写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低...
CSS 的性能优化： Style 标签的相关调优 特殊的 CSS 样式使用方式 CSS 缩写(color,上下左右合并等) CSS 的声明（页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。样式与元素的分离，两者独立维护） CSS 选择器（id选择器效率最高，其他子选择器，匹配都会减慢速度）（child,不用太泛的选择器） css的style样式单词简写优化（不要用太长的名称） 标...
前言 上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使用，马上就要搞定了，之后会放出 (笑脸)。 本节内容会跟着上一节的内容继续完善，首先会补充CSS选择器的浏览器支持情况（主要是说IE），比如我们最常用的s1,s2,…,sN群组选择器在IE7时才被支持，并且IE7还支持了很多我们没有想到的选择器，如子元素选择器，属...
CSS的性能也会影响页面的请求数加载速度及渲染效率，总结CSS的性能优化主要有以下几方面： 一、CSS的文件大小压缩，主要对字节数进行压缩，CSS文件带大小会增加网络额外开销，尤其是访问量比较大的页面。主要方法有以下： 1.减少CSS文件中空格等不必要的多余字符，语法上尽可能多的应用缩略写法（如 margin 10px;）。 2.有点浏览器支持解压gzip格式的压缩文件，可设置服务器将相应文件压缩成gzip包。 二、对CSS进...
这是一个老生常谈的内容了，90%的面试里都会问到，在这里只是再简单的整理一遍，以加强记忆巩固。 一 减少Http请求：主要可以通过合并图片、Css、Js和页面延迟加载等方法减少请求次数； 二 减少repaint和reflow:主要是指要尽量减少页面的重新渲染和重新布局，这个实际工作中基本是不可避免的，就合理使用即可； 三 减少对DOM的操作：主要是指尽量减少对DOM的增删改查这一类的节点操作，尽量使用局部变量，这个在某些项...
第一条，DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。 第二条，如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。 第三条，不要一条条地改变样式，而要通过改变 class，或者 csstext 属性，一次性地改变样式。 // badvar left = 10;var top = 10;el.style.left = left + "px";el.style.top = top + "px";// good el.classN...
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Mller. fixes from Paul Irish and Tino Zijdel// MIT license(function() { var lastTime = 0; var vendors = [ms, moz, webkit, o]; for(var x = 0; x < vendors.length && !window.requestAnimation...
你遇到过性能很差的网页吗？ 这种网页响应非常缓慢，占用大量的 CPU 和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。 你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，怎样才能提高性能呢？ 本文将详细介绍性能问题的出现原因，以及解决方法。 一、网页生成的过程 要理解网页性能为什么不好，就要了解网页是怎么生成的。 ...
知道我们可以通过卸载CSS图形特性到GPU（图形处理单元）来硬件加速CSS的图形特性，以获得在浏览器中的更好渲染效果吗？ 如今大多数计算机都有适合显卡的硬件加速功能。因此，我们就可以为那些大功耗的利用GPU的能量，进而我们的网站和应用可以在CPU上的浏览器中运行得更快。 在这篇文章，我们将 CSS 硬件加速应用在桌面和移动浏览器上。 在桌面和手机浏览器上的CSS硬件加速 有没有想过一些 CSS 动画怎么如此顺利运行在...
css3出来已经很久了，现在来谈判断浏览器是否支持某个css3的属性虽说有点过时了，但是还是可以谈谈的，然后，此篇主要谈的不是判断是否支持，而是怎么封装更好，为什么这么封装，欢迎吐槽。 入题，判断浏览器是否支持css3 transition，方法很简单，只需要下面这句代码就行了： transition in document.body.style chrome和ie支持document.body，但是Firefox不支持，Firefox支持document.documentElement，对于没有doctype...
如何让页面尽可能早地渲染页面，页面更早可见，让白屏时间更短，尤其是无线环境下，一直是性能优化的话题。 页面可见时间 页面可见要经历以下过程： 解析 HTML 为 DOM，解析 CSS 为 CSSOM（CSS Object Model） 将 DOM 和 CSSOM 合成一棵渲染树（ render tree ） 完成渲染树的布局（layout） 将渲染树绘制到屏幕 layout 由于 JS 可能随时会改变 DOM 和 CSSOM ，当页面中有...
http://www.mmtrix.com/ 官网 http://www.mmtrix.com/evaluate/result?popup=true 网页检测