1.1px问题
在retina显示屏中,1px像素实际对应2px像素,为了实现真正的1px粗细,我们需要使用0.5px来模拟,ios8+可以直接使用0.5px单位,其他版本需要通过scale:0.5来进行模拟
2.浏览器渲染
渲染过程:
- 处理HTML标记并构建DOM树(文档对象模型)
- 处理CSS标记并构建CSSOM树(CSS对象模型)
- 将DOM和CSSOM合并成一个渲染树
- 根据渲染树来布局,以计算每个节点的几何信息,再将各个节点绘制到屏幕上
其中构建DOM树的过程为:
1.转化:浏览器从磁盘或网络读取HTML原是字节,并根据文件的指定编码(UTF-8)将它们转化成各个字节
2.令牌化:浏览器将字符串转化为W3C HTML5规定的各种令牌,每个令牌都具有特殊含义和一组规则
3.词法分析:发出的令牌转化成定义其属性和规则的对象
4.DOM构建:最后,由于HTML标记定义不同标记之间的关系,创建的对象链接在一个树数据结构内,此结构也会捕获原始标记中定义的父子关系,最终就会输出文档对象模型(DOM)
构建CSS对象模型与构建DOM相同,都构建完毕后,就会将DOM树与CSSOM树合并成渲染树
注意:渲染树只包含渲染网页所需的节点,display:none;的元素不会出现在渲染树中