加载 Javascript 最佳实践
作者：sofish 来源：幸福收藏夹 发布时间：2011-01-16 18:29:00
相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生。而这 35 条最佳实践中，对 Javascript 的加载顺序的要求是：Put Scripts at the Bottom。因为根据HTTP/1.1 specification 看来，在同一时间加载两个文件是最理想的，而 Javascript 脚本会阻碍平行下载。Steve 说那是 2008 – 2009 那个时代用的。现在，加载 Javascript 已经有了革命性的化变。
在开讲之前，有一个必须解决的问题是：为什么我们要把 JS 文件放在 </body> 之前的最底部。根本原因是，它不能平行下载。而其实并不是所有浏览器都不支持。现在大部分浏览器都支持 Script 的平行下载，除了老掉牙的 IE6&7、Firefox 2&3.0、 Safari 3、Chrome 1。但我们最熟悉的老掉牙同学 IE6 （或以IE为核的那些壳）还是中国（甚至世界上）市场上占用率最高的浏览器，因此我们需要一个折衷的方案。
一、分析
我们有6种方法可以实现平行（NON-Blocking）下载：
XHR Eval – 用 XHR 下载，并 eval() 执行 responseText.。
XHR Injection – 用 XHR 下载，在页面中动态创建一个 script 元素，并将 responseText 作为其 text 。
Script in Iframe – 把脚本放在 HTML 中，使用 ifame 来下载它。
Script DOM Element – 动态创建一个 script 元素，把 src 指向脚本URL.
Script Defer – 给 script 标添加 defer 属性
document.write Script Tag – 利用 document.write 把 <script src=""> 添加到 HTML 中。但这个只对 IE 有效。
兼容性可看下图：
0
投稿猜你喜欢
- 前言 绝大多数的Oracle数据库性能问题都是由于数据库设计不合理造成的，只有少部分问题根植于Database Buffer、Share P
一、问题描述使用vscode，在markdown的预览模式下无法预览网络图片二、本机环境该问题与电脑硬件以及操作系统环境无关。本机markd- 字典与json字符串区别# python 中的字典格式，是dict类型{'a': 'sd'}如果声明a =
- 在Flask中配置日志在Flask应用程序中，可以使用Python的标准logging模块来配置日志记录。以下是一个简单的示例，在其中将日志
- The Only Thing We Have To Fear Is Premature Standardization原文地址：http:/
- 这篇博客将介绍如何通过OpenCV中图像修复的技术——cv2.inpaint() 去除旧照片中的小噪音、笔划等。并提供一个可交互式的程序，利
- Menu（菜单）组件用于实现顶级菜单、下拉菜单和弹出菜单。何时使用 Menu 组件？Menu 组件通常被用于实现应用程序上的各种菜单，由于该
- SQL Server 2000中存在的许多的备份和恢复特性都同样保留在了SQL Server 2005中，但是有一些新的提高同样值得我们关注
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清
- Python字典设置默认值我们都知道，在 Python 的字典里边，如果 key 不存在的话，通过 key 去取值是会报错的。>>
- 本文实例讲述了python在windows命令行下输出彩色文字的方法。分享给大家供大家参考。具体分析如下：默认情况下python在控制台输出
- mysql 按年、月、周、日分组查询1.按照年份分组查询SELECT DATE_FORMAT(t.bill_time,'％Y'
- 本文实例讲述了SESSION存放在数据库用法。分享给大家供大家参考。具体如下：<?php/*CREATE TABLE `ws_sess
- 本文实例讲述了JS模拟实现哈希表及应用。分享给大家供大家参考，具体如下：在算法中，尤其是有关数组的算法中，哈希表的使用可以很好的解决问题，所
- MYSQL初学者使用指南与介绍 一、连接MYSQL。 格式： mysql -h主机地址 -u用户名 －p用户密码 1、例1：连接到本机上的M
- 简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁"
- 本文介绍了python画图时设置分辨率和画布大小的实现，主要使用plt.figure()，下面就一起来了解一下plt.figure()示例：
- text函数的功能是向数据点添加文本说明。语法text(x,y,txt)text(x,y,z,txt)text(___,Name,Value
- 单例模式的概念单例模式很容易记住。就像名称一样，它只能提供对象的单一实例，保证一个类只有一个实例，并提供一个全局访问该实例的方法。在第一次调
- 概览最近开始在学习mysql相关知识，自己根据学到的知识点，根据自己的理解整理分享出来，本篇文章会分析下一个sql语句在mysql中的执行流
