`

把Javascript脚本放到页面的底部的好处

 
阅读更多
转自:http://developer.yahoo.com/performance/rules.html#js_bottom

Put Scripts at the Bottom

tag: javascript
[size=x-small]
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.


(google 翻译)
脚本所造成的问题是,他们阻止并行下载。 HTTP/1.1规范建议浏览器不超过两部分组成,每个主机的并行下载。如果您的图片,从多个主机服务,你可以得到两个以上的下载发生在平行。然而,当一个脚本下载,浏览器不会启动任何其他下载,甚至在不同的主机名。

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
在某些情况下它是不容易移动脚本的底部。例如,如果脚本使用document.write来插入页面的内容的一部分,它可以不会被移到在页面低。还可能有范围的问题。在许多情况下,有办法要解决这些情况。

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.


常常会出现另一种建议是使用递延脚本。 defer属性表示脚本不包含文件撰写,是一个线索,他们可以继续渲染的浏览器。不幸的是,Firefox不支持defer属性。在Internet Explorer中,脚本可能会被推迟,但没有那么多需要。如果脚本可以被推迟,它也可以被移动到页面底部。这将使您的网页加载速度更快



[/size]
分享到:
评论

相关推荐

    [高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.文字版

    在讨论非阻塞脚本时,作者推荐了将JavaScript代码放到页面的底部,或者使用动态创建script元素的方法来避免阻塞页面的解析。 书中还介绍了使用XMLHttpRequest进行脚本注入的技术,这是一种异步加载JavaScript文件的...

    程序天下:JavaScript实例自学手册

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    JavaScript的特效代码集

    JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,它的强大之处在于能够为用户带来丰富的交互体验。本资源“JavaScript的特效代码集”汇集了一系列有趣的、实用的JavaScript特效,旨在帮助开发者快速实现...

    《程序天下:JavaScript实例自学手册》光盘源码

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    强大的javascript特效

    12. 无限滚动:当用户滚动到页面底部时自动加载更多内容,实现无缝浏览体验。 13. 地图集成:如Google Maps API,结合JavaScript实现地图交互和定位功能。 14. 图片裁剪工具:允许用户预览并裁剪上传的图片,如...

    javascript标签在页面中的位置探讨

    在网页开发中,JavaScript代码的引入位置是一个关键的优化策略,因为它直接影响到页面的加载速度和用户体验。传统的做法是将标签放置在HTML文档的部分,但随着网页复杂性的增加,这种做法可能会导致页面加载延迟,...

    用dreamweaver做的个人主页(html\javascript)

    初学者可以通过查看源代码来学习如何组织页面元素,如使用`<div>`进行布局,`<img>`插入图片,`<audio>`播放音乐,以及`<a>`链接到其他页面或资源。 2. **JavaScript**: JavaScript是一种客户端脚本语言,用于实现...

    javascript犀利的效果

    17. **滚动加载**:当用户滚动到底部时,自动加载更多内容,如社交媒体的时间线。 18. **触摸事件**:针对触摸设备优化,提供良好的手势识别和响应。 19. **网页字体动画**:动态加载字体或创建文字动画效果,提升...

    JavaScript实现俄罗斯方块.rar

    JavaScript实现的俄罗斯方块是一款基于浏览器的经典游戏,它利用了JavaScript这门强大的客户端脚本语言,为用户在网页上提供了一种重温经典游戏的方式。在本文中,我们将深入探讨JavaScript如何构建这样的游戏,并...

    JavaScript特效24个

    11. **无限滚动**:当用户滚动到底部时,JavaScript可以自动加载更多内容,实现无限滚动的效果。 12. **滑块和滑动面板**:JavaScript可以创建可滑动的面板,如选项卡、侧边栏等,提供更丰富的界面展示方式。 13. ...

    底部带缩略轮播图.rar

    描述中同样提到了“底部带缩略轮播图”,这可能是指在页面底部有一个固定的区域,显示了轮播图的主要图片以及一系列缩略图,用户可以通过选择缩略图来直接跳转到对应的主图。 标签“web”表明这是关于Web技术的内容...

    js放到head中失效的原因与解决方法

    那么当浏览器解析到这部分代码时,页面的大部分内容可能还没有被加载和解析,特别是当JavaScript代码中包含了对页面元素的操作(例如事件监听)时,由于此时对应的DOM元素可能还不存在,因此JavaScript脚本无法正确...

    javascript各种特效实例代码

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互和动态效果。在网页设计中,JavaScript特效的运用极大地提升了用户体验,使网页更具吸引力和互动性。以下将详细介绍标题和描述...

    javascript插件

    JavaScript 插件是一种扩展网页浏览器功能的工具,它利用JavaScript编程语言编写,通常以扩展、脚本或组件的形式存在。JavaScript作为Web开发的核心技术之一,为网页提供了动态交互的能力,而JavaScript插件则进一步...

    HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】

    例如,`<header>`和`<footer>`用于定义页面头部和底部,`<article>`和`<section>`则帮助组织内容区块。HTML5还支持离线存储、拖放功能、媒体元素(如`<audio>`和`<video>`)等,让网页能提供更丰富的用户体验。 CSS3...

    javascript写在head标签中产生的报错.pdf

    3. **将JavaScript移到`<body>`底部**:最常见也是推荐的做法,将`<script>`标签放到`<body>`标签的底部,确保在执行JavaScript之前,所有依赖的HTML元素都已经加载。 ```html ... <p id="xx">...

    Javascript 默认打开HTML最大化

    为了在页面加载时自动执行这个操作,我们可以将JavaScript代码放入`<head>`标签内的`<script>`标签中,或者在`<body>`标签的`onload`事件中执行。例如: ```html <!DOCTYPE html> window.onload = function() ...

    WEB前端开发.pdf

    把脚本放到底部** - **原因**: 脚本会阻塞页面渲染。如果脚本位于文档顶部,则会导致页面内容无法及时显示给用户。 - **实践建议**: 应尽量将JavaScript脚本放置在HTML文档的底部,即在`</body>`标签之前,这样...

    web前端网页设计期末课程大作业:旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript

    - **多媒体集成**:项目中可能会涉及多媒体元素的集成,如视频播放、音频播放和Flash动画等,这些通常需要使用特定的HTML标签或JavaScript脚本来实现。 - **响应式设计**:考虑到不同设备的屏幕尺寸,项目需要具备...

Global site tag (gtag.js) - Google Analytics