你不知道的css渲染技术

1、*{} #zishu *{} 尽量避开

由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设

计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;

解决办法 编程人员怎么学习

1)不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;

2)不要使用*;而是把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0}

2、一个页面上少用绝对定位

绝对定位(position:absolute )是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但网页中如

果使用过多的绝对定位,会让你的网页变得非常的慢,这一点上边FIREFOX表现要比IE还要差。

解决办法

1)尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能

说,这样写会有性能问题,少用。

2)如果能用变通实现同样的效果,就用变通的办法。

3、background 背景图片的平铺

有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。

4、让属性尽可能多的去继承

尽可能让一些属性子可以继承父,而不是覆盖父;

5、CSS的路径别太深;

6、能简写的一些就简写;

7、别放空的的class或没有的class在HTML代码中;

8、合理的布局

9、float 的应用

这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家

如果不是很明白float是怎么工作的,还是少使用为妙。

10、滤镜的一些东西不要去用

IE的一些滤镜在FIREFOX中不支持,往往写一些效果时你还是使用CSS HACK;而滤镜是一个非常毫资源的东西;特别是一些羽化、阴影

和一个前透明的效果;

时间: 2024-10-11 05:47:01

你不知道的css渲染技术的相关文章

CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera

转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩的网络世界,而浏览器则是我们欣赏网络世界的窗口. 以前,浏览器主要有IE和NetScape两家:到现在,各种各样功能强大的浏览器层出不穷.例如:举世闻名的浏览器有Chrome.FireFox.Safari.Opera,常见的"国产"浏览器有遨游.QQ.360.搜狗.UC.世界之窗. 由于不

【CSS】CSS Sprites (CSS 精灵) 技术

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- re

[sig14&gdc14]crytek的《罗马之子》的渲染技术

crytek关于son of rome在gdc和siggraph都做了presentation,两者有些地方一样的,干脆一勺烩了吧: http://advances.realtimerendering.com/s2014/crytek/Sigg14_Schulz_Mader_Ryse_Rendering_Techniques.pptx http://www.crytek.com/download/2014_03_25_CRYENGINE_GDC_Schultz.pdf 看到一直推动行业水准前进的

解析CSS加密技术之“障眼法”

CSS(Cascading Style Sheet,可译为"层叠样式表"或"级联样式表")是一组格式设置规则,用于控制Web页面的外观.通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离.页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分.将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间. 一般情况下,我们的CSS是无需

Android应用程序UI硬件加速渲染技术简要介绍和学习计划

Android系统的流畅性一直被拿来与iOS比较,并且认为不如后者.这一方面与Android设备硬件质量参差不齐有关,另一方面也与Android系统的实现有关.例如在3.0前,Android应用程序UI绘制不支持硬件加速.不过从4.0开始,Android系统一直以"run fast, smooth, and responsively"为目标对UI进行优化.本文对这些优化进行简要介绍和制定学习计划. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注!

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

CSS扩展技术-less

在原来的CSS基础上扩展一些编程语言 CSS引用扩展技术时需要编译器编译<编译工具Koala 1.less<比较早期的CSS扩展技术> a.less语法:后缀名<.less> //变量的定义 @color:blue; @body-color:blue; @div-color:blue; @w:100px; @h:100px; body{ height:500px; border:1px solid @body-color; } div{ width:@w; height:@h

Shadow Volume( 阴影体)渲染技术的实现细节及感受(一)之 阴影体生成

首先贴一个链接,该链接内有大量基于OpenGL的渲染技术教程和Code Sample,本文基本上在其Tutorial 40的基础上进行了翻译,并加入了部分自己的理解.原文在此: http://ogldev.atspace.co.uk/index.html Shadow Volume,即阴影体技术.是CG中非常常见的阴影渲染技术.在自己动手实现之前,也看了好多原理上的东西.但是纸上得来终觉浅,绝知此事要躬行啊! 以此文记录下Shadow Volume实现过程中的种种. 简单地讲,光线照射空间几何物

基于物理的渲染技术(PBR)系列二

笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解>电子工业出版社等. CSDN视频网址:http://edu.csdn.net/lecturer/144 继续上篇博客中基于物理的渲染技术(PBR)系列一的讲解,在这里我们引入了一种被称为渲染方程(Render Equation)的东西.它是某些聪明绝顶人所构想出来的一个精妙的方程式,是