漫谈CSS的渲染效率

【漫谈CSS的渲染效率】的更多相关文章

漫谈CSS的渲染效率

总结了部分所学.所听.所看.所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关联.部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见. 1.十六进制的颜色值对位数与大小写编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率. * 不赞成 - color:#f3a; * 建议用 …

CSS选择器渲染效率

1 浏览器如何识别你的选择器首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently Rendering CSS>一文中说过"浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取.换句话说,浏览器读取选择器的顺序是由右到左进行".比如说: div.nav < ul li a[title] 上面的实例来说,浏览器首先会尝试在你的HTML标签中寻找"…

CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditional Rendering) 当我们能够断定一个模型被其他模型挡住(因此不会被Camera看到)时,我们就可以跳过对此模型的渲染.这就是条件渲染的根本. 那么如何去判断?方法就是用一个简单的包围盒(比如一个立方体)去渲染一下,看看fragment是不是有变化(即包围盒上的某些部分通过了depth t…

我是怎么发现并解决项目页面渲染效率问题的（IE调试工具探查器的使用）

#我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用) ##背景之前的项目中,有很多的登记页面,一般都有100-200甚至更加多的字段,而且还涉及到字典.日期及其他效果的显示,载入时很慢,而且会有卡死的现象,IE下特别明显 ##IE调试工具探查器的使用当时找了不少资料,不过最后还是把目光聚焦到IE自带的调试工具了目前我电脑里面的是IE10,当时分析时用的是IE9,里面有一页**探查器**引起了我的注意,经过一轮的折腾,掌握了其分析方法如下: 1. 打开要分析的页面,F12进…

关于CSS选择器的效率问题

最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结. 以下是CSS选择器的效率排名: id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 相邻选择器(h1+p) 子选择器(ul < li) 后代选择器(li a) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child) id和类名用于关键选择器上效率是最高的,而CSS3的仿伪类和属性选择器,虽然使用方便,…

vr的延迟和渲染效率优化与Nvidia VRWorks

http://blog.csdn.net/leonwei/article/details/50966071 vr现在正处于风生水起的阶段,但是vr的性能一直是大问题,最主要的问题就是响应延迟,玩家改变位置到这一位置的图像被cpu提交,gpu渲染,同步刷新到头部显示设备上,这中间的延迟会导致用户的头晕,减少相应的延迟,是vr从硬件到软件一直在优化的问题.Nvidia针对这个,新推出了VRWorks组件,这是一套软硬件结合的改善响应延迟以及提高vr渲染效率的方案,从硬件上做了一些改进和加速,同时也提…

使用CSS来渲染HTML的表单元素

效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> <style type="text/css"> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px soli…

浏览器加载和渲染html的顺序-css渲染效率的探究

1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染…

浏览器加载和渲染html的顺序-css渲染效率的探究（转载）

1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染…

浏览器加载跟渲染html的顺序-css渲染效率的探究

1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染…

CSS提高渲染速度的写法

写CSS的习惯,决定页面渲染速度的快慢,这一点在脑残的IE里更加明显.养成良好的习惯,乃至形成规范,会让你的页面更快速的加载,用户体验度更高,下面是零度逍遥总结的一些提高CSS渲染速度的写法,供大家参考. 1.不要使用*{} 经常有前端开发人员使用*{margin:0; padding:0}来进行CSS重置,这种方法虽然写起来简单,但是渲染起来浏览器引擎要遍历所有的标签,很影响效率,强烈建议不要这样使用!建议的的解决办法:把你常用到的这些标签进行处理:例如:body,li,p,h1{margin…

CSS页面渲染优化属性will-change

前面的话当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作.这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏.本文将介绍CSS属性will-change 准备知识 GPU是图形处理器,专门…

CSS阻塞渲染、怎么防止css阻塞

浏览器渲染流程: 1.浏览器开始解析目标HTML文件,执行流的顺序为自上而下. 2.HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件. 3.CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树. 4.CSSOM和DOM开始合并构成渲染树,每个节点开始包含具体的样式信息. 5.计算渲染树中个各个节点的位置信息,即布局阶段. 6.将布局后的渲染树显示到界面上. 根据以上的流程,可以知道,当css…

Deferred Shading,延迟渲染（提高渲染效率，减少多余光照计算）【转】

Deferred Shading,看过<Gems2> 的应该都了解了.最近很火的星际2就是使用了Deferred Shading. 原帖位置: http://blog.csdn.net/noslopforever/archive/2009/03/03/3951273.aspx 这篇文章是对GEMS2里<Deferred Shading in S.T.A.L.K.E.R.>(中文译名<S.T.A.L.K.E.R.中的延期着色>,原作者Oles Shishkovtsov…

css的选择器效率分析

我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定的元素,他只遵循一条规则,指定的越具体,优先级越高) 由上可知,选择器指定的越具体,那么他的优先级就越高, 在这里,我们来总结一下css的选择器: 一.基本选择器(标签选择器.通用选择器.类和ID选择器) 选择器描述 CSS版本 E 标签选择器,匹配所有使用E标签的元素 * 通用元素选择器,匹…

小程序 - 解决IOS端使用css滤镜渲染出现异常

