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 网页检测
现在 动辄几兆大小的页面加载量 ，让性能优化成了不可避免的热门话题。WEB 应用越流畅，用户体验就会越好，继而带来更多的访问量。这也就是说，我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DOM 元素是否都考虑到了在性能方面的影响。在说性能优化之前，我们有必要理清浏览器视觉绘制方面的两个术语： Repaint（重绘）：如果某些操作影响了 DOM 元素的可见性，但又没有影响布局，那么就会发生浏览器的重绘...
一、先来看一个例子 下面这个例子来自某外文，我这里简单转述下。 视差滚动现在不是挺流行的嘛，然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候，发现，页面的绘制性能掉到了每秒30帧，这种帧频人眼已经可以感觉到一定的顿挫感了。 后来，参考一些其他同事还是同行的建议，做了一番优化，然后，页面的渲染性能—— 这优化之前完全就是便秘，屎拉不出来的感...
随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面的事情。 首先，为什么要最移动页面进行优化? 纵观目前移动网络的现状： 移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计： 71%的用户期望移动页面跟PC页面一样快，74%的用户能容忍的响应时间为5秒，所以我们必须保证移动端页面有足够的速度。 移动...
1. 请减少HTTP请求 基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。...