Js 问 题 分 析 --js 影 响 页 面 性 能 现 状 分 析 : 问 题 陈 述 分 析 问 题 : 抽 象 问 题 根 源, 通 过 实 例 或 推 理 证 明 问 题 的 严 重 性 问 题 引 申 : 以 现 有 问 题 为 点 开 始 扩 散, 这 将 导 致 其 它 什 么 问 题, 或 同 一 类 型 的 问 题 问 题 总 结 : 从 分 散 开 始 回 归, 再 次 抽 象 问 题 5.1 DOM 操 作 不 当 影 响 页 面 性 能 现 状 分 析 : 我 们 的 页 面 上 对 DOM 的 操 作 在 所 难 免, 无 论 是 焦 点 图 切 换 这 样 的 交 互 效 果, 还 是 各 种 数 据 接 口 的 应 用,DOM 操 作 都 是 重 要 的 环 节 目 前 页 面 上 的 JavaScript 越 来 越 多, 一 旦 我 们 的 DOM 操 作 不 当, 必 然 对 页 面 产 生 严 重 的 性 能 问 题 比 如 : 电 脑 网 报 价 库 左 树 appendchild 插 入 js 的 方 式, 都 存 在 DOM 操 作 阻 塞 整 个 页 面 渲 染 的 问 题 分 析 问 题 : DOM 是 文 档 对 象 模 型, 最 主 要 的 web 前 端 应 用 程 序 接 口, 是 一 个 独 立 于 语 言 的, 使 用 XML 和 HTML 文 档 操 作 的 应 用 程 序 接 口 DOM 在 浏 览 器 中 的 接 口 是 通 过 JavaScript 实 现 的, 客 户 端 大 多 数 脚 本 程 序 都 需 要 与 文 档 打 交 道, 使 得 DOM 成 为 JavaScript 代 码 日 常 行 为 中 重 要 的 组 成 部 分 浏 览 器 通 常 要 求 DOM 实 现 和 JavaScript 实 现 保 持 相 互 独 立 例 如, 在 Internet Explorer 中, 被 称 为 JScript 的 JavaScript 实 现 位 于 库 文 件 jscript.dll 中, 而 DOM 实 现 位 于 另 一 个 库 mshtml.dll( 内 部 代 号 Trident) 这 种 分 离 技 术 允 许 其 他 技 术 和 语 言, 如 VBScript, 受 益 于 Trident 所 提 供 的 DOM 功 能 和 渲 染 功 能 Safari 使 用 WebKit 的 WebCore 处 理 DOM 和 渲 染, 具 有 一 个 分 离 的 JavaScriptCore 引 擎 ( 最 新 版 本 中 的 绰 号 是 SquirrelFish) Google Chrome 也 使 用 WebKit 的 WebCore 库 渲 染 页 面, 但 实 现 了 自 己 的 JavaScript 引 擎 V8 在 Firefox 中,JavaScript 实 现 采 用 Spider-Monkey( 最 新 版 中 称 作 TraceMonkey), 与 其 Gecko 渲 染 引 擎 相 分 离 摘 自 High Performance JavaScript 两 个 独 立 的 部 分 以 功 能 接 口 连 接 就 会 带 来 性 能 损 耗, 这 意 味 着 每 次 访 问 DOM 都 需 要 付 出 一 定 代 价, 你 可 以 把 DOM 想 象 成 一 个 岛 屿, 把 JavaScript 想 象 成 另 一 个 岛 屿, 两 个 岛 屿 有 一 座 桥 连 接, 每 次 过 桥 都 需 要 支 付 一 定 的 过 桥 费, 可 以 想 到, 你 访 问 DOM 岛 次 数 越 多, 所 支 付 的 过 桥 费 也 就 越 多, 所 以 为 了 减 少 开 销, 应 该 减 少 访 问 DOM 的 次 数, 尽 量 停 留 在
JavaScript 岛 上 Eg:http://zzb.pcauto.com.cn/power/js/jsProblem/dom.html 问 题 引 申 : 1.HTML 集 合 : HTML 元 素 的 集 合, 例 如 document.getelementsbytagname childnodes 等 得 到 的 都 是 HTML 集 合, 虽 然 HTML 集 合 也 有 length 属 性, 但 它 不 是 数 组 ( 因 为 它 们 没 有 诸 如 push() 或 slice() 之 类 的 方 法 ), 访 问 HTML 集 合 的 length 比 数 组 的 length 要 慢 遍 历 数 组 比 遍 历 集 合 快, 如 果 先 将 集 合 元 素 拷 贝 到 数 组, 访 问 它 们 的 属 性 将 更 快 function toarray(coll) { for (var i = 0, a = [], len = coll.length; i < len; i++) { a[i] = coll[i]; } return a; } 实 在 不 能 转 换 成 数 组, 可 以 将 集 合 的 length 缓 存 起 来, 避 免 多 次 遍 历 集 合 var coll=document.getelementsbytagname("div"); for(var i=0,len=coll.length;i<len;i++){... } http://zzb.pcauto.com.cn/power/js/jsproblem/dom2.html 2. 循 环 : 循 环 向 来 是 程 序 效 率 的 重 中 之 重, 不 当 的 循 环 会 将 程 序 的 性 能 问 题 放 大 很 多, 对 于 DOM 操 作 来 说, 本 来 这 样 的 操 作 就 已 经 先 天 不 足 了, 如 果 再 放 到 某 些 循 环 中, 带 来 的 影 响 将 会 是 灾 难 性 的 尽 量 使 用 局 部 变 量 来 缓 存 DOM, 避 免 在 循 环 中 访 问 DOM 岛
for(var i=0;i<10;i++){ } document.getelementsbytagname("div")[i].classname="style"+i; var divs=document.getelementsbytagname("div"); for(var i=0;i<10;i++){ divs[i].classname="style"+i; } 问 题 总 结 : DOM 是 一 个 独 立 存 在 的 API, 独 立 使 得 其 可 以 提 供 方 便 的 接 口 得 以 操 作 DOM, 当 然 这 是 以 性 能 为 代 价 换 来 的 在 浏 览 器 中,DOM 提 供 接 口 给 JavaScript 用 于 操 作 xhtml 文 档, JavaScript 解 释 型 语 言 的 特 性 加 上 DOM 的 独 立 性, 使 得 操 作 DOM 很 容 易 造 成 页 面 的 性 能 瓶 颈 5.2 首 屏 js 阻 塞 页 面 http://www.gethifi.com/tools/regex http://zzb.pcauto.com.cn/tools/reg/reg.html 现 状 分 析 : 无 论 是 从 空 白 页 面 新 打 开 一 个 地 址, 还 是 点 击 一 个 链 接 打 开 新 页 面, 页 面 首 屏 的 显 示 快 慢 直 接 决 定 了 用 户 的 第 一 感 受 而 在 众 多 决 定 首 屏 显 示 时 间 的 因 素 中,js 带 来 的 阻 塞 无 疑 是 最 为 严 重 的 由 于 浏 览 器 本 身 的 工 作 原 理, 在 解 析 html 文 档 时 是 至 上 而 下 的 解 析, 且 js 在 调 用 前 需 要 预 先 定 义, 在 html 中 的 体 现 就 是 很 多 js 函 数 的 定 义 代 码 会 直 接 放 在 页 面 头 部 的 head 标 签 内 例 如 :ssi 合 并 js( 含 jquery) 头 部 导 航 广 告 快 搜 接 口 功 能 函 数 ivy <script src="http://www.pconline.com.cn/ssi/js/channel/index.html" type="text/javascript"></script> <base target="_blank" /> </head> 头 部 引 用 js 是 为 了 页 面 上 的 调 用 能 够 生 效 分 析 问 题 : Js 阻 塞 页 面 分 为 两 种 情 况 :js 阻 塞 渲 染 和 js 阻 塞 其 他 请 求
Js 阻 塞 渲 染 : Eg:http://zzb.pcauto.com.cn/power/js/jsProblem/jsblock.html 在 浏 览 器 中,js 脚 本 和 DOM 渲 染 分 别 由 两 个 独 立 的 模 块 来 完 成, 而 浏 览 器 本 身 是 单 线 程 工 作 的, 也 就 是 说, 浏 览 器 在 同 一 时 间 只 能 调 用 其 中 的 一 个 模 块 来 工 作, 而 必 须 暂 停 另 外 一 个 这 样 的 工 作 原 理 使 得 js 的 执 行 对 页 面 的 渲 染 造 成 了 阻 塞 图 5.2.1 浏 览 器 不 能 同 时 进 行 js 执 行 和 DOM 渲 染 事 实 上, 任 何 地 方 的 js 都 会 阻 塞 页 面, 使 页 面 渲 染 停 止, 只 是 从 用 户 体 验 的 角 度 来 说, 首 屏 内 的 js 造 成 的 阻 塞 会 让 用 户 感 觉 更 加 明 显 其 次,js 的 执 行 有 可 能 会 带 来 对 页 面 的 修 改, 在 不 清 楚 页 面 将 会 作 何 修 改 的 时 候 暂 停 渲 染, 也 是 浏 览 器 出 于 效 率 上 的 考 虑 图 5.2.2 Js 的 执 行 同 样 会 阻 塞 页 面 Js 阻 塞 其 他 请 求 : 除 了 异 步 的 js 请 求, 一 般 的 js 请 求 不 会 和 其 他 请 求 并 发 ( 用 document.write 可 以 让 js 和 js 并 发 ), 换 句 话 说, 此 时 浏 览 器 不 会 发 出 其 他 请 求, 浏 览 器 此 时 也 不 会 继 续 解 析 html 代 码, 必 须 等 到 js 接 收 完 毕, 并 执 行 完 毕,html 的 解 析 才 会 继 续 图 5.2.3 Js 阻 塞 页 面 问 题 引 申 : 1.js 代 码 在 html 中 的 位 置 由 于 浏 览 器 至 上 而 下 解 析 html 的 工 作 原 理, 为 了 减 少 js 对 渲 染 的 影 响, 应 该 让 js 代 码 越 靠 近 页 面 的 底 部 越 好, 但 是 这 样 会 带 来 两 个 问 题 : 一 将 所 有 js 都 放 在 页 面 的 最 后, 必 然 会 在 页 面 渲 染 完 成 时 占 用 很 多 的 时 间 去 执 行 和 加 载 js, 此 时 浏 览 器 进 度 条 将 会 呈 现 一 直 运 转 的 状 态, 而 页 面 也 将 呈 现 假 死 ( 无 法 响 应 用 户 的 操 作 ) 二 将 所 有 js 都 放 在 页 面 的 最 后, 一 些 元 素 的 事 件 绑 定 将 会 被 推 后, 即 在 加 载 过 程 中,
虽 然 页 面 已 经 完 成 渲 染 和 显 示, 但 用 户 的 操 作 会 无 效 由 此 看 出, 如 何 在 html 中 放 置 js 代 码, 让 js 能 够 平 稳 加 载 并 执 行, 让 页 面 能 够 渐 进 的 过 渡 渲 染, 将 会 是 另 一 个 值 得 探 讨 的 问 题 2. 页 面 的 首 屏 时 间 基 调 网 络 的 首 屏 时 间 定 义 为 : IE 浏 览 器 显 示 第 一 屏 主 页 面 的 消 耗 时 间 首 屏 的 定 义 以 800X600 像 素 尺 寸 为 标 准 从 开 始 监 测 开 始 计 时, 到 IE 浏 览 器 页 面 显 示 高 度 达 到 600 像 素 且 此 区 域 有 内 容 显 示 之 后 的 时 间 据 基 调 介 绍, 基 调 是 检 测 800x600 范 围 内 的 8 个 点 的 显 示 情 况 来 判 定 首 屏 是 否 显 示 的, 这 是 一 种 相 对 感 性 的 方 法, 目 的 是 为 了 最 大 程 度 的 贴 近 用 户 真 实 的 感 受, 而 实 际 操 作 中, 这 样 的 时 间 点 却 是 受 到 诸 多 因 素 影 响, 无 法 用 技 术 的 手 段 去 测 试 或 模 拟 得 出 准 确 的 结 果 例 如 : 在 首 屏 结 束 位 置 插 入 一 张 1x1 大 小 的 gif 图 片 来 标 记 首 屏 时 间, 如 果 页 面 解 析 很 快, 这 张 小 图 的 请 求 就 会 很 快 发 出, 而 此 时 首 屏 的 内 容 有 可 能 还 在 加 载 或 是 渲 染 中, 所 以 这 种 方 法 并 不 能 反 映 最 真 实 的 情 况 图 5.2.4 基 调 的 工 具 可 以 大 概 确 定 首 屏 时 间, 但 用 其 他 技 术 手 段 并 不 好 确 定
问 题 总 结 : Js 在 web 前 端 应 用 变 得 日 益 重 要, 越 来 越 多 的 应 用 构 建 在 js 上,js 一 方 面 能 给 网 页 带 来 丰 富 便 捷 的 体 验, 另 一 方 面 也 带 来 了 效 率 上 的 问 题 在 js 阻 塞 页 面 渲 染 上 主 要 有 以 下 两 个 方 面 : 一 方 面, 浏 览 器 单 线 程 的 工 作 原 理, 使 得 js 对 页 面 产 生 的 阻 塞 在 所 难 免, 加 上 ie6 这 样 的 低 效 浏 览 器 仍 然 是 市 场 主 流, 阻 塞 带 来 的 问 题 在 现 阶 段 显 得 更 加 明 显 ; 另 一 方 面, 经 过 测 试 有 望 找 到 合 理 安 排 js 的 方 式, 实 现 js 的 渐 进 过 渡, 最 大 程 度 减 轻 js 对 页 面 的 阻 塞, 并 且 随 着 浏 览 器 的 不 断 升 级 与 用 户 硬 件 设 备 的 不 断 提 升, 也 有 助 于 减 少 js 带 来 的 阻 塞 5.3 异 步 js 执 行 时 间 不 确 定 现 状 分 析 : 先 说 说 异 步 和 同 步 的 概 念 : 异 步 是 相 对 于 同 步 而 言 的, 同 步 并 不 是 指 同 时 进 行 活 动, 而 是 指 协 同 配 合 的 活 动 我 们 说 A 和 B 同 步, 是 指 A 执 行 到 一 定 程 度 时 要 依 靠 B 的 某 个 结 果, 于 是 停 下 来, 示 意 B 运 行 ;B 执 行, 再 将 结 果 给 A;A 再 继 续 操 作 所 谓 同 步, 就 是 在 发 出 一 个 功 能 调 用 时, 在 没 有 得 到 结 果 之 前, 该 调 用 就 不 返 回, 同 时 其 它 线 程 也 不 能 调 用 这 个 方 法 摘 自 网 络 行 而 异 步 则 恰 恰 相 反, 即 A 和 B 的 活 动 互 不 影 响 互 不 制 约, 在 A 活 动 时,B 也 可 以 执 在 web 中 的 同 步 异 步 往 往 是 指 客 户 端 和 服 务 器 端 通 信 的 过 程, 传 统 的 过 程 就 是 同 步 的 :
图 5.3.1 Web 中 的 同 步 和 异 步 模 型 目 前 异 步 js 主 要 由 以 下 两 种 方 式 实 现 : 1. ajax: 不 能 跨 域, 依 赖 xmlhttprequest 2. appendchild(scriptdom): 可 以 跨 域, 不 阻 塞 其 后 的 请 求 由 于 ajax 在 跨 域 上 的 缺 陷, 现 在 用 得 较 多 的 是 appendchild (scriptdom) 的 形 式, 如 needjs 和 definejs 中 的 异 步 调 用 都 是 以 appendchild(scriptdom) 作 为 核 心 方 法 为 了 最 大 程 度 减 少 js 的 请 求 对 其 后 请 求 的 阻 塞, 我 们 的 网 站 中 正 逐 步 推 行 按 需 加 载 异 步 请 求 的 模 式 来 对 待 外 链 的 js, 了 解 异 步 js 的 执 行 时 间 和 特 点 显 得 愈 发 重 要 分 析 问 题 : 异 步 js 的 执 行 时 间 在 各 浏 览 器 中 有 不 同 的 表 现 : Eg:http://zzb.pcauto.com.cn/power/js/jsProblem/asynJs/asynJs.html asynjs.html 使 用 appendchild 方 式 异 步 请 求 wirte1 和 write2 两 个 js,write1 体 积 明 显 大 于 write2, 且 write1 先 请 求 结 果, 各 浏 览 器 下 的 执 行 顺 序 略 有 不 同 : ie chrome: 谁 先 返 回 谁 先 执 行 ( 在 没 有 缓 存 的 情 况 下,write2 会 比 write1 先 返 回, 故 可 以 看 到 write2 先 执 行 ); FF: 谁 先 请 求 谁 先 执 行
会 出 错 ) 既 然 js 的 执 行 顺 序 会 有 区 别, 如 果 两 个 异 步 请 求 的 js 有 依 赖 关 系 则 会 引 起 浏 览 器 错 误 : Eg:http://zzb.pcauto.com.cn/power/js/jsProblem/asynJs/asynJs2.html (ie chrome 下 ctrl+f5 图 5.3.2 ie 下 write3 先 请 求, 后 返 回, 后 执 行 问 题 引 申 : 1. 异 步 请 求 如 果 发 出 异 步 请 求 的 脚 本 块 A 本 身 执 行 的 时 间 很 长, 长 到 异 步 请 求 的 脚 本 B 已 经 返 回 还 未 执 行 完, 这 时 浏 览 器 是 会 继 续 执 行 原 来 的 A, 还 是 中 断 A, 转 为 执 行 脚 本 B 呢? 为 此, 我 们 增 加 脚 本 执 行 的 时 间 : Eg:http://zzb.pcauto.com.cn/power/js/jsProblem/asynJs/asynJsCut/asynJsCut.html Ie8 页 面 显 示 (FF chrome 执 行 顺 序 一 致, 时 间 稍 有 不 同 ): waittime1 完 成 :500 毫 秒 waittime2 完 成 :1003 毫 秒 js1 执 行 1088 毫 秒 t1.js 载 入 完 成 从 开 始 到 载 入 完 成 花 费 :1089 毫 秒 可 以 看 到,waitTime1 执 行 完 后 执 行 了 waittime2, 最 后 才 执 行 t1 从 dynatrace 的 跟 踪 也 可 以 看 到,t1.js 在 script 脚 本 还 未 执 行 完 时 就 已 经 接 收 完 毕 ( 图 5.3.3 箭 头 所 示 棕 色 位 置 ), 而 此 时 并 没 有 立 刻 执 行 t1.js, 图 5.3.4 中 显 示,t1.js 是 在 script 脚 本 块 执 行 完 后 才 执 行 的 所 以, 对 于 异 步 请 求 的 js 接 收 完 后, 并 不 会 立 刻 执 行, 而 会 排 队 待 js 引 擎 空 闲 后 再 执 行 这 一 点 和 settimeout 的 机 制 有 些 类 似
图 5.3.3 图 5.3.4 异 步 js 返 回 后 并 没 有 立 即 执 行 2.script 脚 本 块 js 定 时 器 Js 的 执 行 是 按 脚 本 块 为 单 位 一 个 一 个 来 执 行 的 在 遇 到 一 个 脚 本 块 时,js 引 擎 会 把 这 个 脚 本 块 丢 到 脚 本 队 列 ( 也 叫 调 用 堆 栈 ) 中 去 排 队 执 行, 一 旦 当 前 js 引 擎 出 于 空 闲 状 态, 就 会 执 行 脚 本 队 列 里 的 脚 本 块, 先 入 队 列 的 脚 本 块 会 先 执 行 由 于 js 为 单 线 程 执 行, 所 以 每 次 只 能 执 行 一 个 脚 本 块, 这 时 会 阻 塞 其 他 异 步 js 的 执 行 ( 如 鼠 标 单 机 事 件, 定 时 器 触 发, 或 者 异 步 请 求 完 成 ), 这 些 异 步 js 同 样 被 安 排 到 脚 本 队 列 中 等 待 js 引 擎 的 空 闲 settimeout 并 不 是 严 格 意 义 上 的 定 时 器, 而 是 将 js 在 指 定 时 间 后 安 排 到 脚 本 队 列 的 一 种 方 式, 而 实 际 执 行 该 js 的 时 间 则 要 看 脚 本 队 列 中 的 情 况 以 及 js 引 擎 的 空 闲 状 态 来 决 定 另 外, 如 何 将 js 安 排 到 脚 本 队 列, 各 个 浏 览 器 存 在 差 异 看 下 面 的 例 子 : http://zzb.pcauto.com.cn/power/js/jsproblem/asynjs/settimeoutjsblock.html http://zzb.pcauto.com.cn/power/js/jsproblem/asynjs/settimeoutjsblock2.html 第 一 个 例 子,FF 下 settimeout 的 b 偶 尔 会 在 c 前 执 行,ie8 下 即 使 延 时 增 加,b 也 无 法 在 c 前 执 行 第 二 个 例 子, 在 不 延 时 的 情 况 下,FF 和 ie8 都 会 将 b 的 执 行 安 排 到 最 后 (ie6 和 FF 类 似 ) 结 论 :settimeout 执 行 的 js 和 内 嵌 的 js 在 执 行 上 的 顺 序 无 法 保 证 问 题 总 结 : 由 异 步 js 执 行 时 间 的 不 确 定, 引 出 的 是 对 js 异 步 执 行 机 制 的 思 考 通 过 以 上 的 分 析 可 以 初 步 得 出 一 下 结 论 : 1. 异 步 js 的 执 行 主 要 有 以 下 几 类 : 用 户 触 发 的 事 件 处 理 ( 鼠 标 点 击 滚 动 页 面 等 ) 异 步 请 求 的 js 定 时 器 触 发 2.js 引 擎 是 单 线 程 的 3. 异 步 js 会 进 入 js 调 用 堆 栈 中 排 队 执 行
4. 各 浏 览 器 对 于 异 步 js 安 排 到 堆 栈 中 的 处 理 方 式 存 在 区 别, 表 现 出 来 就 是 在 异 步 请 求 js 以 及 定 时 器 触 发 js 在 执 行 顺 序 上 的 不 同 5.4 definejs 的 使 用 现 状 分 析 : 为 什 么 要 用 definejs? 客 观 因 素 : 浏 览 器 单 线 程 的 本 质 决 定 了 以 下 两 个 问 题 : 1.js 的 请 求 阻 塞 其 后 的 请 求 ( 浏 览 器 不 知 道 js 会 做 什 么 操 作, 所 以 在 请 求 js 的 时 候 不 会 请 求 其 他 文 件, 说 不 定 此 时 js 会 有 跳 转 操 作 呢 PS: 这 里 指 的 js 请 求 是 <script src= > 这 样 的 标 签 形 式 ) 2.js 的 执 行 阻 塞 页 面 的 渲 染 ( 由 单 线 程 本 质 决 定, 具 体 查 阅 5.2 的 内 容 ) 这 样 两 个 问 题 使 得 js 成 为 了 页 面 效 率 的 最 大 杀 手, 为 了 保 证 首 屏 的 内 容 能 够 最 快 的 显 示, 让 用 户 得 到 最 快 的 响 应, 排 除 阻 塞 因 素 延 迟 js 成 为 了 最 直 观 的 方 法, definejs 由 此 应 运 而 生 现 实 情 况 : SSI 合 并 js 的 做 法 虽 然 将 多 个 js 的 请 求 合 并 成 了 一 个, 却 在 无 意 识 中 增 加 了 页 面 js 的 冗 余 度 高 耦 合 在 使 用 上 带 来 了 方 便, 也 带 来 了 冗 余 和 笨 重, 加 上 js 对 浏 览 器 的 特 殊 影 响, 使 得 在 这 个 问 题 的 权 衡 上,SSI 的 做 法 是 弊 大 于 利 的 打 破 js 冗 余 带 来 的 不 利 影 响, 让 js 的 调 用 更 加 灵 活 准 确, 也 是 definejs 的 另 一 使 命 definejs 能 做 什 么? 简 单 来 说 definejs 可 以 延 迟 js 的 请 求 definejs 可 以 减 少 js 的 冗 余 definejs 可 以 将 内 嵌 js 对 外 部 js 的 依 赖 关 系 控 制 得 更 加 灵 活 准 确 分 析 问 题 definejs 参 数 详 解 :
图 5.4.1 definejs 的 参 数 说 明 definejs 流 程 详 解 : 图 5.4.2 代 理 机 制 和 回 调 函 数 是 definejs 的 核 心 第 一 步 : 声 明
对 需 要 definejs 的 函 数 进 行 初 始 化 参 数 配 置, 如 : definejs( usejquery,!$,!jquery,!$.getscript=/www1/js/pc.jquery1.4.js ); 具 体 参 数 配 置 可 以 参 照 参 数 详 解 (ps: 对 于 对 象 的 多 级 声 明, 层 级 越 高 放 越 后, 比 如 :$.getjson 在 声 明 时 需 放 在 $ 后, 即 : definejs( $,$.getjson=jquery.js ) ) 第 二 步 : 格 式 化 参 数 这 一 步 会 对 参 数 做 一 下 处 理 : 1. definejs( usejquery,!$,!jquery,!$.getscript=/www1/js/pc.jquery1.4.js ); 会 在 格 式 化 参 数 步 骤 中 分 解 成 完 全 等 效 的 definejs("usejquery =/www1/js/pc.jquery1.4.js "); definejs("!$=/www1/js/pc.jquery1.4.js "); definejs("!jquery =/www1/js/pc.jquery1.4.js "); definejs("!$.getscript =/www1/js/pc.jquery1.4.js "); 2. 通 过! 判 断 是 异 步 还 是 同 步, 如 果 是 同 步,url 是 否 符 合 规 则 3. 是 否 需 要 延 时 处 理 4. 函 数 是 否 已 经 加 载 第 三 步 : 设 置 代 理 函 数 这 里 简 要 说 下 代 理 机 制 的 原 理 : 以 ( fn=fn.js ) 为 例 : 代 理 机 制 会 定 义 一 个 名 字 同 样 为 fn 的 函 数 ( 这 里 为 了 防 止 混 淆, 用 fndl 标 识, 实 际 上 名 字 还 是 fn), 当 第 一 次 调 用 fn(arg) 时, 实 际 上 是 调 用 了 fndl(arg), 而 fndl 将 arg 保 存, 在 回 调 函 数 ok() 中 将 arg 参 数 推 入 到 刚 加 载 的 真 实 函 数 fn 中 事 实 上,fndl 起 到 了 保 存 arg 转 告 arg 的 作 用
打 个 比 方 : 这 里 有 boss 小 秘 打 工 仔 三 个 人,boss 有 些 材 料 要 叫 打 工 仔 去 买, 但 是 打 工 仔 外 出 了, 于 是 boss 找 来 小 秘, 让 小 秘 等 打 工 仔 回 来 时 转 告 他 要 去 购 买 的 材 料, 并 交 了 一 份 购 买 清 单 (arg 参 数 ) 给 小 秘,boss 就 去 旅 游 了, 小 秘 打 了 个 电 话 急 招 打 工 仔 回 来, 等 了 一 会, 打 工 仔 回 来 了, 小 秘 第 一 时 间 将 boss 交 待 的 事 转 告 给 了 打 工 仔, 打 工 仔 接 到 了 清 单, 立 马 出 发, 不 到 一 会 就 将 所 有 材 料 买 回 这 里 的 小 秘 就 是 打 工 仔 的 代 理 函 数, 她 起 到 了 保 存 清 单 和 转 交 清 单 的 作 用 第 四 步 : 加 载 脚 本 具 体 看 下 一 小 节 第 五 步 : 加 载 完 毕, 触 发 ok() 当 js 加 载 完 毕 后, 新 的 fn 函 数 会 覆 盖 掉 代 理 fn, 并 通 过 ok 把 原 参 数 推 到 新 的 fn 函 数 中 调 用 definejs 同 步 和 异 步 如 何 选 择 : 在 definejs 的 参 数 中, 如 果 函 数 名 前 加 上 了! 号, 代 表 此 函 数 调 用 时, 请 求 js 用 同 步 模 式, 这 样 做 会 使 得 页 面 的 解 析 和 渲 染 甚 至 其 后 的 请 求 都 收 到 阻 塞 那 为 什 么 还 要 在 definejs 中 提 供 同 步 模 式 呢? 原 因 在 于 异 步 模 式 发 出 js 请 求 后, 主 程 序 会 继 续 执 行, 此 时 请 求 的 js 还 未 返 回, 如 果 主 程 序 有 立 刻 调 用 依 赖 外 部 js 的 函 数 时, 就 会 因 为 未 定 义 而 报 错 具 体 可 以 看 下 面 例 子 中 的 yb2: eg.http://zzb.pcauto.com.cn/power/js/jsproblem/definejs/definejsty.html 而 同 步 模 式 用 到 了 ajax 的 同 步 机 制, 当 请 求 发 出 后, 主 程 序 会 挂 起 等 待 js 的 返 回, 此 时 主 程 序 不 会 继 续 执 行, 避 免 了 其 后 调 用 还 未 定 义 的 函 数 待 js 返 回 后 才 会 继 续 执 行 主 程 序 可 以 看 上 面 的 例 子 中 的 tb 调 用 因 此, 如 果 行 内 脚 本 中 存 在 依 赖 外 部 脚 本 返 回 值 的 代 码, 就 需 要 用 同 步 模 式 例 如 :jquery 的 链 式 调 用 : $( #id ).hide();// 在 调 用 $ 时, 会 触 发 jquery 的 请 求, 如 果 此 时 不 用 同 步 模 式 暂 停 主 程 序, 程 序 会 继 续 执 行 hide 函 数, 而 hide 函 数 在 jquery 请 求 返 回 之 前 是 未 定 义 的, 所 以 会 报 错 又 如 :new 对 象 的 操 作 :
definejs( slidebox=slide.js ); var a=new slidebox();// 异 步 调 用 时, 执 行 到 slidebox() 时 会 发 出 请 求, 此 时 js 还 未 返 回,a 的 值 已 经 不 是 期 望 得 到 的 对 象 了 a.slide();// 调 用 a 的 slide 方 法, 而 a 并 未 成 为 slidebox 的 对 象,slide 方 法 不 存 在, 报 错 当 然, 如 果 对 于 jquery 这 类 调 用 一 定 要 使 用 异 步 模 式 也 是 有 办 法 的 : 1. 这 需 要 在 请 求 的 js 中 加 入 一 个 外 壳 函 数, 在 外 壳 函 数 中 调 用 js 所 提 供 的 方 法 以 jquery 为 例 : 外 壳 函 数 : function usejquery(fn){ fn(jquery); } 2.defineJS 的 申 明 函 数 换 成 这 个 外 壳 函 数 definejs( usejquery=jquery.js ); 3. 实 际 调 用 时 的 代 码 也 需 放 到 外 壳 函 数 中 usejquery(function($){ $(xx).xxx; }) 可 以 查 看 eg.http://zzb.pcauto.com.cn/power/js/jsproblem/definejs/definejsty.html 中 的 yb3 问 题 引 申 definejs 存 在 的 弊 端 : 1. 对 于 同 步 模 式 请 求 的 js 需 使 用 相 对 路 径, 一 些 动 态 应 用 使 用 definejs 需 要 在 动 态 本 地 存 放 js, 而 不 能 整 站 公 用 2.defineJS 需 在 头 部 预 先 定 义, 且 嵌 入 到 html 页 面 上, 如 果 后 期 需 要 更 新 维 护, 需 要 逐 个 修 改 页 面 3.defineJS 同 步 模 式 由 于 使 用 xmlhttprequest 发 出 请 求, 而 xmlhttprequest 对 于 不 能 指 定 文 档 格 式 的 文 件, 如 :js, 默 认 使 用 utf-8 编 码 而 我 们 的 js 一 般 都 使 用 gb2312 格 式, 且 中 文 在 utf-8 和 gb2312 中 编 码 不 同,( 英 文 和 特 殊 字 符 相 同 ), 所 以, 同 步 加 载 的 js 中 不 应 含 有 中 文, 如 果 一 定 要 加 入 中 文, 则 需 将 js 转 为 utf-8 编 码 这 也 是 pc 的 jquery 中 含 有 下 面 这 句 话 的 原 因 : 4. 延 迟 加 载 的 时 间 无 法 精 确 控 制 definejs 请 求 的 时 机 是 由 浏 览 器 的 解 析 决 定 的, 当 解 析
速 度 很 快, 请 求 有 可 能 会 在 某 些 请 求 前 发 出, 这 主 要 是 由 于 浏 览 器 的 解 析 和 渲 染 无 法 绝 对 一 致 所 导 致 当 浏 览 器 解 析 完 首 屏 的 代 码 时, 往 往 首 屏 还 未 渲 染 完 毕 definejs 语 句 分 析 : 1. function(fn){ if(fn)return callback(false); }//fn 是 否 定 义,fn 需 作 为 参 数, 如 果 未 定 义, 参 数 会 为 undefined, 而 在 函 数 外 如 果 未 定 义, 会 报 错 2.scripts[src]={ onload:false, callbacks:[] }// 把 地 址 作 为 子 对 象 名 3.if(arr.push(a)==1)// 数 组 push 后 返 回 数 组 长 度 4. 初 始 值 初 始 表 达 式 var a=b "default"; var a=b (b="default");//b 的 值 会 作 为 表 达 式 的 值 返 回 给 a 5.function alert(s){ window.definejslog+= \n +s; }// 记 录 调 试 信 息, 不 干 扰 用 户, 可 在 地 址 栏 用 javascript:alert(definejslog) 查 看 6.fn.toString().indexOf( definejslog )// 查 找 fn 的 定 义 代 码 中 是 否 含 有 definejslog 字 样 7.eval.call(window, fn )// 指 定 在 window 作 用 域 下 执 行 fn, 在 js 中 eval 和 with 可 以 动 态 修 改 作 用 域 问 题 总 结 : definejs 是 结 合 了 无 阻 塞 和 按 需 加 载 两 种 优 化 思 路 的 js 加 载 方 案, 虽 然 还 存 在 同 步 预 先 定 义 相 对 路 径 等 问 题, 但 在 实 际 的 使 用 过 程 中,defineJS 确 实 发 挥 了 不 错 的 效 果, 使 得 页 面 在 js 加 载 上 能 够 更 加 合 理 和 规 范, 这 也 是 对 前 端 性 能 以 及 资 源 利 用 的 一 次 大 胆 尝 试, 而 其 中 涉 及 到 的 很 多 方 法 和 思 路, 也 是 了 解 javascript 底 层 原 理 的 很 好 的 实 例
5.5 页 面 内 容 的 浪 费 加 载 现 状 分 析 随 着 互 联 网 的 高 速 发 展 和 全 民 上 网 环 境 的 不 断 提 速,web 网 站 的 数 量 和 复 杂 程 度 都 呈 现 出 爆 炸 式 增 长 的 趋 势 我 们 在 越 来 越 多 的 网 站 上 看 到,Web 页 面 承 载 着 难 以 置 信 的 信 息 量 在 门 户 网 站 首 页, 多 达 四 五 屏 的 页 面 已 经 习 以 为 常, 滚 动 滚 轮 似 乎 成 了 打 开 每 个 页 面 都 必 做 的 操 作 而 这 仅 仅 是 可 见 的 信 息 量, 越 来 越 多 的 页 面 将 信 息 隐 藏 堆 叠 起 来, 即 使 你 看 不 到 它, 即 使 你 不 需 要 它, 但 是 它 的 确 在 那 里, 它 的 确 从 服 务 器 传 输 到 了 客 户 端, 更 重 要 的 是, 它 的 确 占 用 了 带 宽, 换 句 话 说, 它 是 有 成 本 的 如 何 在 不 影 响 用 户 的 操 作 前 提 下, 最 大 化 的 节 约 消 耗 和 成 本, 已 经 成 为 另 一 个 值 得 研 究 的 前 端 领 域 问 题 分 析 : 何 为 浪 费 加 载 : 首 先, 目 前 的 web 页 面 都 基 于 浏 览 器, 而 浏 览 器 可 视 区 域 的 大 小 受 到 显 示 设 备 的 限 制, 所 以, 超 出 视 窗 的 内 容 只 有 通 过 滚 动 条 才 能 够 看 得 到 换 句 话 说, 如 果 一 个 页 面 有 五 屏, 而 你 的 用 户 在 开 完 第 一 屏 后 就 关 闭 了 浏 览 器, 那 么, 第 二 屏 到 第 五 屏 的 数 据 就 属 于 浪 费 加 载 的 范 畴 其 次, 现 在 的 页 面 有 很 多 隐 藏 的 内 容, 默 认 情 况 下 是 不 显 示 出 来 的, 除 非 用 户 进 行 了 某 些 操 作, 比 如 点 击 或 移 上 某 个 元 素, 才 会 触 发 显 示 同 样, 如 果 用 户 并 未 进 行 这 样 的 操 作, 这 些 内 容 也 属 于 浪 费 加 载 的 范 畴 图 5.5.1 用 户 未 切 换 的 选 项 卡 属 于 浪 费 加 载 的 范 畴 原 则 可 见 的 才 是 需 要 的 面 对 页 面 上 的 众 多 信 息, 最 大 化 信 息 利 用 率 的 原 则 就 是 可 见 的 才 是 需 要 的, 换 句 话 说, 当 前 不 可 见 的 就 不 需 要 加 载 不 需 要 显 示, 这 也 是 近 来 提 及 比 较 多 的 按 需 加 载 从 传 统 的 将 信 息 全 部 推 送 给 用 户, 到 让 用 户 自 己 选 择 需 要 的 信 息, 按 需 加 载 事 实 上 是 把 更 多 的 权 利 交 给 了 用 户
不 过, 按 需 加 载 也 是 有 利 有 弊 的 : 利 : 1. 减 少 页 面 的 浪 费 加 载, 节 省 不 必 要 的 带 宽 2. 加 快 页 面 的 载 入 时 间, 减 少 用 户 的 等 待 弊 : 1. 按 需 加 载 的 内 容 基 本 丧 失 了 搜 索 引 擎 抓 取 的 可 能, 会 带 来 一 定 流 量 的 减 少 2. 按 需 加 载 在 触 发 时 才 加 载 数 据, 用 户 会 感 觉 有 一 定 延 迟 3. 如 果 没 有 合 理 的 选 择 按 需 加 载 触 发 的 时 机, 往 往 会 带 来 不 好 的 体 验 有 谁 在 使 用 按 需 加 载 1.yahoo 作 为 世 界 级 的 门 户 网 站,yahoo 对 于 前 端 的 关 注 在 业 内 是 众 所 周 知 的,YUI 也 一 直 是 前 端 行 业 的 风 向 标 Yahoo 首 页 对 于 按 需 加 载 的 使 用 可 谓 发 挥 到 了 极 致, 总 的 页 面 只 有 一 屏 半 的 高 度, 庞 大 的 各 类 内 容 都 放 在 了 左 侧 的 导 航 上 进 行 按 需 加 载 这 样 的 处 理, 使 得 yahoo 首 页 的 加 载 速 度 极 快, 左 侧 还 提 供 了 定 制 功 能, 方 便 用 户 定 制 感 兴 趣 的 信 息 图 5.5.2 Yahoo 首 页 左 侧 大 量 用 了 按 需 加 载 加 载 方 式 : 发 出 请 求 加 载,appendChild 插 入 2. 淘 宝 淘 宝 不 仅 是 国 内 最 成 功 的 C2C 平 台, 其 在 前 端 领 域 的 实 力 也 在 国 内 名 列 前 茅 淘 宝 对 于 按 需 加 载 的 使 用 主 要 在 首 页 切 换 卡 和 产 品 列 表 页 上 : 首 页 的 切 换 卡 中 的 内 容 用 <textarea> 包 住, 这 样 可 以 避 免 浏 览 器 解 析 其 中 的 代 码 ;
图 5.5.3 淘 宝 首 页 选 项 卡 内 容 用 了 textarea 而 产 品 列 表 页 则 没 有 给 视 窗 外 的 图 片 设 置 src 值, 而 是 把 图 片 的 地 址 写 在 data-lazyload-src 上, 避 免 请 求 图 片 图 5.5.4 列 表 页 图 片 用 data-lazyload-src 代 替 src 3.QQ 首 页 采 取 的 是 和 yahoo 相 同 的 形 式, 即 异 步 请 求 加 载, 不 同 的 是,qq 请 求 返 回 的 是 一 个 html 页 面, 而 yahoo 则 是 返 回 一 个 json 数 据 从 这 点 来 看,qq 的 方 式 更 加 直 观, 便 于 维 护 而 在 图 片 方 面,qq 的 做 法 和 淘 宝 类 似, 也 是 用 自 定 义 属 性 代 替 图 片 src 的 方 法 : 图 5.5.3 qq 图 片 延 迟 方 式 4.sina 作 为 国 内 门 户 三 强 之 一,sina 的 信 息 量 可 谓 巨 大, 不 过 实 际 发 现 其 并 未 在 首 页 使 用 按 需 加 载, 而 发 现 在 博 客 的 文 章 页 中 对 图 片 进 行 了 按 需 加 载 的 处 理 : Sina 的 做 法 是 给 所 有 图 片 默 认 设 置 了 src 为 一 张 1x1 的 小 图, 真 实 的 地 址 则 用 自 定 义 属 性, 究 其 这 样 做 的 原 因, 应 该 是 博 客 内 页 的 图 片 大 多 由 网 友 上 传, 大 小 不 一, 先 用 小 图 占 大 图 的 位, 这 样 做 可 以 让 按 需 加 载 的 图 片, 在 加 载 完 成 时 不 改 变 文 章 内 容 的 布 局, 避 免 给 用 户 带 来 不 便 而 前 面 提 到 的 淘 宝 和 sina 的 图 片 都 是 尺 寸 统 一 固 定 的, 用 样 式 进 行 统 一 控 制 就 可 以 了 图 5.5.4 sina 博 客 文 章 页 图 片 延 迟 ( 图 片 有 设 宽 高 ) 按 需 加 载 的 分 类 按 加 载 的 内 容 来 分 可 以 分 为 两 类 : 1. 代 码 按 需 加 载 代 码 包 括 html 的 所 有 代 码, 在 未 加 载 之 前,html 代 码 不 会 被 解 析, 其 中 的 图 片 也 不 会 请 求, 主 要 有 以 下 几 种 实 现 方 式 :textarea 异 步 请 求 iframe 1<textarea>: 用 textarea 标 签 包 住 需 要 按 需 加 载 的 html 代 码, 当 加 载 事 件 触 发 时, 就 将 html 的 代 码 传 给 指 定 元 素 的 innerhtml 即 可, 此 时, 浏 览 器 才 会 解 析 这 一 段 html 代 码, 如 果 这 段 html 中 含 有 图 片, 此 时 才 会 发 出 图 片 请 求
优 点 : 操 作 简 单, 容 易 维 护, 响 应 迅 速 缺 点 :textarea 需 要 绑 定 在 页 面 上, 需 改 动 原 页 面 代 码,textarea 中 的 内 容 不 会 被 搜 索 引 擎 抓 取 到 2 异 步 请 求 : 此 方 式 是 指 当 触 发 事 件 后, 通 过 httprequest 或 者 DOMScript 请 求 数 据, 服 务 器 返 回 json 格 式 或 者 html 片 段, 再 利 用 回 调 函 数 更 新 页 面 Json 格 式 的 数 据 小 巧 灵 活, 可 根 据 页 面 的 需 求 生 成 不 同 的 html, 适 合 各 种 动 态 接 口 使 用 ;html 片 段 的 方 式 看 起 来 更 加 直 观, 便 于 理 解, 也 免 去 了 在 客 户 端 重 新 组 装 html 的 过 程, 适 合 代 码 量 较 大 形 式 较 为 固 定 的 情 况 优 点 : 可 在 多 个 页 面 使 用, 加 载 的 内 容 和 页 面 分 离, 易 于 管 理 缺 点 : 请 求 返 回 会 花 费 一 定 时 间, 无 法 做 到 立 即 刷 新 内 容 3iframe: 需 要 加 载 的 内 容 放 在 另 一 个 页 面 中, 触 发 事 件 时, 用 js 动 态 插 入 iframe, 此 时, 浏 览 器 才 开 始 请 求 iframe 中 的 内 容, 以 此 达 到 按 需 加 载 优 点 :iframe 的 页 面 相 对 独 立, 主 页 面 不 受 iframe 的 样 式 影 响 缺 点 : 会 受 到 iframe 的 各 种 限 制 2. 图 片 图 片 是 网 页 中 的 重 要 组 成 部 分, 其 占 用 的 带 宽 相 对 于 文 本 也 要 大 得 多, 所 以 在 节 约 带 宽 上, 图 片 按 需 加 载 往 往 起 到 更 为 重 要 的 作 用 针 对 图 片 的 按 需 加 载 主 要 应 用 在 图 片 列 表 页 和 文 章 页 中, 主 要 的 方 式 是 用 自 定 义 属 性 来 保 存 真 实 的 图 片 地 址, 当 需 要 加 载 时 才 将 图 片 地 址 赋 值 给 src 属 性 这 样 做 的 原 理 是 图 片 只 有 当 src 有 值 时, 浏 览 器 才 会 发 出 图 片 请 求 问 题 引 申 : 事 实 上, 按 需 加 载 的 难 点 并 不 在 技 术, 其 难 点 在 于 选 择 使 用 的 时 机 什 么 时 候 该 使 用 按 需 加 载, 什 么 时 候 改 用 什 么 方 式, 这 才 是 最 难 的 想 要 节 约 带 宽, 前 提 是 不 能 降 低 用 户 体 验 或 者 减 少 访 问 量 天 下 没 有 白 吃 的 午 餐 正 是 这 个 道 理 从 用 户 体 验 上 来 说, 按 需 加 载 是 基 于 web 的 人 机 交 互 的 一 种 新 的 方 式, 它 的 核 心 还 是 人 一 切 从 人 的 角 度 出 发, 基 于 人 的 感 受, 提 供 最 人 性 化 的 服 务, 这 将 是 按 需 加 载 带 给 我 们 的 新 的 思 考 这 样 人 性 化 的 操 作 还 表 现 在 图 片 浏 览 的 预 加 载 上 : 预 先 加 载 后 一 页 的 图 片 内 容, 减 少 用 户 翻 页 时 等 待 的 时 间, 这 也 是 人 性 化 优 化 的 另 一 典 范 问 题 总 结 : 按 需 加 载 在 一 定 程 度 上 可 以 节 约 带 宽, 并 减 少 页 面 内 容 的 浪 费, 如 果 使 用 得 当, 还 可 以 减 少 用 户 等 待 时 间, 提 高 用 户 体 验 但 是 对 于 SEO 要 求 比 较 高 的 页 面, 按 需 加 载 就 显 得 力 不 从 心 了 ; 另 外 这 样 的 做 法 需 要 对 页 面 的 代 码 做 响 应 的 调 整, 如 果 大 量 使 用 还 需 考 虑 推 广 实 施 的 问 题, 比 如 用 置 标 将 img 的 src 属 性 自 动 替 换 等 等, 尽 量 减 少 对 正 常 代 码 的 修 改
5.6 Js 外 链 与 内 嵌 的 选 择 现 状 分 析 : Javascript 在 html 中 的 存 在 形 式 有 两 种 : 一 是 <script>xxxx</script> 脚 本 块, 二 是 <script src= xx.js ></script> 外 链 js 文 件, 也 即 是 通 常 说 的 内 嵌 和 外 链 两 种 形 式 查 看 各 个 知 名 站 点 的 源 代 码 可 以 发 现, 这 两 种 形 式 都 常 常 出 现, 他 们 散 乱 的 位 于 各 种 html 标 签 中 间, 让 原 本 优 雅 的 html 代 码 多 了 几 分 瑕 疵 的 确, 由 于 script 的 特 殊 性, 使 得 它 在 html 中 总 会 是 最 为 显 眼 的, 而 script 在 页 面 中 的 位 置 和 存 在 方 式 也 是 值 得 关 注 和 重 视 的 地 方 问 题 分 析 : Script 的 存 在 方 式 内 嵌 : 用 <script> 和 </script> 包 裹 住 的 javascript 代 码 块 当 浏 览 器 解 析 到 这 样 的 代 码 时, 会 以 script 块 为 单 位, 将 其 扔 给 相 应 的 js 引 擎 去 执 行, 并 暂 停 等 待 js 引 擎 的 结 果, 待 js 引 擎 执 行 完 毕 后, 才 继 续 后 续 的 html 的 解 析 外 链 : 在 script 标 签 中, 用 src 指 定 请 求 的 外 链 的 js 地 址 当 浏 览 器 解 析 到 这 样 的 代 码 时, 会 请 求 指 定 的 js, 此 时 浏 览 器 暂 停 继 续 解 析 页 面, 待 js 返 回 后, 开 始 执 行 请 求 的 js, 在 执 行 后 才 继 续 页 面 html 的 解 析 此 外, 外 链 js 也 可 以 通 过 异 步 请 求 的 方 式 加 载, 此 时 的 执 行 顺 序 在 不 同 浏 览 器 中 会 存 在 差 异, 具 体 可 以 查 阅 异 步 js 执 行 时 间 不 确 定 一 节 内 嵌 与 外 链 的 多 项 对 比 维 护 : 内 嵌 的 js 由 于 是 放 在 html 页 面 上 的, 所 以 对 于 内 嵌 js 的 维 护 需 要 涉 及 到 响 应 的 页 面, 在 大 批 量 进 行 js 修 改 时, 内 嵌 js 会 很 不 方 便 ; 外 链 js 由 于 从 html 页 面 独 立 出 来, 内 容 只 有 一 份, 相 应 的 维 护 也 只 需 要 修 改 一 次 即 可 效 率 : 外 链 js 由 于 需 要 浏 览 器 请 求, 并 等 待 服 务 器 返 回 js 文 件 ( 正 常 js 的 请 求 还 会 阻 塞 其 他 请 求 ), 所 以, 外 链 js 的 实 际 使 用 效 率 要 比 内 嵌 js 差 一 些 缓 存 :
内 嵌 js 的 体 积 是 直 接 算 在 html 页 面 上 的, 且 一 般 的 html 不 会 做 缓 存 的 操 作, 也 就 相 当 于 内 嵌 js 是 没 有 缓 存 的 ; 而 外 链 js 则 可 以 根 据 其 使 用 特 点, 进 行 缓 存 的 设 置, 以 此 减 少 流 量 的 消 耗 执 行 顺 序 : 在 执 行 顺 序 上, 内 嵌 的 js 在 各 浏 览 器 中 可 以 保 证 完 全 按 照 在 html 中 出 现 的 顺 序 来 执 行 ; 而 外 链 的 js 如 果 是 异 步 请 求, 则 无 法 在 所 有 浏 览 器 中 都 保 证 执 行 顺 序 在 之 前 的 异 步 js 执 行 时 间 不 确 定 一 节 中 有 说 道, 这 里 看 一 下 另 外 一 种 外 链 js 执 行 顺 序 出 问 题 的 例 子 Eg: http://zzb.pcauto.com.cn/power/js/jsproblem/out/script2.html FF 下 的 结 果 为 : 第 一 行 第 二 行 Ie 下 的 结 果 为 : 第 二 行 第 一 行 目 前 分 析 是 由 于 ie 在 执 行 一 段 js 的 过 程 中 是 不 能 够 中 途 中 断 去 请 求 其 他 js 的, 只 有 等 到 执 行 完 了 或 者 说 js 引 擎 空 闲 了,js 的 请 求 才 会 发 出 ; 而 ff 一 旦 有 js 请 求, 就 会 中 断 js 执 行 ( 游 戏 网 头 部 的 广 告 也 是 这 种 情 况 ) 问 题 引 申 : 事 实 上,js 的 外 链 和 内 嵌 的 选 择 和 css 的 外 链 和 内 嵌 的 选 择 有 相 似 的 地 方, 比 如 维 护 成 本 效 率 缓 存 方 面 的 考 虑, 不 太 一 样 的 是, 外 链 的 css 并 非 阻 塞 元 素, 所 以 一 般 不 会 对 css 做 异 步 请 求 的 处 理, 也 就 不 会 出 现 在 解 析 顺 序 上 不 一 致 的 问 题 此 外,css 本 身 就 有 优 先 级 的 控 制 机 制, 例 如 id 优 于 class 等, 使 得 css 的 解 析 顺 序 能 够 得 到 很 好 的 控 制 问 题 总 结 : Js 的 内 嵌 和 外 链 没 有 绝 对 的 优 劣, 如 何 选 择 需 要 按 照 实 际 情 况 来 分 析, 并 综 合 考 虑 维 护 效 率 缓 存 执 行 顺 序 等 多 方 面 因 素