仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 728|回复: 7
打印 上一主题 下一主题

[HTML5] 来讲讲:懂得怎样削减 reflow 次数

[复制链接]
灵魂腐蚀 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:18:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展.网页制造poluoluo文章简介:扫瞄器为了从头衬着部分或全部页面,从头盘算页面元素地位和多少布局(geometries)的历程叫做reflow。

  • 原文:Minimizingbrowserreflow
  • LindseySimon
  • 翻译:ytzong
扫瞄器为了从头衬着部分或全部页面,从头盘算页面元素地位和多少布局(geometries)的历程叫做reflow。因为reflow是一种扫瞄器中的用户拦阻(user-blocking)操纵,以是懂得怎样削减reflow次数,及分歧的文档属性(DOM层级(DOMdepth),CSS效力,不必范例的style变更)对reflow次数的影响对开辟者来讲十分需要。偶然reflow页面中的一个元素会reflow它的父元素(译注:这里是单数)和一切子元素。
有多种用户操纵和DHTML变更大概会触发reflow。调剂扫瞄器窗口的巨细,用javascript盘算款式(computedstyles),在DOM中创立删除元素,改动元素的class城市触发reflow。值得注重的是,有些操纵会屡次触发reflow,超越你的设想。下图源自SteveSouders的演讲"EvenFasterWebSites":



从上表能够很分明的看出,在一切扫瞄器中并不是一切javascript把持的款式都触发reflow,即便触发了触发的次数也不尽不异。同时能够看呈现代扫瞄器在把持reflow次数方面做的愈来愈好。
在Google,我们经由过程多种体例对我们的页面及Web使用测速,同时reflow是我们增添UI时思索的一个关头要素。我们努力于转达轻盈的(lively),交互性强的(interactive)和使人愉悦的(delightful)的用户体验。
准绳
上面是一些减小reflow的准绳:

  • 削减不用要的DOM层级(DOMdepth)。改动DOM树中的一级会招致一切层级的改动,上至根部,下至被改动节点的子节点。这招致大批工夫泯灭在实行reflow下面。
  • 只管削减CSS划定规矩,往除未用到的CSS。
  • 假如做庞大的体现变更,如动画,让它离开文档流。用相对定位或fixed定位来完成。
  • 制止不用要的庞大的CSS选择器,特别是儿女选择器(descendantselectors),由于为了婚配选择器将泯灭更多的CPU。
鄙人面的视频中(译注:援用自youtube,没法寓目,请到原文翻墙),Lindsey先容了一些削减reflow的办法。
延长浏览


  • Mozilla关于HTMLreflow的纪录(MozillasNotesonHTMLreflow)
  • Opera的重绘和reflow(OperasRepaintsandreflows)
  • SatoshiUeyama在Firefox中调试reflow的例子(SatoshiUeyamasdebug-Firefoxreflowdemos):

    • google.co.jpreflow
    • mozilla.orgreflow
    • ja.wikipedia.orgreflow

  • NicoleSullivan的关于reflow和重绘(NicoleSullivanonReflowsandRepaints)
</p>
Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。
小妖女 该用户已被删除
沙发
发表于 2015-1-17 21:43:44 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
海妖 该用户已被删除
板凳
发表于 2015-1-22 18:44:53 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
飘灵儿 该用户已被删除
地板
发表于 2015-1-31 12:50:50 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
乐观 该用户已被删除
5#
发表于 2015-2-18 11:49:01 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
活着的死人 该用户已被删除
6#
发表于 2015-3-6 07:41:47 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
透明 该用户已被删除
7#
发表于 2015-3-12 22:48:53 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
愤怒的大鸟 该用户已被删除
8#
发表于 2015-3-20 05:08:07 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-18 09:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表