在页面渲染时,GPU默认不会开启.当css样式中出现某些规则时,就会开启GPU加速,让动画运行的更加流畅,最显著的象征就是元素的3D变换. 这些就是我们通常所说的css硬件加速,但我们有时候并不需要用到3D变换,却又想开启加速时,可以通过 transform: translateZ(0); 来欺骗浏览器开启GPU加速. 为什么我们说打游戏的电脑显卡要好,其中一点是游戏动画渲染复杂.性能消耗高,高级的显卡处理游戏画面会更加流畅. 所以在使用滤镜或一些3D变换出现渲染问题时,可以试试加上这条属性.…

如何让后加载的元素被一开始就有的css样式渲染成功（强制提升css优先级）

今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动的.如果直接一开始就使用css设置,卸载首页的css文件中,当focus输入框的时候,输入框的css是后加载进来以及渲染的,以至于我们看到的结果是一开始写在首页css文件中的样式被后面加载的样式覆盖了: 方案一:使用js定时器,当focus后延时一会儿大概255ms左右,再来渲染提示框的上边框颜色,…

【NPR】漫谈轮廓线的渲染

写在前面好久没写文章.最近在看<Real Time Rendering, third edition>这本书,看到了NPR这一章就想顺便记录下一些常见的轮廓线渲染的方法. 在非真实感渲染中,对轮廓线的渲染是一个应用非常广泛的手法.根据<Real Time Rendering, third edition>一书的总结,在这篇文章里介绍几种常见的渲染方法.当然,这里只是抛砖引玉,如果要用于实际项目中可能会根据需要进行完善.一些很好的效果可能需要去参考一些论文,这里不涉及那么深. 测试…

django引入模板时，部分css文件渲染不成功失灵引入不成功

今天碰到了一件怪事,下载好的模板,在webstorm中就好好地,但是一引入到pycharm的django项目中就各种失灵,位置错乱. 检查一番,发现该设置的都设置对了啊,而且js文件和css文件还有一部分是起作用的呢! 是什么原因造成的呢? 答:css文件名! 模板中的一个关键的css文件,文件名叫:style.css,造成了引入不成功!将style.css 改成freestyle.css就好了!…

css 样式渲染

1.文字过长时,自动换行…

CSS图片列表

1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a></h3><ul> <li> <a href="http://www.52css.com/default.asp"> <img src="1.jpg" alt="1…

-_-#【CSS 优化】

高性能CSS 关于css通配符性能问题不完全测试 CSS的渲染效率 border: none; /* 不写 border: 0; 但几乎都是写 border: 0;的.. */ 不要使用过小的图片做背景平铺.这就是为何很多人都不用 1px 的原因,这才知晓.宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源…

知乎网的CSS命名规律研究

笔者是一名Java程序员,前端css和图片本不是我的工作,亦不是我的强项.但很多时候,公司并没有合适的美工,只有自己动手.一般的css技术,倒是没有问题,定位,盒子,浮动,布局等等,都能做.但每每完成,自己审视一遍,总有一种零零散散的感觉,可维护性很差.究其原因,发现更多的是命名的问题.命名随意任性,前期规划不详细,后期改动多,导致class可读性差,重用性更差.就像下面: 压根就看不懂这些元素大概是什么意思.语义性差.这里的hd,bd,别的地方似乎也可以使用. 因此,笔者决心研究一下大网站的做…

书写更加高效的CSS，走出误区

根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注. 在未知情况下不希望冒险而降低了渲染的效率. * 不赞成 - color:#f3a; * 建议用 - color:#FF33AA; 2.display与visibility的差异他们用于设置…

reflow和repaint（摘录自张鑫旭的翻译）

//正文开始关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候.我可能有一些顽固,但是我确实听了他的一些理论.Stoyan和我开始讨论如何量化这个问题. 展望性能社区,除了一些典型的黑盒实验外,需要与浏览器厂商有更多的合作.对于性能,浏览器制造者知道…

翻译：让网络更快一些——最小化浏览器中的回流(reflow)

关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点.举个例子,页面上节点是以树的形式展现的.假如我使用JavaScript砍掉一个节点,这棵树为了不脱节,肯定要重新梳理一遍,将砍掉的那个断点重新结合起来又形成一颗完整的树,而这个结合梳理过程就是这里的reflow,所谓回流,就是由于某些原因(如修改),要将元素回过头来重新“流”一遍.而本译文的重点就…

浏览器渲染引擎，提高css渲染速度。

一.渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上.默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 二.各种渲染引擎我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上:Firefox使用Gecko —— Mozilla自家的渲染引擎:Safari 和 Chrome 都使用 Webkit. 最终决定浏览器表现出来的页面效果的差异是:渲染引擎 Rendering Engine(也叫做排版引擎),也…

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与匹配原理 CSS选择器大概可以分为:1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*) 8.属性选择器(a[rel='externaml']) 9.伪类选…

高效渲染css

译自:http://css-tricks.com/efficiently-rendering-css/ 无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何? 浏览器的开发者肯定关心这个问题(页面加载越快,人们用着越开心).Mozilla有篇文章 about best practices.Google同样致力于让web更快,他们也有篇文章article about it. 先来了解一下他们提出的主要想法,然后讨论其实用性. #从右至左# 弄明白浏览器是怎样解读CS…

CSS选择器效率问题

今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选择器: 对我们大多数人来说,CSS选择器并不陌生.最基…