Google Docs Ctrl + C 技术浅析

用 google docs 打开 pdf 文件,选中文本:

表面上没有任何有趣的地方。但仔细一看,会发现选区的颜色是浅蓝色,而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性,立马 firebug:

不看不知道,一看真蹊跷。selection-highlight 是选区,选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性:Ctrl + C 可以复制图片中的文字!

google 太强悍了,好在前端代码都是开源的,下面简单分析下。 阅读全文 »

Tags: ,

浏览器加载、渲染和解析过程的黑箱分析

测试页面:loadtime/test.html

用 Fiddler 监控,在 IE6 下,资源下载顺序为:
ie6 timeline

很明显,下载顺序从上到下,文档流中先出现的资源先下载。在 IE8, Safari, Chrome 等浏览器下也类似。

Firefox 对下载顺序做了优化 阅读全文 »

Tags:

图片的HTTP请求(续)

上一篇中,很多朋友在回复中提到了一些更有意思的现象,忍不住继续挖掘一番:

10. IE6下的背景闪烁bug

这个bug久闻其名,但我自己从来没遇到过。纳闷了许久,后来才发现,这是一个非典型性甚至可以忽略的bug. 因为它的触发条件离普通用户很远:

The cause of flickering is choosing “Every visit to page” in Tools » Internet Options… » Temporary Internet Files » Settings…

Selecting anything other than “Every visit to page” will fix all flickering. Fortunately, the means that the flicker problem plagues developers far more than your common user.

只有IE的缓存选项设置为“Every visit to page”时,才会触发。普通用户的默认设置是“Automatically”, 不会遇到此问题。因此继续往下阅读之前 阅读全文 »

Tags: , , , ,

图片的HTTP请求

请在主流浏览器中打开测试页面,在Fiddler里查看http请求。

1. 隐藏图片

<img src="1.jpg" style="display: none" />

测试:test_1.html
结论:只有Opera不产生请求。
注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求。

2. 重复图片

<img src="1.jpg" />
<img src="1.jpg" />

测试:test_2.html
结论:所有浏览器都只产生一次请求 阅读全文 »

Tags: , ,

对一次bug排查过程的反思

前两天遇见一个bug,在已买到的宝贝列表页面,如下图:
bug snagshoot

直觉反应是表头的CSS有问题,仔细检查后,却没发现问题。难道是JS引起的?禁用JS后,问题依旧。

开始怀疑是页面中某段HTML代码导致了这个bug. 前几天刚用熟了Fiddler,于是 阅读全文 »

Tags:

Page 1 of 212