Repaint 跟踪浏览器的渲染

 

前端优化,从很久就开始了。随着研究的深入,关注的点就越来越多。最近也有不少的前端开发同学在研究浏览器的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,都会导致它的子结点及祖先结点重新渲染。
 

查看更多...

Tags: Firefox repaint reflow

分类:Javascript | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 2308

opera 15岁了

Opera 15th Birthday banner

 

今天,你可以打开 opera 官网看到一个很奇怪的页面

不仔细看还以为 opera 被黑了,其实不是。今天是Opera的15岁生日。

查看更多...

Tags: opera

分类:Diary | 固定链接 | 评论: 5 | 引用: 0 | 查看次数: 1195

作为未来的前端高手的你不能不知的 Web Workers

Firefox 3.5 其中一个最大的特性就是对 worker 的支持(当然safari也支持)。workers不仅仅能够让我们未来的web APP更加MVC。同时,他的异步后端运算给web程序带来更多可能性。

到底有什么好处?来看实例更加直接一些. mozbox的Paul Rouget用模拟退火算法(Simulated annealing)给我们演示了workers的优越性。

 

1. 不了解 Simulated annealing 的可以先看看这个图形化的演示过程,了解的同学直接看第二步

查看更多...

Tags: Firefox workers

分类:Javascript | 固定链接 | 评论: 13 | 引用: 0 | 查看次数: 4327

Google 发布浏览器3D插件 O3D API


 

在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


Tags: Google o3d

分类:Web Design | 固定链接 | 评论: 8 | 引用: 0 | 查看次数: 3499

一个很Cool的firebug插件: Firediff

firediff 是一个很有用的firebug插件,它可以跟踪页面中的dom变化,并且及时显示变化的情况。

firediff需要 firebug 1.4a17 以上的版本才能运行

查看更多...

Tags: firebug firediff dom

分类:Javascript | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 2380

2009 CSS Naked Day - 2009网页裸奔节

CSS Naked Day 2009

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日

查看更多...

分类:Diary | 固定链接 | 评论: 6 | 引用: 0 | 查看次数: 1489

3D的浏览器 - Awesomium

严格来说这不只是一个浏览器,Awesonmium 是一个允许把网页嵌入到 3D 画面或游戏中的开源库。 Awesomium 采用了目前业界速度最快的浏览器内核webkit和v8,其实是把Chrome内核嵌入到了里面。

更加令人惊讶的是,它还能很好得支持flash。

 

说了那么多,大家亲自下载Demo体验吧:

查看更多...

Tags: chrome awesomium

分类:Diary | 固定链接 | 评论: 15 | 引用: 0 | 查看次数: 6649

谷歌音乐桌面版

Google在3.30推出了音乐服务。个人比较喜欢它对音乐的整理方式,而且播放器也比较简约。但是听歌的时候总是需要打开浏览器,对俺这样的懒人来说觉得有郁闷。

 

用.net程序写了一个外壳,把Google播放器放到桌面上来,并且加上了最小化到状态栏的功能,当然还是绿色的。

 

查看更多...

Tags: Google music

分类:Download | 固定链接 | 评论: 26 | 引用: 0 | 查看次数: 11651

webkit 允许使用图片来装扮滚动条

http___trac.webkit.org_export_41842_trunk_LayoutTests_scrollbars_overflow-scrollbar-combinations.html-1.jpg 先用safari或webkit(当然google浏览器也可以)来看看这个例子

 

http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

 

查看更多...

分类:Web Design | 固定链接 | 评论: 11 | 引用: 0 | 查看次数: 2013

Google启动Chrome体验网站,大炫Chrome和JavaScript威力

 

Google Chrome昨天Google发布了新的测试版Chrome,该版本具有更快的V8引擎(Google的JavaScript引擎)。今天,Google又启动了Chrome体验网站,对JavaScript游戏、软件、和可视化应用进行了全面展示。该网站旨在凸显V8和Chrome结合带来的强大功能,但是部分应用也适用于Firefox,Safari和IE。经过我们的测试发现Chrome的确更胜一筹。

Chrome体验网站目前包括19个产品,Google计划以后添加更多新的应用产品,并且鼓励程序开发人员向该网站提交自己的JavaScript作品。

 

重点概要

查看更多...

分类:Javascript | 固定链接 | 评论: 7 | 引用: 0 | 查看次数: 3087