公告 / Notice

  • 界面已全面升级(11/06)

    CSS & JS分别用SASS和Webpack编译,对资源进行了模块化处理;缓存规则使页面运行更快!

  • 移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

高性能网站建设指南

绪言A,前端性能的重要性

至少80%的时间花在了显示 Web 页面上,而这是在HTML文档下载完毕之后发生的。

  • 跟踪 Web 页面性能
  • 时间花哪里了?
  • 性能黄金法则

绪言B,HTTP 概述

对 HTTP 协议进行了简单的介绍,主要介绍与 Web 性能相关的部分。

  • 压缩
  • 条件 GET 请求
  • Expires
  • Keep-Alive

规则一,减少 HTTP 请求

介绍了为什么额外的 HTTP 请求会对性能产生巨大的影响,并介绍了减少 HTTP 请求的方法,包括图片地图、CSS Sprites、使用 data:模式的URL内联图片,以及合并脚本和样式表

  • 图片地图
  • CSS Sprites
  • 内联图片
  • 合并脚本和样式表

规则二,使用内容发布网络

强调使用内容发布网络的优势

  • 内容发布网络
  • 节省

规则三,添加 Expires 头

研究了一个简单的 HTTP 头是如何通过浏览器缓存来大幅改善 Web 页面性能的

  • Expires 头
  • Max-Age 和 mod_expires
  • 空缓存 VS 完整缓存
  • 不仅仅是图片
  • 修订文件名

规则四,压缩组件

解释了压缩是如何工作的,以及如何为Web服务器启用压缩,并讨论了现今存在的一些兼容性问题

  • 压缩是如何工作的
  • 压缩什么
  • 节省
  • 配置
  • 代理缓存
  • 边缘情形

规则五,将样式表放到顶部

展示了样式表是如何影响页面呈现的

  • 逐步呈现
  • sleep.cgi
  • 白屏
  • 无样式内容的闪烁
  • 前端工程师应该做什么

规则六,将脚本放到底部

展示了脚本是如何影响页面呈现的,以及脚本是如何下载到浏览器中的

  • 脚本带来的问题
  • 并行下载
  • 脚本阻塞下载
  • 最差情况:将脚本放在顶部
  • 最佳情况:将脚本放到底部
  • 正确的放置

规则七,避免 CSS 表达式

讨论了CSS表达式的使用和度量其影响的重要性

  • 更新表达式
  • 围绕问题展开工作

规则八,使用外部 JavaScript 和 CSS

介绍了如何权衡是内联 Javascript和Css还是将它们放到外部文件中

  • 内联 VS 外置
  • 典型的对比结果
  • 主页
  • 两全其美

规则九,减少 DNS 查找

强调了解析域名时的频繁查找所产生的影响

  • DNS 缓存和 TTL
  • 浏览器的视角
  • 减少 DNS 查找

规则十,精简 JavaScript

量化了从Javascript中移除空白字符所带来的收益

  • 精简
  • 混淆
  • 节省

规则十一,避免重定向

对使用重定向提出了警示,并给出了替代方案

  • 重定向的类型
  • 重定向是如何损伤性能的
  • 重定向之外的其他选择

规则十二,删除重复脚本

展示了如何一个页面中包含两处相同的脚本会发生什么情况

  • 重复脚本 —— 确有其事
  • 重复脚本损伤性能
  • 避免重复脚本

规则十三,配置 ETag

介绍了ETag是如何工作的,以及为什么对于任何拥有多于一台Web服务器的网站来说,默认的实现都是不好的

  • ETag是什么
  • ETag带来的问题
  • ETag —— 用还是不用
  • 现实世界中的 ETag

规则十四,使 Ajax 可缓存

强调了在使用 Ajax 时牢记这些性能法则的重要性

  • Web 2.0、DHTML 和 Ajax
  • 异步和即时
  • 优化 Ajax 请求
  • 现实世界中的 Ajax 缓存
发布于 2018年10月21日 01:16
阅读 14 可以 0