空路径对页面性能的影响
- ajian - 岁月如歌今天同事小凡反馈，淘宝有个商品详情页，旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次. 最近对 detail 的渲染速度进行了优化，因此遇到 bug 第一反应是往优化方面找原因. 然而调试了许久才发现，该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生.
空路径对页面性能影响的解决方案
标签：
空路径
请求
http
性能
CSS
相关
| 发表时间：2011-09-29 23:10 | 作者：sofish Lynn
出处：http://sofish.de
前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响。确实，在写 CSS 的时候，用 background:url(#) 还是会对页面进行多一次请求的。
不过，因为写多 CSS，一般需要用空背景来解决 bug 的时候，测试结果用 background:url(about:blank) 才是我们想要的：解 bug，不影响性能。那很简单，解决方案不就不出来？等等，让我们来做个测试吧。
测试地址：http://sofish.de/file/demo/empty_source.html
懒得截图了，自己自行搞搞吧，浏览结果已经把大致的都写在测试页面上了。最终的解决方案是：
- 大胆使用 about:blank 来代替空，或者‘＃’，特别是在 background-image 中使用
- 在 img / script / iframe 这些推荐使用 javascript:” 来解决问题
其他更好的办法？这个测试结果有问题？随时欢迎提供、指正。谢谢。
相关 [路径 页面 性能] 推荐：
空路径对页面性能影响的解决方案
- Lynn - 幸福收藏夹前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响. 确实，在写 CSS 的时候，用 background:url(#) 还是会对页面进行多一次请求的. 不过，因为写多 CSS，一般需要用空背景来解决 bug 的时候，测试结果用 background:url(about:blank) 才是我们想要的：解 bug，不影响性能.
用核心-路径法设计页面
- - 博客 - 伯乐在线英文原文: Boxesandarrows，翻译： 开腾讯CDC. 文章的原名为Designing Screens Using Cores and Paths. 本文作者受到城市规划中“交通需求线”的启发，提出了 网站设计的“核心-路径法”. 区别于通常采用的从框架到主页以及导航的方式，“核心-路径法”让设计者从核心内容入手，由内而外来设计.
使用performance api监测页面性能
- - jackyrong对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情. 通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间. 那么performance API是啥,能做啥和不能做啥呢.
[转]浏览器的加载与页面性能优化
- Allen - linux大棚-roclinux.cn本原创文章属于《Linux大棚》博客，博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载，特在每篇文章前加入此信息，还望读者体谅. 文章部分转自“百度泛用户体验平台”，本文地址为：http://www.baiduux.com/blog/2011/02/15/browser-loading/.
浏览器的加载与页面性能优化
- 彦强 - 百度泛用户体验本文将探讨浏览器渲染的loading过程，主要有2个目的：. 了解浏览器在loading过程中的实现细节，具体都做了什么. 研究如何根据浏览器的实现原理进行优化，提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器种类繁多且不同版本间差距很大，本文将侧重一些较新的浏览器特性.
页面性能中的几个宏观指标
- - Jinpu's blog最近在做提升淘宝页面性能相关的事情. 从宏观层面，传统web页面，我比较关注的几个指标：. 用户的动作效果（比如点击），超过0.1s，用户就觉得不流畅；. 出现loading的最佳时间为0.4s后，这会让用户忽略前面0.4s的等待；. 对于用户的输入，0.1s-1s用户感觉计算机在为他处理事情，是可以接受的等待，必须在1s内给出对应输出，这也意味着网页的首屏显示时间最理想的为1s内；.
浏览器的加载与页面性能优化
- - 可咔酷 | 网络杂货铺本文将探讨浏览器渲染的loading过程，主要有2个目的：. 了解浏览器在loading过程中的实现细节，具体都做了什么. 研究如何根据浏览器的实现原理进行优化，提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器种类繁多且不同版本间差距很大，本文将侧重一些较新的浏览器特性.
使用Chrome DevTools的Timeline分析页面性能
- - SegmentFault 最新的文章随着webpage可以承载的表现形式更加多样化，通过webpage来实现更多交互功能，构建web应用程序已经成为很多产品的首要选择. 这种方式拥有非常明显的优势：跨平台、开发便捷、便于部署和维护等等，但随着功能的不断积累，web应用程序也会变得越来越复杂. 但是，我们仍然想要在webpage支持丰富的呈现形式的同时，让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿，就需要我们使用一些比较直观的方式来分析衡量页面的性能问题，为性能优化方案提供依据.
Javascript高性能动画与页面渲染
- - 极客521 | 极客521如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画. 但我认为至少在现在这个时间点，高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 页面是每一帧变化都是系统绘制出来的(GPU或者CPU). 但这种绘制又和PC游戏的绘制不同，它的最高绘制频率受限于显示器的刷新频率(而非显卡)，所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second，以下用fps简称)，对应于显示器的60Hz.