HTML5性能优化_html/css_WEB-ITnose

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样式有多重变动尽量合并到一起修改。

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

传统的代码    var example = document.getElementById("example");  example.ondblclick = function() {  example.style.backgroundColor = "red";  example.style.width = "200px";  example.style.color = "white";  }

以上会执行3次重绘，而通过CSS代替javascript多次执行则只进行一次重绘。

   .dblClick {  width: 200px;  background: red;  color: white;  }   CSS优化的代码    var example = document.getElementById("example");  example.ondblclick = function() {  example.className = "dblClick";  }

避免脚本阻塞加载

当浏览器在解析常规的script标签时，它需要等待script下载完毕，再解析执行，而后续的HTML代码只能等待。CSS文件引入要放在头部，因为这是HTML渲染必备元素。为了避免阻塞加载，应把脚本放到文档的末尾，而CSS是需要放在头部的！

 ......

--避免节点深层级嵌套

深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建DOM文档的机制有关。浏览器会把整个HTML文档的结构存储为DOM“树”结构。当文档节点的嵌套层次越深，构建的DOM树层次也会越深。

如下代码，完全能够去掉

或其中一个标签。

嵌套

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111282

更新时间：2022-11-17 阅读：41次