最近,我一直看到标签"webkit"的问题.这些问题通常倾向于与CSS,jQuery,布局,交叉浏览器兼容性问题等相关的基于Web的问题......
那么这个"webkit"是什么？它与CSS有什么关系？我还注意到-webkit-...各种网站的源代码中有很多属性.这两个有关吗？
所以从目前为止的答案...... WebKit是Safari/Chrome的HTML/CSS Web浏览器渲染引擎.IE/Opera/Firefox是否有这样的引擎？使用其中一个的优点和缺点是什么？我可以在Firefox中使用WebKit功能吗？
最终的问题...... IE支持WebKit吗？
所有主流浏览器都使用不同的渲染引擎.我想这就是为什么有这么多跨浏览器兼容性问题的一个重要原因!
那么,是否有某种项目或移动到所有浏览器将使用的标准渲染引擎？HTML5会结束跨浏览器兼容性问题吗？
是否值得担心CSS渲染性能？或者我们是否应该完全不用担心CSS的效率而只关注编写优雅或可维护的CSS？
此问题旨在成为前端开发人员的有用资源,其中CSS的某些部分实际上可能会对设备性能产生重大影响,以及哪些设备/浏览器或引擎可能会受到影响.这不是关于如何编写优雅或可维护的CSS的问题,它纯粹是关于性能的(尽管希望这里写的内容可以提供关于最佳实践的更多一般文章).
谷歌和Mozilla已经编写了关于编写高效CSS的指南,CSSLint的规则包括:
避免看起来像正则表达式的选择器.不要使用复杂的相等运算符来避免性能损失
但是他们都没有提供任何证据(我能找到)这些证据的影响.
一个高效的CSS css-tricks.com文章认为(概述效率的最佳做法的负载之后),我们应not .. sacrifice semantics or maintainability for efficient CSS这些天.
一个完美杀死博客文章建议,border-radius并box-shadow呈现数量级比简单的CSS规则慢几个数量级.这在Opera的引擎中非常重要,但在Webkit中却微不足道.此外,粉碎杂志CSS基准测试发现,CSS3显示规则的渲染时间不明显,并且比使用图像渲染等效效果要快得多.
知道你的移动测试各种移动浏览器,并发现他们都快速地(在12毫秒内)渲染CSS3,但看起来他们在PC上进行了测试,因此我们无法推断手持设备如何在CSS3中执行一般.
目前有 很多 的文章如何编写高效的CSS在互联网上.但是,我还没有找到任何全面的证据表明,严重认为CSS实际上会对网站的渲染时间或快速性产生重大影响.
我为这个问题提供了赏金,试图利用SO的社区力量来创建一个有用的,经过深入研究的资源.
我正在使用GLSL着色器编写一个小型渲染引擎:
每个网格(井,子网格)都有一些顶点流(例如位置,法线,纹理,切线等)到一个大的VBO和一个MaterialID中.
每个材质都有一组纹理和属性(例如镜面反射颜色,漫反射颜色,颜色纹理,法线贴图等)
然后我有一个GLSL着色器,它的制服和属性.让我们说:
uniform vec3 DiffuseColor;
uniform sampler2D NormalMapTexture;
attribute vec3 Position;
attribute vec2 TexCoord;
我试图为GLSL着色器设计一种方法来定义属性和制服的流映射(语义),然后将顶点流绑定到适当的属性.
对网格说法的内容:"将您的位置流放在属性"位置"中,将您的tex坐标放在"TexCoord"中.还将材质的漫反射颜色放在"DiffuseColor"中,将材质的第二个纹理放在"NormalMapTexture"中
目前我正在使用硬编码的名称作为属性(即顶点pos始终是"位置"等)并检查每个统一和属性名称以了解着色器使用它的内容.
我想我正在寻找一种创建"顶点声明"的方法,但也包括制服和纹理.
所以我只是想知道人们如何在大型渲染引擎中做到这一点.
编辑:
回顾建议的方法:
1.属性/统一语义由变量名称给出 (我现在正在做什么)为每个可能的属性使用预定义的名称.GLSL绑定器将查询每个属性的名称并基于该属性链接顶点数组.变量名称:
//global static variable
semantics (name,normalize,offset) = {"Position",false,0} {"Normal",true,1},{"TextureUV,false,2}
...when linking
for (int index=0;index<allAttribs;index++)
{
glGetActiveAttrib(program,index,bufSize,length,size[index],type[index],name);
semantics[index]= GetSemanticsFromGlobalHardCodedList(name);
}
... when binding vertex arrays for render
for (int index=0;index<allAttribs;index++)
{
glVertexAttribPointer(index,size[index],type[index],semantics[index]->normalized,bufferStride,semantics[index]->offset);
}
2.每个语义的预定义位置
GLSL绑定器将始终将顶点数组绑定到相同的位置.着色器可以使用相应的名称进行匹配.(这看起来非常类似于方法1,但除非我误解,否则这意味着绑定所有可用的顶点数据,即使着色器不使用它)
.. when linking the program...
glBindAttribLocation(prog, 0, "mg_Position");
glBindAttribLocation(prog, 1, "mg_Color");
glBindAttribLocation(prog, 2, "mg_Normal");
3.来自Material,Engine globals,Renderer和Mesh的可用属性的字典
维护活动材质,引擎全局,当前渲染器和当前场景节点发布的可用属性列表.
例如:
Material has (uniformName,value) = …假设我们有一个带有单个样式表的HTML页面<link>.浏览器如何获取此样式表中的规则并将其应用于HTML？我不是在问如何让它更快,我想知道渲染本身是如何处理的.
它是否逐个应用每个规则,因为它会解析样式表并逐步呈现结果？或者,CSS文件的内容是否已完全下载,然后进行全面评估,然后立即应用于HTML？或者是其他东西？
我问这个上张贴一个答案较早之后关于影响渲染速度CSS规则的顺序问题,与样式被渲染的假设作为加载的样式,所以第一个规则会在最后的前应用,而不是一下子.我不确定我在哪里接受这个想法,这只是我一直想到的.
我在我的服务器上尝试了一个看起来像这样的演示:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body></body>
</html>
test.css 内容:
html { background:green }
/* thousands of lines of irrelevant CSS to make the download slow */
html { background:red }
在Firefox 5中进行测试,我希望首先看到绿色,然后变为红色.它没有发生.我尝试使用两个具有冲突规则的单独样式表并获得相同的结果.很多组合后,我得到了它工作的唯一途径是内嵌<style>在块<head>,与冲突的规则从未来<link>的<body>(身体本身完全除外链接标记为空).即使style在<html>标记上使用内联属性,然后加载此样式表也不会创建我期望的闪烁.
重绘是否受到CSS的任何影响,或者是在下载整个样式表后是否同时应用了最终输出,并且计算了最终输出应该是什么规则？CSS文件是否与HTML本身一起下载或阻止它(如脚本标签那样)？这实际上是如何工作的？
我不是在寻找优化技巧,我正在寻找有关该主题的权威参考资料,以便我将来可以引用它们.如果没有大量不相关的材料,就很难搜索这些信息.摘要:
@import多个<link>内联样式属性,<style>头部块和不同渲染引擎等因素的影响？目前,我们的应用程序使用Trident Win32组件,但我们希望摆脱这一点,原因有几个,其中主要是我们希望跨平台.
我们正在关注WebKit和Gecko,但在做出决定之前,我很想得到一些反馈.以下是一些最重要的要求:
它应该相对较快,占地面积小.理想情况下,我们可以在不费力的情况下削减任何我们不需要的东西.
体面的文件很重要.我预计不需要做任何太不寻常的事情,但你永远不会知道.
我们正在使用C++,如果可能的话,我们希望使用设计良好的面向对象架构.
跨平台是必须的,从长远来看,良好的性能将有所帮助(我们可能最终移植到移动平台).
在做出决定之前,我需要考虑哪些因素？之前有没有人使用过WebKit或Gecko？如果是的话,是否有任何我觉得有用的文章或教程？
更新:
谢谢你们的回应.我们最终选择了Qt 4.5,其中包括WebKit.到目前为止我们对它非常满意,事实上我认为Qt可能是我用过的最好的UI框架; 使用本机Win32 API进行编码之间的区别是惊人的.这也很容易学习,我们唯一的主要问题就是习惯了信号/插槽范例.
我正在为Quake实现一个地图渲染器.我目前正在运行顶点数组并一次发送一个顶点数组.有人告诉我,通过使用顶点数组,我可以通过批量发送顶点来大大加快渲染过程.现在,我刚刚查看了显示列表,最后查看了VBO或顶点缓冲区对象.VBO提到了与客户端/服务器通信相关的巨大优势.如果我只是在开发客户而不是服务器,VBO仍然适用于我正在做的事情吗？
目前在OpenGL频谱中使用哪些游戏进行快速顶点处理？
非常快,我总是想知道,互联网浏览器是否用于渲染OS API函数来创建按钮,渲染图像等,还是他们自己渲染它们？
我首先认为它使用系统api,但有一些效果,比如当屏幕渐渐变成灰色而你只看到中间的小窗口,你知道,在网上很多画册上使用的效果,我真的不知道如何使用例如只有Win32调用.
编辑:更确切地说,我知道屏幕上的最终绘图将始终使用系统API,但您可以根据需要发送预渲染图像.谢谢.
我读了一本名为"专业Javascript For Web Developers 2nd edition"的书,它说明这段代码可以检测浏览器渲染引擎:
<script type="text/javascript">
var client = function(){
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
ver: null
};
return {
engine : engine
};
}();
if(client.engine.ie){
alert("This is internet explorer");
}else if(client.engine.gecko > 1.5){
if(client.engine.ver == "1.8.1"){
alert("This is gecko rendering browser");
}
}else if(client.engine.webkit){
alert("This is web kit");
}else if(client.engine.khtml){
alert("This is khtml");
}else{
alert("none of the above");
}
</script>
但它似乎不起作用,所以这段代码如何工作来检测浏览器渲染引擎？谢谢
试图至少使用Lighthouse3D Radar Frustum Culling教程的非常简单的 第1部分来工作......我绝对感到困惑,我甚至无法在我的渲染器中使用该部分.
所以第一步是:你测试一个点是在近平面前面还是在远平面后面,如果是这样的话就进行早期剔除.(如果没有,那么你会进行进一步的测试,但我只是坚持第一部分.)
我使用2x2立方体的世界空间中心(x1y2z3),并有一个可以自由移动和旋转的相机.所有我的矢量和矩阵的东西必须相当坚固,因为渲染器否则工作得很好.所以这是我对第一部分的看法(在Go中),简单的"Z vs near-or-far"测试:
func (cam *Camera) frustumHasPoint(point *Vec3) bool {
var pc Vec3
v := point.Sub(&cam.Controller.Pos) // point minus camPos
ref := cam.Controller.dir // take a copy of camDir
ref.Z = -ref.Z
ref.Normalize() // camDir was already normalized but anyway...
pc.Z = v.Dot(&ref)
if pc.Z > cam.Perspective.ZFar || pc.Z < cam.Perspective.ZNear {
return false
}
return true
}
现在我为什么要反转ref的Z？因为在教程中他们写道:"请注意,图中的参考不是右手系统(如在OpenGL中),因为Z的方向已被颠倒以使教程更直观" - 好吧,在GL教程中当然这有相反的效果......
好吧,如果如上所述反转Z,它会剔除超过50%的时间; 如果我不这样做,那么大约98%的时间它会"过度剔除".
我错过了什么？
rendering-engine ×10
css ×3
opengl ×3
browser ×2
c++ ×2
webkit ×2
android ×1
client-side ×1
css3 ×1
culling ×1
frustum ×1
gecko ×1
glsl ×1
go ×1
html ×1
javascript ×1
performance ×1
qt ×1
repaint ×1
vertex ×1