相关标签

各浏览器的并行连接数(同域名)

Browser HTTP/1.1 HTTP/1.0 IE 6,7 2 4 IE 8 6 6 Firefox 3+ 6 6 Safari 3+ 4 4 Chrome 3+ 4 4 Chrome 11+ 6 ? Opera 10+ 4 4 Opera 11+ 16 ? Updata:2011年5月24日,增加 Chrome 11+、Opera 11+。 扩展阅读:《Roundup on Parallel Connections》

... 21 条评论 »

CSS Expression 的优化

IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。 如何对 CSS Expression 进行优化呢? 至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。 old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案: 在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。 例如: div { zoom: expression(function(el){el.style.zoom = “1”; alert(el.tagName);}(this)); } 补充几点: CSS Expression 执行在任意一个匹配的元素上。 在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。 CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。 最近在 Ajaxian 的文章《Creating a querySelector for IE […]

... 18 条评论 »

影响 reflow 的因素及其优化

如果对于 reflow 这个概念你还不太清楚或者不知道,请先阅读: 《Notes on HTML Reflow》 《What is a reflow?》 《Gecko:Reflow Refactoring》 《reflow》 《形象化的reflow》 《样式的执行效率-reflow》 Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素: 调整窗口大小(Resizing the window) 改变字体(Changing the font) 增加或者移除样式表(Adding or removing a stylesheet) 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input […]

... 13 条评论 »

innerHTML 的一些问题

innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题: 当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>…</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。 设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。 还有几个其他次要的缺点,也值得一提的: 你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。 你不能在所有浏览器的所有 HTML 元素上设置 innerHTML 属性(比如,Internet Explorer ... 7 条评论 »

提高Web页面的性能(一)

优化网站性能的14条规则(更新) 1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css] 9. 减少 DNS 查询 [content] 10. 压缩 JavaScript 和 CSS […]

... 14 条评论 »

URL 优化的一个技巧

今天 承志 看到的,感觉比较有收获,分享一下: When generating hyperlinks, always include a trailing slash if possible. For instance, navigating to http://msdn.microsoft.com/ie takes one more roundtrip than http://msdn.microsoft.com/ie/. When the browser navigates to the /ie url, the server merely sends down a 301 to the /ie/ url. Both links work, but the second version is faster. 也就是说,在地址栏中发送 URL:http://msdn.microsoft.com/ie ,服务器将会产生一个 […]

... 13 条评论 »

通过 Dom 方法提高 innerHTML 性能

function replaceHtml(el, html) { var oldEl = typeof el === “string” ? document.getElementById(el) : el; /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl.innerHTML = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* 一旦我们从 DOM 上移除老的元素,则返回新的元素引用。*/ return newEl; }; 此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 […]

... 11 条评论 »