你的位置:首页 > 软件开发 > 网页设计 > HTML5性能优化

HTML5性能优化

发布时间:2016-03-10 20:00:11
HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高 ...

HTML5性能优化

 

        在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高度相似,不知道是谁抄袭谁的,大家可以鉴别下真伪,下面附上地址。

        http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdf

        http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/

        http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/

 

        前面是读后感,下面是我针对最近几天学习到的提高Web性能进行了篇幅不小的总结,一来为新人提供帮助,二来自己做一下笔记,加深记忆。

 

--减少重绘

        在HTML页面完成展现之后,动态改变页面元素或调整CSS样式都会引起浏览器重绘,性能的损耗直接取决于动态改变的范围:如果只是改变一个元素的颜色之类的信息则只会重绘该元素;而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘。

        减少重绘并不是说不要重绘,而是要注意重绘范围:①改动的DOM元素越深则影响越小,所以尽量深入节点改动;②对某些DOM样式有多重变动尽量合并到一起修改。

 

以改变一个<a>标签的背景色、宽度和颜色为例。

 

<a href="javascript:void(0);" id="example">传统的代码</a> <script> var example = document.getElementById("example"); example.ondblclick = function() { example.style.backgroundColor = "red"; example.style.width = "200px"; example.style.color = "white"; } </script> 

 


原标题:HTML5性能优化

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。