搜索

[25944] 2017-01-13_初识HTTP2（二）

文档创建者：s7ckTeam
浏览次数：1
最后更新：2025-01-19
2017-01-13_初识HTTP2（二） - -   B e n 1 3 % 2 1 % 3 0 % 4 6 % 5 9 % 7 2 % 8 9 % 初 识   H T T P / 2 （ 二 ） 原 创   译 者 ： G i t F u t u r e   L i n u x 中 国   2 0 1 7 - 0 1 - 1 3 尽 管 有 很 多 关 于 它 如 何 改 变 工 作 流 程 ， 提 高   W e b   速 度 和 效 率 等 方 面 的 猜 想 ， 但 最 佳 使 用 方 式 还 没 有 定 下 来 。 这 里 我 想 讲 的 就 是 我 在 之 前 的 项 目 中 所 发 现 的   H T T P / 2   的 最 佳 实 践 。 本 文 导 航 - 热 身 工 作 - s e t u p   目 录 - g l o b a l   目 录 - 最 后 ， 你 的 组 件 - 构 建 组 件 - 结 合 在 一 起 - 结 论 编 译 自 ：   h t t p s : / / w w w . v i g e t . c o m / a r t i c l e s / g e t t i n g - s t a r t e d - w i t h - h t t p - 2 - p a r t - 2   作 者 ：   B e n 译 者 ：   G i t F u t u r e H T T P / 2   时 代 的 开 启 为 前 端 开 发 带 来 了 最 佳 体 验 。
如 果 你 对   H T T P / 2   有 所 了 解 ， 那 你 可 能 用 过 它 ， 或 者 至 少 想 过 怎 样 能 把 它 融 入 你 的 项 目 中 。 尽 管 有 很 多 关 于 它 如 何 改 变 工 作 流 程 ， 提 高   W e b   速 度 和 效 率 等 方 面 的 猜 想 ， 但 最 佳 使 用 方 式 还 没 有 定 下 来 。 这 里 我 想 讲 的 就 是 我 在 之 前 的 项 目 中 所 发 现 的   H T T P / 2   的 最 佳 实 践 。 如 果 你 还 不 确 定 什 么 是   H T T P / 2 ， 或 者 为 什 么 它 能 改 进 你 的 工 作 ， 可 以 先 看 看 我 介 绍 背 景 方 面 的 第 一 篇 文 章 [ 1 ] 。 记 住 ： 开 始 之 前 ， 我 要 告 诉 你 ， 尽 管 你 的 浏 览 器 可 能 支 持   H T T P / 2 ， 但 你 的 服 务 器 可 能 不 支 持 。 检 查 你 的 主 机 托 管 服 务 ， 看 看 他 们 是 否 提 供   H T T P / 2   的 支 持 。 否 则 你 可 能 要 建 立 你 自 己 的 服 务 器 。 这 篇 文 章 并 不 会 涉 及 这 方 面 该 如 何 做 ， 但 你 可 以 查 看   h t t p 2   g i t h u b   页 面 ， 找 一 找 这 方 面 的 工 具 。   热 身 工 作 首 先 组 织 好 你 的 文 件 。 看 一 看 下 面 的 文 件 树 结 构 ， 作 为 组 织 你 的 样 式 表 的 起 点 ： 这 会 把 你 的 样 式 分 到 三 个 目 录 下 面 ： 、   和   。 接 下 来 我 会 说 明 这 些 目 录 对 你 的 项 目 有 什 么 用 。   s e t u p   目 录   目 录 保 存 所 有 的 变 量 、 函 数 、 m i n i n 混 入 以 及 一 些 正 常 编 译 需 要 的 其 它 文 件 的 定 义 。 要 想 让 这 个 目 录 物 尽 其 用 ， 把 这 个 目 录 下 1 .   / s t y l e s 2 .   | ─ ─   / s e t u p 3 .   |           / *   变 量 、 混 入 （ m i n i n ） 和 函 数   * / 4 .   | ─ ─   / g l o b a l 5 .   |           / *   能 放 在 任 何 组 件 和 部 分 中 的 可 重 用 组 件   * / 6 .   | ─ ─   / c o m p o n e n t s 7 .   |           / *   特 殊 组 件 和 部 分   * / 8 .   | ─ ─   s e t u p . s c s s   / /   s e t u p   样 式 索 引 9 .   | ─ ─   g l o b a l . s c s s   / /   全 局 样 式 索 引 s e t u p g l o b a l c o m p o n e n e t s s e t u p
所 有 内 容 导 入 到     文 件 中 是 个 很 不 错 的 主 意 ， 这 样 这 个 文 件 就 会 像 下 面 所 展 示 的 一 样 ： 2 .   5 .   8 .   1 1 .   现 在 我 们 能 快 速 引 用 这 个 站 点 中 的 所 有 定 义 ， 应 该 确 保 在 所 有 的 样 式 文 件 顶 部 包 含 我 们 这 里 创 建 的 这 个 文 件 。 g l o b a l   目 录 接 下 来 的 目 录 ， g l o b a l   目 录 ， 应 该 包 含 可 在 当 前 站 点 的 多 个 部 分 或 者 每 一 个 页 面 中 重 复 使 用 的 组 件 。 像 按 钮 、 文 本 、 主 要 样 式 ， 以 及 你 的 浏 览 器 默 认 设 置 应 该 放 在 这 里 。 我 不 建 议 把 页 面 的 头 部 或 底 部 样 式 放 在 这 儿 ， 因 为 某 些 项 目 中 没 有 头 部 ， 或 者 不 同 页 面 头 部 不 同 。 而 且 ， 底 部 永 远 是 页 面 的 最 后 一 个 元 素 ， 所 以 在 用 户 加 载 完 当 前 站 点 的 其 它 东 西 前 ， 不 必 过 分 优 先 考 虑 加 载 底 部 样 式 。 记 住 ， 如 果 没 有 那 些 定 义 在   s e t u p   目 录 下 的 东 西 ， 你 的   g l o b a l   样 式 就 可 能 没 有 作 用 ， 你 的   g l o b a l   文 件 看 起 来 应 该 像 这 样 ： 2 .   5 .   s e t u p . s c s s 1 .   / *   s e t u p . s c s s   * / 3 .   / *   变 量   * / 4 .   @ i m p o r t   " s e t u p / v a r i a b l e s / c o l o r s " ; 6 .   / *   混 入   * / 7 .   @ i m p o r t   " s e t u p / m i x i n s / c o l o r " ; 9 .   / *   函 数   * / 1 0 .   @ i m p o r t   " s e t u p / f u n c t i o n s / c o l o r " ; 1 2 .   . . .   等 等 1 .   / *   g l o b a l . s c s s   * / 3 .   / *   应 用 定 义   * / 4 .   @ i m p o r t   " s e t u p " ;
1 1 .   注 意 ， 首 先 要 做 的 就 是 导 入   s e t u p   样 式 。 这 样 的 话 ， 之 后 的 文 件 都 可 以 引 用 这 个 样 式 里 的 定 义 。 由 于 站 点 内 的 每 个 页 面 都 需 要   g l o b a l   样 式 ， 我 们 可 以 用 典 型 的 方 式 ， 在     标 签 内 用 一 个     标 签 来 加 载 它 们 。 你 所 看 到 的 将 是 一 个 十 分 小 巧 的   c s s   文 件 ， 或 者 说 理 论 上 小 巧 的 ， 这 取 决 于 你 需 要 多 少 全 局 样 式 。 最 后 ， 你 的 组 件 注 意 ， 我 没 有 在 上 述 目 录 树 中 的   c o m p o n e n t s   目 录 里 包 含 索 引 文 件 。 这 是   H T T P / 2   所 带 来 的 效 用 。 直 到 现 在 ， 我 们 已 经 按 照 标 准 步 骤 构 建 了 一 个 典 型 的 站 点 ， 保 持 相 当 简 单 的 结 构 ， 仅 选 择 全 局 化 那 些 最 重 要 的 样 式 。 组 件 充 当 它 们 自 己 的 索 引 文 件 。 大 多 数 开 发 者 有 独 特 的 组 织 组 件 的 方 式 ， 因 此 我 并 不 想 影 响 你 的 策 略 。 但 是 ， 你 所 有 的 组 件 看 起 来 应 该 像 这 样 ： 2 .   5 .   9 .   6 .   / *   全 局 样 式   * / 7 .   @ i m p o r t   " g l o b a l / r e s e t " ; 8 .   @ i m p o r t   " g l o b a l / b u t t o n s " ; 9 .   @ i m p o r t   " g l o b a l / t y p o g r a p h y " ; 1 0 .   @ i m p o r t   " g l o b a l / g r i d " ; 1 2 .   . . .   等 等 < h e a d > < l i n k > 1 .   / *   h e a d e r . s c s s   * / 3 .   / *   应 用 定 义   * / 4 .   @ i m p o r t   " . . / s e t u p " ; 6 .   h e a d e r   { 7 .       / /   样 式 8 .   } 1 0 .   . . .   等 等
同 样 的 ， 你 要 把   s e t u p   样 式 包 含 进 来 ， 确 保 所 有 东 西 在 编 译 时 都 定 义 过 。 除 了 编 译 这 些 文 件 ， 以 及 可 能 要 把 他 们 放 到     目 录 ， 以 便 很 容 易 找 到 模 版 ， 对 这 些 文 件 你 不 必   c o n c a t e n a t e 拼 接 、 m i n i f y 压 缩   它 们 或 者 改 变 什 么 。 现 在 样 式 表 已 经 差 不 多 了 ， 构 建 站 点 应 该 很 简 单 。 构 建 组 件 或 许 对 于 模 板 语 言 你 有 自 己 的 选 择 ， 这 取 决 于 你 的 项 目 ， 有 可 能 是   T w i g 、 R a i l s 、 J a d e   或 者   H a n d l e b a r s 。 我 认 为 考 虑 组 件 最 好 的 方 式 是 它 是 否 有 自 己 的 模 版 文 件 ， 它 该 有 个 与 名 字 相 应 的 样 式 。 这 样 你 的 项 目 中 ， 模 版 和 样 式 的 比 例 就 会 是 个 不 错 的   1 : 1 的 比 例 ， 而 且 你 知 道 哪 个 文 件 有 哪 些 东 西 ， 哪 里 有 哪 个 文 件 ， 因 为 它 们 的 命 名 是 有 规 律 的 。 现 在 它 正 步 入 正 轨 ， 用 好   H T T P / 2   的 多 种 功 能 十 分 简 单 ， 让 我 们 做 一 个 模 版 ： 2 .   5 .   非 常 好 ！ 在 模 版 里 你 可 能 有 更 简 单 的 方 式 链 接 到 资 源 ， 但 这 里 显 示 你 所 要 做 的 仅 是 在 开 始 构 建 时 ， 在 模 版 文 件 中 链 接 一 个 小 小 的 头 部 样 式 。 这 将 允 许 你 的 站 点 仅 仅 加 载 特 定 资 源 到 任 意 给 定 页 面 的 组 件 中 ， 而 且 ， 能 够 设 定 页 面 从 头 到 脚 的 组 件 的 优 先 级 。 结 合 在 一 起 现 在 所 有 的 组 件 都 有 结 构 ， 浏 览 器 将 会 类 似 以 下 方 式 来 渲 染 它 们 ： / a s s e t s 1 .   { #   h e a d e r . h t m l   # } 3 .   { #   c o m p i l e d   h e a d e r   s t y l e s   # } 4 .   < l i n k   h r e f = " a s s e t s / c o m p o n e n t s / h e a d e r . c s s "   r e l = " s t y l e s h e e t "   m e d i a = " a l l " > 6 .   < h e a d e r > 7 .       < h 1 > T h i s   A w e s o m e   H T T P / 2   S i t e < / h 1 > 8 .       . . .   等 等 1 .   < ! D O C T Y P E   h t m l > 2 .   < h t m l > 3 .       < h e a d >
7 .   1 2 .   1 7 .   2 2 .   2 7 .   3 2 .   4 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / g l o b a l . c s s " > 5 .       < / h e a d > 6 .       < b o d y > 8 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / c o m p o n e n t s / h e a d e r . c s s " > 9 .           < h e a d e r > 1 0 .               . . .   e t c 1 1 .           < / h e a d e r > 1 3 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / c o m p o n e n t s / t i t l e . c s s " > 1 4 .           < s e c t i o n   c l a s s = " t i t l e " > 1 5 .               . . .   e t c 1 6 .           < / s e c t i o n > 1 8 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / c o m p o n e n t s / i m a g e - c o m p o n e n t . c s s " > 1 9 .           < s e c t i o n   c l a s s = " i m a g e - c o m p o n e n t " > 2 0 .               . . .   e t c 2 1 .           < / s e c t i o n > 2 3 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / c o m p o n e n t s / t e x t - c o m p o n e n t . c s s " > 2 4 .           < s e c t i o n   c l a s s = " t e x t - c o m p o n e n t " > 2 5 .               . . .   e t c 2 6 .           < / s e c t i o n > 2 8 .           < l i n k   r e l = " s t y l e s h e e t "   m e d i a = " a l l "   h r e f = " / a s s e t s / c o m p o n e n t s / f o o t e r . c s s " > 2 9 .           < f o o t e r > 3 0 .               . . .   e t c 3 1 .           < / f o o t e r > 3 3 .       < / b o d y > 3 4 .   < / h t m l >
这 是 一 个 高 级 别 方 法 ， 但 你 的 项 目 中 可 能 有 调 整 的 更 细 致 的 组 件 。 例 如 ， 在 头 部 的     组 件 可 能 要 加 载 自 己 的 样 式 表 。 尽 你 所 能 地 自 由 发 挥 ， 让 组 件 更 有 作 用   -   H T T P / 2   不 会 因 这 些 需 求 而 阻 碍 你 ！ 结 论 这 只 是 一 个 关 于 如 何 在 前 端 用   H T T P / 2   构 建 项 目 的 基 本 介 绍 ， 仅 是 皮 毛 而 已 。 你 可 能 注 意 到 我 上 面 所 用 的 方 法 有 的 还 有 改 进 的 空 间 。 请 不 吝 赐 教 ！ 正 如 我 在 第 一 篇 文 章 中 所 说 的 ， H T T P / 2   可 能 颠 覆 自   H T T P / 1   以 来 我 们 所 熟 知 的 某 些 标 准 ， 所 以 要 慎 重 思 考 和 实 践 ， 以 便 高 效 使 用   H T T P / 2   的 开 发 环 境 。 v i a :   h t t p s : / / w w w . v i g e t . c o m / a r t i c l e s / g e t t i n g - s t a r t e d - w i t h - h t t p - 2 - p a r t - 2 作 者 ： B e n [ 2 ]   译 者 ： G i t F u t u r e   校 对 ： j a s m i n e p e n g 本 文 由   L C T T [ 3 ]   组 织 编 译 ， L i n u x 中 国   荣 誉 推 出 推 荐 文 章 <   左 右 滑 动 查 看 相 关 文 章   > 输 入 文 章   I D   或 长 按 二 维 码 直 达 [ 1 ] :   h t t p s : / / l i n u x . c n / a r t i c l e - 8 1 1 1 - 1 . h t m l [ 2 ] :   h t t p s : / / w w w . v i g e t . c o m / a b o u t / t e a m / b t i n s l e y [ 3 ] :   h t t p s : / / g i t h u b . c o m / L C T T / T r a n s l a t e P r o j e c t 阅 读 原 文 3 4 .   < / h t m l > < n a v >
回复

举报

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

本版积分规则

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

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