Working Around Caching Issues 关于缓存问题
Adequate cache control can really enhance the user experience, but it has a downside: when revving up your application, you want to make sure your users get the latest version of the static content. This is accomplished by renaming static resources whenever they change.
充分利用缓存控制可真正提高用户体验，但它有一个缺点：当应用程序更新之后，你希望确保用户得到静态内容的最新版本。这通过对改动的静态资源进行重命名实现。
Most often, developers add a version or a build number to filenames. Others like to append a checksum. Personally, I like to use a timestamp. This task can be automated using Ant. The following target takes care of renaming JavaScript files by appending a timestamp in the form of yyyyMMddhhmm:
大多情况下，开发者向文件名中添加一个版本号或开发编号。有人喜欢追加一个校验和。个人而言，我更喜欢时间戳。此任务可用Ant自动完成。下面的目标体通过附加一个 ......
第十章 Tools 工具
Having the right software is essential for identifying bottlenecks in both the loading and running of scripts. A number of browser vendors and large-scale websites have shared techniques and tools to help make the Web faster and more efficient. This chapter focuses on some of the free tools available for:
当确定脚本加载和运行时的瓶颈所在时，合手的工具是必不可少的。许多浏览器厂商和大型网站分享了一些技术和工具，帮助开发者使网页更快，效率更高。本章关注于这些免费工具：
Profiling 性能分析
Timing various functions and operations during script execution to identify areas for optimization
在脚本运行期定时执行不同函数和操作，找出需要优化的部分
Network analysis 网络分析
Examining the loading of images, stylesheets, and scripts and their effect on overall page load and rendering
检查图片，样式表，和脚本的加载过程，汇报它们对整个页 ......
Firebug
Firefox is a popular browser with developers, partially due to the Firebug addon (available at http://www.getfirebug.com/), which was developed initially by Joe Hewitt and is now maintained by the Mozilla Foundation. This tool has increased the productivity of web developers worldwide by providing insights into code that were never before possible.
对开发人员来说，Firefox是一个时髦的浏览器，部分原因是Firebug插件（http://www.getfirebug.com/）由Joe Hewitt首创现在由Mozilla基金会维护。此工具具有前所未有的代码洞察力，提高了全世界网页开发者的生产力。
Firebug provides a console for logging output, a traversable DOM tree of the current page, style information, the ability to introspect DOM and JavaScript objects, and more. It also includes a profiler and network analyzer, which will be the focus of this section. Firebug is also highly extensible, enabling custom panels to be easily added.
Firebug提供了一个� ......
Fiddler
Fiddler is an HTTP debugging proxy that examines the assets coming over the wire and helps identify any loading bottlenecks. Created by Eric Lawrence, this is a general purpose network analysis tool for Windows that provides detailed reports on any browser or web request. Visit http://www.fiddler2.com/fiddler2/ for installation and other information.
Fiddler是一个HTTP调试代理，检查资源在线传输情况，以定位加载瓶颈。它由Eric Lawrence创建，是一个Windows下通用的网络分析工具，可为任何浏览器或网页请求给出详细报告。其安装和其它信息参见http://www.fiddler2.com/fiddler2/。
During installation, Fiddler automatically integrates with IE and Firefox. A button is added to the IE toolbar, and an entry is added under Firefox's Tools menu. Fiddler can also be started manually. Any browser or application that makes web requests can be analyzed. While running, all WinINET traffic is routed through Fiddler, allowing it to monitor and analy ......
Summary 总结
When web pages or applications begin to feel slow, analyzing assets as they come over the wire and profiling scripts while they are running allows you to focus your optimization efforts where they are needed most.
当网页或应用程序变慢时，分析网上传来的资源，分析脚本的运行性能，使你能够集中精力在那些需要努力优化的地方。
• Use a network analyzer to identify bottlenecks in the loading of scripts and other page assets; this helps determine where script deferral or profiling may be needed.
使用网络分析器找出加载脚本和其它页面资源的瓶颈所在，这有助于决定哪些脚本需要延迟加载，或者进行进一步分析。
• Although conventional wisdom says to minimize the number of HTTP requests, deferring scripts whenever possible allows the page to render more quickly, providing users with a better overall experience.
传统的智慧告诉我们应尽量减少HTTP请求的数量，尽量延迟加载脚本以使页面渲染速度更快，向用户提供更好的整体体验。 ......
由于火狐浏览器不支持“removeNode”函数，所以一下代码只支持IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--乒乓球--</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.main{
width:690px;
margin:0 auto;
}
#box{
width:680px;
height:340px;
border:1px solid green;
position:relative;
}
.pingpang{
position:absolute;
width:10px;
height:10px;
background-color:red;
overflow:hidden;
}
.pingpangpai{
position:absolute;
width:60px;
height:10px ......
最新文章 :