读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

css selectors 性能消耗从低到高:

  1. ID selectors
    #modal { overflow: hidden; }
  2. class selectors
    .container { margin: 0 atuo; }
  3. type selectors
    a { color: #999; }
  4. adjacent sibling selectors
    input + label { display: inline; }
  5. child selectors
    label > input { display: none; }
  6. descendant selectors
    .foo a { text-decoration: none; }
  7. universal selectors
    * { font-family: Arial; }
  8. Attribute Selectors
    [class^=”modal-“] { background: white; }
  9. Pseudo-Classes and Pseudo-Elements
    a:hover { text-decoration: none; }

Continue reading “读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符”

读书笔记 – 高性能网站建设进阶指南(1)图像优化

优化工具:
跨平台png压缩工具:Pngcrush,OptiPNG
跨平台剥离jpeg的元数据工具:jpegtran
在线多格式压缩工具:smush.it
对动画gif优化,gifsicle可以将动画里连续帧中的重复像素移除,来达到优化。

Continue reading “读书笔记 – 高性能网站建设进阶指南(1)图像优化”

跨系统跨浏览器的“微软雅黑”

这个问题起源于设计要求某页面在任何装了微软雅黑的系统里都要显示微软雅黑。这就包括,win下所有浏览器和mac下所有浏览器(我想没人会在linux下装雅黑的吧~)。

给font-family设定中文字体一般有两种常见方式:1、字体英文名,2、unicode。

我一直采用unicode的方法。
因为写成“Microsoft Yahei”的话,win下ff(曾经)和opera(目前为止)都不能正确识别。
写成unicode的话,win下所有浏览器都能显示雅黑字体。

但是这招在mac os下似乎行不通。
通过调试,基本确定mac下的雅黑的名字默认就是“Microsof Yahei”,不存在“微软雅黑”这个字体名。
所以mac os下写unicode是没法被识别成“微软雅黑”的。
但这样会造成win下部分浏览器没法正确显示雅黑。

终上,
如果想让win下全浏览器显示雅黑的话,font-family用unicode“\5FAE\8F6F\96C5\9ED1”;
如果想让全部装了雅黑的系统下的浏览器显示雅黑的话,font-family用英文名“Microsoft Yahei”,
但这意味着部分win下的浏览器无法正确显示雅黑。

动物之森随手记

3月7日

有幸初次进入了复位中心。由于我把他建在村子的左上角,平时很少注意那里是否开门。
当然,其实只有前一天下雨了,第二天晚上复位中心才会开门。
走过长长的通道,一只说话没好气的鼹鼠在里面看电视……

リッセとセンター1

好吧,他让我不要和他说话……于是我继续往里走……只见那里深藏着一个二人间的厕所……
于是我坐上去拍了平身第一张如厕照。

リッセとセンター2

然后就没有然后了……我从里面出来了……

Continue reading “动物之森随手记”

IE缓存问题

今天调试的时候发现一个比较头疼的IE缓存问题。

我发送了个ajax请求,请求成功则往浏览器session里写更新一条数据。
再刷新页面时,因为session更新了所以这个页面上应该会出现一个新的条目。
但是在IE下并没有成功。不停的刷新都没有用,除非清空浏览器缓存。

一开始怀疑是ajax请求发送失败,但测试下来是成功的。
那是什么原因造成IE读取不了新的session呢?
后来通过查看net请求,发现IE在更新页面时读取的是浏览器缓存的页面session,而不是新session。
http响应为403,不是200。
这个问题在chrome、firefox等浏览器下并没出现。其他浏览器会自动更新缓存。

感觉我表达的不是很清楚……因为第一次碰到这问题,也不知道该怎么描述。
最后通过给ajax请求增加时间戳来强制让IE读取服务器发送过来的请求,而非浏览器缓存的请求。

jQuery slideDown snap back issue

这个问题得用视频才能演示出来……视频之后更新。

标题用的是stackoverflow上的。

我碰到的情况是,div.to-slide里有float元素。
div.to-slide在触发slideDown()动画后,会先down到超过div本身应该的高度,再反跳回原来的高度。
排查了很久都没找到原因。终于最后在stackoverflow上找到了一篇解释这问题的。
原来这个问题并不限定于内部有float的slidedown元素。float只是其中一种情况。
在div.to-slide没有展开情况下,jquery算出的高度有误,所以才会出现高度差反跳。

触发这个bug的原因很多,比如:无宽度,自适应或继承父元素宽度(我的问题就是这个)。

详见 slidedown animation jump revisited