跟踪浏览器重绘结果的脚本
作者:puterjam 日期:2009-05-0404May
之前在firefox 3.5上做了一个监控浏览器repaint跟踪的尝试。现在把之前的实验做成一个工具(GreaseMonkey 脚本),可以让大家跟踪页面的重绘情况。同时也能找到reflow的存在可能。
(监控 Google 搜索框的repaint情况)
Repaint 跟踪浏览器的渲染
作者:puterjam 日期:2009-05-0404May
前端优化,从很久就开始了。随着研究的深入,关注的点就越来越多。最近也有不少的前端开发同学在研究浏览器的Reflow和Repaint . 引用以为Yahoo前端开发工程师的分析
repaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变visibility、outline、前景色。"According to Opera , repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree."当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow,都会导致它的子结点及祖先结点重新渲染。
opera 15岁了
作者:puterjam 日期:2009-04-2929Apr
作为未来的前端高手的你不能不知的 Web Workers
作者:puterjam 日期:2009-04-2323Apr
Firefox 3.5 其中一个最大的特性就是对 worker 的支持(当然safari也支持)。workers不仅仅能够让我们未来的web APP更加MVC。同时,他的异步后端运算给web程序带来更多可能性。
到底有什么好处?来看实例更加直接一些. mozbox的Paul Rouget用模拟退火算法(Simulated annealing)给我们演示了workers的优越性。
1. 不了解 Simulated annealing 的可以先看看这个图形化的演示过程,了解的同学直接看第二步
PJBlog3 v3.0.6.170 版本重要安全补丁
作者:puterjam 日期:2009-04-2222Apr
Google 发布浏览器3D插件 O3D API
作者:puterjam 日期:2009-04-2222Apr
在W3C没有公布canvas 3D Context接口之前,Google先发布了浏览器用的3D插件,通过O3D可以让开发者在网页上实现Rich 3D的应用。支持 Mac 和 windows 平台. 这是不是暗示浏览器的web 3D时代即将来临?
更多介绍可以看这里:
http://code.google.com/intl/zh-CN/apis/o3d/
插件安装:
http://tools.google.com/dlpage/o3d
一些演示:
http://code.google.com/intl/zh-CN/apis/o3d/docs/samplesdirectory.html
一个很Cool的firebug插件: Firediff
作者:puterjam 日期:2009-04-1818Apr
2009 CSS Naked Day - 2009网页裸奔节
作者:puterjam 日期:2009-04-0909Apr
CSS Naked Day 的来历
CSS Naked Day,也称CSS裸奔节或CSS裸奔日,
在裸奔节这天,参加裸奔节的Blog 将会去除页面上所有的 CSS 样式和广告裸奔整整一天,通过这个节日来重视CSS的重要性.当然你的网站如果是用table来布局的话这个节日对你来说并不是很合适.在2006年有将近800个国际知名网站参与这个节日.
CSS Naked Day 的目的
推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。暂时把页面设计抛弃,直接展示<body>内容!
历届CSS Naked Day的举办时间
第一届CSS裸奔节:2006年4月5日