在过去的一周里,我一直在帮助朋友在浏览器中试验基于SVG的精灵表.我们希望在浏览器中提供理想的工作流程来准备,发布和运行高质量的动画图形.因此,理想情况下,单个动画数据源可用于小型智能手机屏幕,平板电脑,视网膜显示器和桌面浏览器.
理论上,(基于矢量的)SVG应该是理想的,但由于SVG通常不常用 - 我们决定测试它.我的想法不是使用SMIL SVG(因此没有基于SVG的动画),而是创建一个动画精灵表(正如您通常使用栅格数据PNG/JPG),但使用纯矢量即SVG.它有点大,但如果它有效 - 它甚至可以用更优化的东西工作.
加上逐帧矢量动画可以为我们的工作流做很多事情 - 它允许我们使用Flash编辑器来制作动画,然后将它们导出到SVG精灵表.
无论如何,结果出奇的好但在某些方面也失败了(请注意,出于测试目的,我们只使用基于Webkit的浏览器,即Safari,Chrome,iOS上的移动Safari和Android ICS).
在CSS中,很容易为这样的精灵表触发硬件加速(至少在具有关键帧和步骤的现代浏览器中) - 你只需这样做:
background-image: url(my.svg);
-webkit-animation: walk 1s steps(12, end) infinite;
调用此处显示的基于关键帧的动画:
@-webkit-keyframes walk {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(-100%, 0, 0); }
}
使用translate3d应该让GPU启动,整个过程应该是iOS移动Safari和Android ICS浏览器中的硬件加速.
令人惊讶的是,考虑到它是一种蛮力技术和相当大的矢量动画(600x600px用于测试) - 整个事情过得很快.但它并不完美 - 它在起飞前在Safari中闪烁.并且在ICS浏览器中它一直闪烁,所以它不是真的可用.
所以我们尝试了通常的技巧来摆脱闪烁,例如:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
但那没用.那么我们尝试在内存中动态栅格化SVG并将其用作-webkit-transform的纹理:scale3d(1,1,0),但这对以太没有帮助.
最后,我们用相同大小的渲染出的PNG/JPG精灵表替换了SVG,认为复杂的矢量对于浏览器来说太多了 - 但是猜猜是什么？它也是同样的问题 - 所以它根本不是SVG渲染 - 它是一个浏览器绘图问题.进一步证明,如果我们将动画减慢到1FPS - 闪烁仍然存在.
图像对GPU来说太大了吗？我们是否达到了您在浏览器(特别是移动设备)中舒适绘制/动画的性能限制？
我真的很感激如何摆脱闪烁的想法/黑客(特别是因为它表现得太快).它只是一种很有前途的技术 - 适应不同屏幕大小的高性能浏览器动画 - …
我有一个复杂的布局,我用Flexbox垂直和水平地对齐各种元素.
然后最后一个元素margin-right:auto;应用于向左推动元素(并否定它们的居中).
这在除了IE10/11之外的任何地方都能正常工作并且让我发疯.
HTML/CSS示例:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}<div id='container'>
<div …css internet-explorer flexbox internet-explorer-10 internet-explorer-11
我正在努力为我的一些高级学生组建一个小型(ish)暑期学校项目,并正在研究如何做到最好和使用什么 - 希望这里有人可以指出我正确的方向.
我们感兴趣的是研究HTML5是否足以在其中创建实时协作绘图白板 - 纯粹通过使用没有插件的Web技术(所以CSS,HTML5/DOM和Javascript).我们最终要努力的是 - 例如,在教室的大屏幕上显示中央服务器上的在线画布/页面.然后我们的学生/用户将拿出他们的智能手机,在他们的移动浏览器中加载页面(我现在完全可以将其限制为webkit移动浏览器)并用触摸/手指在他们的屏幕上绘图(或者用鼠标在PC上绘图) - 猜测这并没有太大的区别)并且它会在每个人的实时更新 - 无论是在他们的屏幕上还是在教室的中央大屏幕上.
我猜测推送/获取请求对此来说太慢了 - 它可以通过websockets解决吗？有没有人有任何好的JS库可供推荐？
此外,理想(但学生更容易理解)架构的外观如何.假设你在一个clasroom中有30个并发用户 - 每个用户都会将websockets连接到服务器,服务器将所有请求汇集/组合成一个,然后返回组合文件(某种最小的JSON甚至只是坐标) )为每个连接的用户？
websockets和(我猜测)画布能够采取这个吗？所以一切看起来都很活泼？是否有类似jQuery的JS库可以让我们的生活变得更轻松 - 或者你认为它对于为期2周的暑期学校项目来说太复杂了吗？
我们有一个相当复杂的JS webapp,可以在浏览器中以不同的方式(字符串,arrayBuffer,base64,二进制)加载不同的资源(HTML模板,额外的JS/CSS文件,JSON数据,图像,视频,声音)(只读不写作).现在,我们想对其进行更改,以使所有内容在不同平台上脱机(包括资源)作为Cordova移动应用程序.
问题#1 - 从本地文件系统加载文件
它使XHR对本地file://资源的请求在任何地方都能正常工作,但由于Android正在向Chrome内部过渡,因此Chrome现在是一个显示阻止器.
好的,还剩下2个选项:
遗憾的是, 普通的vanilla File API 总是需要用户交互(比如点击输入框)来获取文件引用加上IE10是禁止的.好的,所以唯一的选择是为PhoneGap 使用自定义的File API插件 - 这给我们带来了下一个问题.
问题#2 - (跨平台？)文件路径在PhoneGap中
我喜欢PhoneGap CLI - 你在终端输入一些命令,它为你管理不同平台的文件和构建.或者是吗？
据我所知,根据PhoneGap你应该把所有东西放在WWW文件夹中 - 但是(一旦你构建应用程序),疯狂的事情是 - 没有简单的方法来读取这些文件(通过File API插件)从PhoneGap放置它们.
您认为fileSystem.root(LocalFileSystem)指向该文件夹,但至少在iOS上,WWW文件夹位于您的应用程序内,但fileSystem.root引用指向外部Documents文件夹(仍需要在Android上测试它,但我猜测它再次有不同的东西).
经过一些修补后,我想出了如何进入WWW文件夹,但它不灵活,hacky,感觉它不应该工作(iOS目前只有):
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
fileSystem.root.getDirectory("../HelloWorld.app/www", {create: true}, function(entry) {
entry.getFile("test.json", {create: false}, function(fileEntry) {
fileEntry.file(function(file){
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log(evt.target.result);
};
reader.readAsText(file);
}, fail);
}, …我通常在本地Mac/MAMP安装上进行大量开发/测试,然后只需在设备位于同一网络时输入正确的IP地址,即可通过智能手机/平板电脑访问它.
但是,我经常遇到需要在没有互联网且我的设备不在同一网络上的地方演示或测试我的网络应用程序的情况.那我该怎么办？
所以我想做的还有以下几点:
同样,没有"真正的"互联网或其他涉及的AP.如果我的Mac也可以作为DHCP服务器(因此自动为通过WiFi连接的设备分配IP),这将是理想的,但如果那太复杂,那么我只需手动输入静态IP.顺便说一下,我不需要像本地域名这样的任何花哨的东西 - 只是IP很好:)
任何想法如何能够完成这样的事情？如果需要或它使这个工作流程更容易或更快 - 我也不会超越购买其他软件来实现这一目标.
BTW例如我对这个解决方案抱有很高的期望,但它似乎不完整,因为我的设备仍然报告网络没有互联网并且拒绝连接.内置的Mac连接共享也可能有所帮助(还不确定如何？)但如果它们全部脱机,要共享什么连接？
所以我基本上是这样做的（简化的）......
var script = '...some JS code...',
blob = blob = new Blob([script]),
worker = [];
for (var i=0; i<10; i++) {
worker[i] = new Worker(URL.createObjectURL(blob));
}
...动态创建同一个 JS 文件的 10 个实例并将其传递给 10 个 Web Workers（然后控制器/委托者在 10 个任务之间划分特定任务以进行进一步处理 - 但这对于目前这个问题并不重要） 。
这一切都工作正常，但在检查 Chrome 开发人员工具（网络）中的代码后，我发现 Chrome 确实创建了同一文件的 10 个单独版本（花费额外的初始化毫秒数 - 可以看到创建的每个附加文件的瀑布）它是同一个文件。
如果我URL.createObjectURL(blob)在循环之外进入一个单独的变量，然后将该变量传递给循环中的工作人员 - 它不再正常工作 - 似乎所有工作人员都共享完全相同的 JS 文件（即使我希望每个工人都会启动自己单独的进程）。
有任何想法吗？我可以以某种方式URL.createObjectURL(blob)只创建一次，然后以某种方式复制/克隆它吗？不确定这是否会有所帮助或使事情有所不同？
所以我有一个项目,我正在尝试最大限度地优化相当复杂的Javascript函数 - 部分原因在于它应该在智能手机(Webkit)上运行并且每一点都很重要.
我一直在使用各种调试和计时技术来完成我的代码并重写可能很慢的所有内容 - 比如基于jQuery的部分,其中本机可能做得更好等等.该函数的作用基本上是采用一串html文本并将其剪切为完全适合3个没有固定位置或大小的DIV(客户端模板机制).
目前,整个功能需要大约100毫秒才能在iPad浏览器中执行(但在生产环境中我需要理想地执行200次)问题是,在100毫秒之内,至少20毫秒是因为这一行代码(在3个循环中):
var maxTop = $(cur).offset().top + $(cur).outerHeight();
"cur"只是对容器DIV元素的引用,上面的行正在计算它的底部位置(所以我的文本应该中断).从查看偏移的jQuery代码我理解它使用getBoundingClientRect甚至消除jQuery偏移/大小调整并直接调用它没有加速它 - 所以它的getBoundingClientRect错误(至少在Webkit中).我对它进行了一些研究,我理解它会导致布局重绘.
但仍然 - 不能相信我做了多个DOM清除/克隆/附加,所有这些都比简单的元素位置查找快得多？有什么想法吗？也许某些webkit具体？或者不会导致重绘的东西？
非常感谢!