草庐IT

perform_calc

全部标签

html - calc 是否与显示 :table-cell? 一起工作

我有一个用div制作的结构,设置为像表格元素一样显示。这是一个条目表单,我希望左栏(字段标签所在的位置)为50%宽,加上2em,以便星号适合必填字段,而右栏(字段所在的位置)为占用剩余空间。我尝试使用calc来设置宽度。但至少在我最新的Chrome中,列的宽度是任意的,即使检查元素显示规则存在并且处于事件状态。可能是什么问题呢?calc与display:table-cell不兼容吗?还是我在某个地方犯了一个错误?这是HTMLGenedonorBlackratCatCattleaddotherspecies以及它的CSS.dialog-label-column,.nested-label

javascript - WebGL 警告 : "Attribute 0 is disabled. This has significant performance penalty"

当我运行下面的JavaScript/WebGL代码时(请向下滚动),我在我的开发控制台中看到以下警告消息:[.WebGLRenderingContext]PERFORMANCEWARNING:Attribute0isdisabled.Thishassignificantperformancepenalty下面的代码成功地在Canvas上绘制了一个白点。但是,我希望警告消失。我需要更改以下代码中的哪些内容才能使其停止显示?HTML:JavaScript:varVERTEX_SHADER_SOURCE=""+"voidmain(){"+"gl_Position=vec4(0.0,0.0,0

performance - Canvas vs DOM——HTML5中最高效的图片展示方式是什么?

StackOverflow用户在制作html5应用程序/网站时,对于图片库这样的情况,在浏览器中依次或同时显示大量图像,使用canvas元素是否合理?只要我们只是在谈论呈现图像,那么使用Canvas并在其上绘制图像而不是使用DOM元素标签有什么意义吗?还将有一些图像处理,如CSS3转换/移动/缩放/缩放和手势识别(拖动、触摸/点击、可能捏等),据我所知,它们适用于Canvas和img标签。保持尽可能多的“html5”风格并考虑性能也很重要。例如,futurecanvas元素是否会被浏览器越来越多地使用和优化,以及目前是否更快也很重要。由于我们正在考虑开发一个通用的html5应用程序,在

javascript - CSS:性能方面,最好使用 calc 或 position absolute

我有一个固定高度的容器div。在两个div中,顶部高度:50px,另一个必须填充空白区域但允许内部滚动。现在我有两个选择:#up{height:50px;}#down{position:absolute;top:50px;bottom:0;}或:#up{height:50px;}#down{height:calc(100%-50px);}如果我的窗口中有许多这样的案例,那么哪一个是最明智的使用性能?ThisFiddle附言。我不关心旧浏览器的支持。 最佳答案 我总是会使用calc选项。两者可能看起来一样,但实际上并非如此。当您使用p

html - 在步骤中使用 css calc()

我们使用了一个纯CSS基础的进度条。主要的css部分如下。.container{width:600px;margin:20pxauto;}.progressbar{margin:0;padding:0;counter-reset:step;}.progressbarli{list-style-type:none;width:25%;float:left;font-size:12px;position:relative;text-align:center;text-transform:uppercase;color:#7d7d7d;}.progressbarli:before{width

performance - Canvas 渲染性能

我正在修改游戏Jump'n'Bump的HTML5端口,以便在基于Apple和Android的移动设备上运行。我使用廉价的1GHzCortex-A8Android4.0.3平板电脑进行测试。我在系统的浏览器中遇到了奇怪的行为。我通常得到一个非常低的帧速率,大约1FPS(整个屏幕每帧都重新绘制,使用setTimeout...)。但是,当我在标记之前添加一个具有position:fixedCSS属性的时,帧率飙升并且游戏变得可以玩了。有人可以解释一下这个奇怪的现象吗?Android浏览器中是否有一些渲染模式会影响Canvas性能?这是一个跨平台问题吗?如何确保页面在用户浏览器中高效运行?我正

html - calc() CSS 属性如何在旧版浏览器中降级

考虑到calc()CSS属性与大多数浏览器兼容得很好(参见http://caniuse.com/calc)我仍然想知道它在旧浏览器中的性能如何下降,尤其是在Android浏览器上,因为只有最新版本似乎才能很好地处理它.我不太关心IE支持。这是一个比较笼统的问题,但这里有一个小例子http://jsfiddle.net/7swVc/我想知道这些属性将如何降低:width:calc(100%-50px);height:calc(100%-50px); 最佳答案 不支持CSS3calc的浏览器将忽略出现无法识别的值的声明。这将与您从未将它

html - border-width 中的 CSS calc()?

我可以使用带边框宽度的calc()吗?我希望以下CSS能够工作:.my-element{border-left-width:calc(10%+10px);border-right-width:calc(10%+20px);}但无论出于何种原因,我提供的任何值calc()结果根本没有边界。我在MDN上找到的文档不清楚是否可以使用calc-它说我应该使用Anyvalue,但这是否包括计算?我的目标是IE9,但我在Chrome34和Firefox28中得到了相同的结果。我知道我总是可以使用jQuery来实现这些事情,但我想尽可能避免它。 最佳答案

performance - <canvas> 和 <div> 的效率

我想问问是否有人可以给我一些关于我想做出的设计决定的提示。我的项目将包含一些Sprite(预计屏幕上同时显示10到30个),并且有多种实现它们的方法。一种方法是CSS-Sprites,另一种方法是在Canvas上绘制它们。两者都不难。背景将是由另一个人绘制的瓷砖map,在后台。我看过Crafty将Sprites附加为在中的HTML中,作为CSS-Sprite。我不确定是否存在速度差异是否在Canvas中。有区别吗?我希望用户通过鼠标点击、向左、向右等方式与sprite进行交互。当然,sprite会在图blockmap的元素上站立或行走。那么为编写处理程序是否更有效?并找到Sprite,

performance - 如何防止 HTML5 音频在加载时预下载/流式传输?

我有一个单页网站,其中列出了HTML5音频播放器的集合。问题是网站变慢了,因为以下浏览器开始预下载内容(mp3和ogg)InternetExplorerGoogleChromeFirefoxSafari(probablyOpera)我使用基本代码来实现播放器。有没有一种方法可以阻止浏览器预下载音频文件并且仅在它们单击播放时才起作用? 最佳答案 Yourbrowserdoesnotsupporttheaudioelement.注意-preload="none"-可以与VIDEOHTML5和AUDIOHTML5一起使用。除Interne