搜索

[24713] 2016-02-14_网页的臃肿化带来的启示

文档创建者：s7ckTeam
浏览次数：1
最后更新：2025-01-18
2016-02-14_网页的臃肿化带来的启示 网 页 的 臃 肿 化 带 来 的 启 示 译 者 ： 小 峰   L i n u x 中 国   2 0 1 6 - 0 2 - 1 4 编 译 自 ： h t t p s : / / d z o n e . c o m / a r t i c l e s / w h a t - i v e - l e a r n e d - f r o m - m o n i t o r i n g - f o u r - y e a r s - o f - w e b   作 者 ：   T a m m y   E v e r t s 转 载 自 ： 码 农 网   h t t p : / / w w w . c o d e c e o . c o m / a r t i c l e / m o n i t o r - 4 - y e a r s - w e b - p a g e . h t m l   译 者 ：   小 峰 每 半 年 我 会 看 一 看 一 些 来 自 于 H T T P   A r c h i v e 的 关 键 统 计 资 料 — — H T T P   A r c h i v e 是 一 个 非 常 棒 的 历 史 数 据 存 储 库 ， 主 要 关 于 世 界 上 访 问 量 最 大 的 五 十 万 个 网 站 的 规 模 和 构 成 。 正 值 A r c h i v e 临 近 四 周 年 之 际 ， 我 想 盘 点 一 下 过 去 的 四 年 时 间 里 发 生 了 什 么 变 化 ， 有 哪 些 保 持 不 变 ， 以 及 我 在 观 看 这 些 数 据 向 上 蠕 变 的 过 程 中 学 到 了 哪 些 东 西 。 现 在 平 均 网 页 现 在 平 均 网 页 2 2 1 9   K B ， 而 四 年 前 只 有 ， 而 四 年 前 只 有 9 9 1   K B 去 年 春 天 平 均 页 面 就 跨 越 了 2   M B 大 关 ， 达 到 2 0 9 9   K B 。 现 在 的 网 页 平 均 比 一 年 前 大 1 6 ％ ， 比 四 年 前 大 1 3 9 ％ 。 p a g e - b l o a t - 0 1 在 过 去 的 六 个 月 时 间 里 ， 页 面 的 平 均 规 模 又 增 长 了 1 2 0   K B 。 对 这 样 的 变 化 ， 我 们 很 容 易 忽 略 不 计 。 毕 竟 这 又 不 是 什 么 大 不 了 的 事 情 ， 对 吧 ？ 区 区 1 2 0   K B 远 还 没 有 达 到 我 们 需 要 担 心 的 程 度 。 不 过 ， 这 个 数 值 代 表 了 ： 更 多 的 页 面 资 源 （ 如 图 像 ， C S S 文 件 ， 以 及 各 种 脚 本 ） ， 更 多 的 页 面 复 杂 性 ， 以 及 更 多 的 性 能 故 障 风 险 。 想 要 了 解 更 多 的 话 ， 请 继 续 往 下 看 。 图 像 占 平 均 页 面 重 量 的 图 像 占 平 均 页 面 重 量 的 6 4 ％ ％
这 已 经 不 是 什 么 不 为 人 知 的 信 息 了 。 自 从 我 跟 踪 了 H T T P   A r c h i v e 之 后 ， 我 就 发 现 图 像 至 少 构 成 了 平 均 网 页 的 6 0 ％ 。 p a g e - b l o a t - 0 2 让 人 不 可 思 议 的 是 ， 图 像 的 增 长 速 度 非 常 之 快 ： 总 的 图 像 负 载 在 短 短 四 年 间 增 加 了 一 倍 都 不 止 。 更 不 可 思 议 的 是 ， 现 在 光 是 图 像 的 页 面 重 量 就 超 过 了 两 年 多 前 的 平 均 整 个 网 页 。 p a g e - b l o a t - 0 3
但 是 ， 规 模 并 不 代 表 一 切 但 是 ， 规 模 并 不 代 表 一 切 上 个 月 ， N a t e   B e r k o p e c 写 了 一 篇 极 好 的 博 客 文 章 ， 在 文 中 他 犀 利 地 点 破 了 为 什 么 如 果 你 只 关 注 页 面 重 量 的 话 ， 就 会 犯 错 。 他 这 样 写 道 ： 秘 密 就 在 于 “ p a g e   w e i g h t 页 面 重 量 ” — — 页 面 重 量 被 广 泛 地 定 义 为 一 个 页 面 的 总 文 件 大 小 以 及 它 所 有 的 子 资 源 （ 图 片 ， C S S ， J S 等 ） — — 但 这 并 非 问 题 的 所 在 。 虽 然 带 宽 不 是 问 题 ， 但 网 页 性 能 不 会 随 着 宽 带 接 入 变 得 更 加 普 遍 而 提 高 。 问 题 在 于 延 迟 。 我 们 大 部 分 的 网 络 协 议 都 需 要 网 络 往 返 时 延 ， 每 一 个 网 络 往 返 增 强 了 网 络 延 时 的 概 率 。 网 络 延 时 受 介 质 传 输 速 度 的 制 约 ， 这 意 味 着 网 络 延 时 并 不 是 在 任 何 地 方 都 会 发 生 。 我 曾 经 写 过 一 篇 关 于 为 什 么 更 多 的 带 宽 并 不 是 解 决 性 能 问 题 的 万 能 钥 匙 [ 1 ] 的 文 章 ， 我 的 文 章 聚 焦 于 一 个 事 实 ， 即 很 多 人 不 明 白 为 什 么 双 倍 的 带 宽 不 等 于 快 一 倍 。 N a t e 的 帖 子 突 出 了 另 一 个 问 题 ： 只 要 时 延 仍 是 一 个 性 能 问 题 （ 也 就 是 说 ， 趋 向 于 永 远 ） ， 主 要 的 性 能 元 凶 将 仍 然 是 这 样 一 个 事 实 — — 当 前 典 型 的 网 页 包 含 的 一 百 个 左 右 的 资 源 被 托 管 在 几 十 个 不 同 的 服 务 器 上 。 这 些 网 页 中 的 许 多 资 源 都 是 未 经 优 化 的 ， 不 可 测 的 ， 不 受 监 督 的 — — 因 此 也 无 法 预 测 。 作 为 一 个 伪 实 例 ， 让 我 们 来 看 一 看 自 定 义 字 体 的 突 然 增 加 。 通 过 H T T P   A r c h i v e 的 跟 踪 ， 我 们 可 以 看 到 ， 在 短 短 的 几 年 时 间 里 ， 自 定 义 字 体 已 经 从 几 乎 只 占 网 站 的 7 ％ ， 到 称 霸 了 网 站 的 一 半 以 上 。 p a g e - b l o a t - 0 4 自 定 义 字 体 对 设 计 师 而 言 一 个 巨 大 的 福 音 。 它 能 够 让 你 完 全 控 制 品 牌 的 视 觉 资 本 ， 这 在 市 场 中 可 不 是 一 件 微 不 足 道 的 事 情 — — 品 牌 从 未 像 现 在 这 样 重 要 。 但 是 ， 当 你 的 自 定 义 字 体 实 施 不 佳 或 外 部 托 管 的 时 候 ， 反 而 可 能 会 引 入 性 能 阵 痛 — — 从 会 导 致 恼 人 输 出 信 号 （ 无 样 式 的 文 字 闪 烁 ） 的 缓 慢 字 体 ， 到 会 完 全 阻 止 页 面 其 余 部 分 加 载 的 不 响 应 的 字 体 。 而 自 定 义 字 体 只 是 资 源 中 的 一 种 。 此 外 还 有 样 式 表 ， J a v a S c r i p t ， 以 及 几 十 个 可 能 多 余 的 第 三 方 标 签 。 最 好 的 情 况 是 ， 这 些 资 源 只 是 逐 渐 增 加 了 总 的 延 迟 时 间 。 最 坏 的 情 况 是 ， 它 们 会 给 你 的 网 页 引 入 潜 在 的 单 点 故 障 。 那 么 那 么 … … 你 能 做 些 什 么 呢 ？ 你 能 做 些 什 么 呢 ？ 1 . 为 页 面 设 置 性 能 预 算 为 页 面 设 置 性 能 预 算
许 多 快 速 的 网 页 都 有 一 个 共 同 点 ， 那 就 是 ： 大 小 最 多 约 1   M B （ 或 更 少 ） 。 并 非 巧 合 的 是 ， 1   M B 正 是 许 多 公 司 正 在 建 立 的 “ 性 能 预 算 ” 中 为 他 们 的 网 页 设 置 的 最 大 值 。 这 可 不 是 为 了 让 页 面 更 小 — — 而 是 为 了 强 迫 自 己 优 化 出 现 在 网 页 上 的 资 源 ， 并 做 一 些 战 略 性 的 优 胜 劣 汰 ， 以 便 于 让 网 页 变 得 更 简 单 ， 从 而 减 少 延 迟 。 如 果 你 还 不 熟 悉 关 于 性 能 预 算 的 思 路 ， T i m   K a d l e c 撰 写 了 一 些 非 常 棒 的 文 章 ， 指 出 了 为 什 么 你 需 要 性 能 预 算 以 及 你 应 该 跟 踪 什 么 样 的 指 标 。 2 . 首 先 处 理 图 像 首 先 处 理 图 像 如 果 你 想 在 性 能 上 取 得 一 些 快 速 的 胜 利 ， 那 么 先 从 优 化 你 的 图 像 开 始 。 下 面 是 我 创 建 的 一 个 高 层 次 的 图 像 优 化 清 单 ， 以 便 于 你 介 绍 图 像 优 化 的 重 要 性 给 贵 组 织 中 的 每 一 个 人 （ 尤 其 是 非 技 术 人 员 ） 。 想 要 了 解 更 深 的 话 ， 我 强 烈 推 荐 G u y   P o d j a r n y 写 的 这 篇 文 章 — — 《 H i g h   P e r f o r m a n c e I m a g e s :   B e a u t i f u l   S h o u l d n ’ t   M e a n   S l o w 》 。 3 . 优 化 字 体 优 化 字 体 I l y a   G r i g o r i k 写 过 一 篇 关 于 w e b 字 体 优 化 的 文 章 [ 2 ] ， 很 精 彩 ， 设 计 人 员 和 开 发 人 员 不 可 不 读 。 4 . 得 到 有 关 第 三 方 脚 本 的 句 柄 得 到 有 关 第 三 方 脚 本 的 句 柄 一 个 典 型 的 w e b 页 面 可 以 包 含 7 5 + 第 三 方 脚 本 ， 并 且 当 涉 及 到 管 理 这 些 脚 本 的 性 能 的 时 候 ， 简 直 就 如 同 群 魔 乱 舞 。 许 多 网 站 所 有 者 其 实 并 不 知 道 他 们 的 第 三 方 脚 本 真 实 的 执 行 情 况 ， 以 及 这 些 脚 本 会 如 何 影 响 他 们 的 网 页 。 这 里 有 一 个 简 短 的 入 门 介 绍 [ 3 ] ， 可 以 帮 助 你 得 到 有 关 于 你 的 第 三 方 脚 本 的 句 柄 。 5 . 教 育 接 触 网 页 的 每 一 个 人 教 育 接 触 网 页 的 每 一 个 人 有 这 么 多 的 人 — — 从 企 业 老 板 到 市 场 营 销 人 员 — — 他 们 的 决 定 会 影 响 页 面 的 执 行 。 所 有 这 些 人 都 需 要 知 道 ， 他 们 做 的 每 一 个 决 定 — — 从 实 施 新 的 第 三 方 插 件 到 使 用 G I F 动 画 作 为 一 个 标 志 性 图 片 — — 都 是 有 影 响 的 。 6 . 了 解 页 面 大 小 和 复 杂 性 对 你 的 业 务 的 影 响 了 解 页 面 大 小 和 复 杂 性 对 你 的 业 务 的 影 响 你 还 必 须 了 解 页 面 大 小 和 复 杂 性 对 加 载 时 间 的 影 响 。 一 旦 你 将 页 面 大 小 ， 复 杂 程 度 ， 速 度 和 业 务 性 能 之 间 的 点 连 接 起 来 ， 那 么 知 道 往 哪 里 投 入 优 化 的 力 量 就 会 容 易 得 多 。 如 果 你 刚 进 入 这 个 领 域 ， 那 么 不 妨 读 一 读 我 写 的 这 篇 关 于 w e b 性 能 及 其 对 业 务 指 标 的 影 响 的 简 短 文 章 。 当 然 如 果 你 同 我 一 样 ， 正 疯 狂 致 力 于 案 例 研 究 ， 那 么 T i m   K a d l e c 和 我 最 近 还 发 布 了 W P O 统 计 ， 一 个 显 示 性 能 和 业 务 成 功 之 间 相 关 性 的 研 究 型 存 储 库 。 编 译 自 ： h t t p s : / / d z o n e . c o m / a r t i c l e s / w h a t - i v e - l e a r n e d - f r o m - m o n i t o r i n g - f o u r - y e a r s - o f - w e b   作 者 ：   T a m m y   E v e r t s 转 载 自 ： 码 农 网   h t t p : / / w w w . c o d e c e o . c o m / a r t i c l e / m o n i t o r - 4 - y e a r s - w e b - p a g e . h t m l   译 者 ：   小 峰 [ 1 ] :   h t t p : / / w w w . s o a s t a . c o m / b l o g / m o r e - b a n d w i d t h - i s n t - a - m a g i c - b u l l e t - f o r - w e b - p e r f o r m a n c e / [ 2 ] :   h t t p s : / / m e d i u m . c o m / @ g u y p o d / h i g h - p e r f o r m a n c e - i m a g e s - b e a u t i f u l - s h o u l d n - t - m e a n - s l o w - 2 2 f f c 4 e 3 1 6 6 3 # . g x p y n s o 5 9 [ 3 ] :   h t t p : / / i n f o . s o a s t a . c o m / S E M _ W P _ 3 r d P a r t y P e r f o r m a n c e . h t m l 推 荐 文 章 推 荐 文 章 I D 点 击 标 题 或 输 入 文 章   I D   直 达 该 文 章 1 0 9 L i n u x   产 能 工 具 及 其 使 用 技 巧 7 1 8 N g i n x   战 斗 准 备 ： 优 化 指 南
8 0 3 只 有 程 序 员 了 解 的 9 个 真 相 1 0 1 2 “ 懒 ” 出 效 率 是 程 序 员 的 美 德 3 4 2 5 U b u n t u   G N O M E   1 5 . 1 0 ： 堪 称 完 美 的   L i n u x   桌 面 发 行 版 I D 点 击 标 题 或 输 入 文 章   I D   直 达 该 文 章 将 文 章 分 享 给 朋 友 是 对 我 们 最 好 的 赞 赏 ！ 阅 读 原 文
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理