摘要：最近遇到一个问题：给一个div做position:fixed时，div里的图片在小米1s自带浏览器里面图片显示模糊了，而其它浏览器图片都是清楚的（说明：已经是2倍的图片了）。代码如下：只要将posiiton:fixed去除时，图片又是清晰的。经过一方排插和google，确定该问题是andorid... 阅读全文

摘要：如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接下来将一一介绍，本文集中介绍DOM Ready。定义 DOM Ready，指的是页面解析完成的时间，在高级浏览器里有对应的DOM事件 - DOMContentLoaded，Firefox官方的解析如下：. 阅读全文

摘要：Microsoft Internet Explorder8团队就Alexa排名前100名的网站页面的时间消耗做了一次性数据分享：布局：43.16%渲染：27.25%HTML：2.81%调度：7.34%DOM：5.05%格式化：8.66%JScript：3.23%其它：2.5%Ajax应用：一个email进程的打开过程时间消耗：布局：9.41%渲染：9.21%HTML：1.57%调度：7.85%DOM：12.47%格式化：38.97%JScript：14.43%其它：3.72% 阅读全文

摘要：Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%；Amazon每增加100ms网站延迟将导致收入下降1%；雅虎如果有400ms延迟会导致流量下降5-9%。 Steve研究表明前端问题可能消耗整体时间的80%只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80~90%时间花在了下载页面的所有组件上浏览器是否足够快的定义，下面引述Jakob Nielsen：基于Web应用的响应时间准则和所有其它应用一样。37年来准则毫无变化，所以也不太可能因新技术的出现而发生改变。0.1秒：用户直接操作UI中对象的感觉极限。例如，从用户选择表格中的一列到该列高亮或向用户反 阅读全文

摘要：渲染树：表示DOM节点如何显示。在DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点。该节点又叫盒子或帧，符合CSS模型的规定，为一个具有padding、margin、border和position的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示页面。 当DOM的变化影响了元素的几何属性（宽、高、增加行数），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性和位置也因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树（重排--reflow）。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中（重绘--repaint）。重排（reflow）：（1）添加或删 阅读全文