网页制作学习:reflow的问题

范海伦4670

范海伦4670

2016-02-19 23:52

今天图老师小编给大家展示的是网页制作学习:reflow的问题,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

对理论没兴趣的,可以只看红色标注的结论

mozilla的工程师发表过一篇演讲,提到reflow的问题。概念不难理解

mozilla系列浏览器构建网页的过程:1、读取HTML文档,构建网页文档树就是从body开始到结束,把每个table或者div记录下来 2、reflow通过CSS或者其他因素计算文档树中每个对象的大小、布局等 3、把计算结果显示在屏幕上

简单言之浏览器的运算开销大多在reflow这一步,就是获取对象的布局、排版等样式,如果样式的定义有误则浏览器会重新运算,之后再展现在浏览器上。
另外通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。其中CSS方面,常用的JS切换display:none和display:block是个最好的例子

而HTML文档中,比较典型的是图片的宽高未定义,浏览器会自行计算,所以很多网页优化的文章都列入了这条,即可能的话,就把图片的宽度高度写进HTML文档里。

从渲染过程上来讲,mozilla有过CSS的书写建议:1.显示样式 display/position/float/clear 2.自身样式 width/height/margin/padding/border/background 3.内容样式 line-height/text-align/font系列(font-size/font-weight)/color/text-decoration/vitical-align

猜测这应该和mozilla系列浏览器本身渲染网页的优先级顺序切合。

我的书写顺序:

select{clear:both;display:block;float:left;margin:100px;padding:100px;width:100px;height:100px;line-height:100px;text-align:center;color:#000;font-size:12px;font-weight:400;background:#FFF;border:1px solid #F00;)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

大致符合建议规则,同时因为书写样式时修改频率最高的就是背景和边框,所以放在最外面,取了规则和工作效率的平衡点。

展开更多 50%)
分享

猜你喜欢

网页制作学习:reflow的问题

Web开发
网页制作学习:reflow的问题

网页制作学习:reflow概念

Web开发
网页制作学习:reflow概念

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页制作之学习CSS的理由

Web开发
网页制作之学习CSS的理由

网页制作学习教程:CSS Position

Web开发
网页制作学习教程:CSS Position

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

制作网页需要学习哪些技术?

Web开发
制作网页需要学习哪些技术?

如何学习DIV CSS制作网页

Web开发
如何学习DIV CSS制作网页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Webjx推荐20个关于CSS3优秀学习资源

Webjx推荐20个关于CSS3优秀学习资源

怎么删除qq空间动态不让自己的隐私过多的暴露

怎么删除qq空间动态不让自己的隐私过多的暴露
下拉加载更多内容 ↓