Javascript CSS3盒影嵌入痛苦的性能杀手

当我开始使用Awesomium（适用于Visual Studio 2010）部署桌面可执行文件的第一次测试时，经过几个小时的调试，我在webkit中看到了很多渲染问题，因为键入时重绘速度慢，IO速度慢。首先，我认为这是因为缓冲的进程API不可用或者在进程IO缓冲上有任何问题

在那之后，我使用QtWebKit（同样使用VisualStudio2010SDK）用Qt5重新开始了一个新项目，我的表现最差

在这一切之后，我又用Tide（Webkit/Linux）从头开始了另一个项目——我正在一个文件一个文件地添加，并分析应用程序的行为

然后，我看到该应用程序可以在index.htm上以低CPU使用率和60 FPS的速度运行

因此，在我将原始应用程序中的所有JavaScript文件放入这个新项目之后，他没有改变帧速率。但是当我将包含类的CSS放在下面时，应用程序开始消耗100%的CPU，帧速率下降到~10 FPS

.overlay { 
    padding:30px 15px;
    background:#fff;
    background-color: #CCCCCC;
    background-image: -moz-linear-gradient(#F5F5F5, #CCCCCC);
    -webkit-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    -moz-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
}

示例：

我如何重写这个类，更准确地说，我如何重写这个没有框阴影插入的类

我尝试使用一个透明的PNG作为背景，但没有运气，但到目前为止，轮廓是相似的

---

由于该项目在CSS中多次出现框阴影插图，如果有人能告诉我，我必须改进已经批准的布局-删除框阴影插图。

我以前遇到过这个问题，解决方法是停止使用阴影，使用小尺寸的图像在盒子周围形成阴影。

毕竟我发现了另一种使用边框图像的技术

.overlay { 
    border:30px solid transparent;
    -webkit-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Opera */
    border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch;
}

查看小提琴解决方案：

---

但是有限制-我不能使用border radius，我需要在container Class.overlay中使用另一个DIV，但解决了我的大部分问题。

您可以使用css和DIV编写类似的内容：

<table>
    <tr>
        <td style="width:5px;heigth:5px"><img src="top-left-corner.png"></img></td>
        <td></td>
        <td style="width:5px;heigth:5px"><img src="top-right-corner.png"></img></td>
    </tr>
    <tr>
        <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td>
        <td>
            Contet of the box
        </td>
        <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td>
    </tr>
    <tr>
        <td style="width:5px;heigth:5px"><img src="bottom-left-corner.png"></img></td>
        <td></td>
        <td style="width:5px;heigth:5px"><img src="bottom-right-corner.png"></img></td>
    </tr>
</table>

盒子的内容

CSS3阴影、动画等使用硬件加速，如果阴影和重动画一起使用，你的处理器会尖叫，这是css的裁剪版本，最大限度地发挥我的作用，通过维护你的输出，我制作了一个使用阴影和重CSS3动画的，你可以看一看你的处理器尖叫，如果你想要一个静态的阴影效果，考虑使用一个图像背景。@ Asad，问题是如何使用图像背景来获得类似的效果？technique@Mr.Alien比较一下，谢谢！我已经试过了，我收到了一条消息，明天我只能接受我自己的答案是正确的。+1在不添加额外包装或使用盒阴影的情况下制作流体大小元素的阴影的好技巧（即使没有插入阴影，移动设备上的性能杀手）。虽然浏览器支持不如其他技术好，但表格不应该用于布局，因为在不显示实际表格数据时，表格对内容没有语义。