高性能网站建设指南（笔记）

于 2020-10-14 18:54:06 发布
阅读量912 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38231650/article/details/109080522
版权

高性能网站建设指南（笔记）

序言A

性能黄金法则

只有10% ~ 20%的最终用户响应时间花在了下载HTML文档上。其余的80% ~ 90%的时间花在了下载页面中的所有组件上。

PS：页面中的组件指 图片、脚本、样式表、flash等


规则4 —— 压缩组件

通过减小HTTP响应大小来减少响应时间

压缩是如何工作的

从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding来标识对压缩的支持。

一般常用的压缩格式为gzip。
在这里插入图片描述

Web服务器通过响应中的Content-Encoding头来通知Web客户端。
在这里插入图片描述

压缩什么

服务器基于文件类型选择压缩什么，通常受限于对其进行的配置。

大多数网站选择压缩HTML文档、样式表和脚本。

图片和PDF不应该被压缩，因为他们本身就已经被压缩了，视图对他们压缩只会浪费CPU资源，还可能会增加文件大小。


压缩的成本有：

  1. 服务器花费额外的CPU完成压缩
  2. 客户端对压缩文件进行解压
  3. 难以得到的信息有：响应的大小，连接的带宽，客户端与服务器之间的距离

根据经验，通常对大于1KB或2KB的文件进行压缩。

mod_gzip_minimum_file_size指令控制着希望压缩的文件的最小值，默认为500B.


节省

压缩通常能将响应的数量减少近70%


配置

Apache服务器配置
在这里插入图片描述
在这里插入图片描述


代理缓存

解决代理缓存的方法是在Web服务器的响应中添加Vary头。

Web服务器会告诉代理根据请求头来改变缓存的响应。由于压缩的响应式基于Accept-Encoding请求头的。因此需要在服务器的Vary先迎头中包含Accept-Encoding.
在这里插入图片描述
默认情况下mod_gzip回向所有响应添加Vary:Accept-Encoding头，以驱使代理执行正确的操作。


边缘情形

需要保证客户端浏览器支持gzip压缩。

浏览器白名单方式——只为已经证实过支持压缩的浏览器提供压缩内容。在服务端使用恰当的User-Agent值来指定浏览器白名单。

在这里插入图片描述
把代理缓存加进来之后，将User-Agent作为代理的另一种评判标准添加到Vary头中。

在这里插入图片描述

禁用代理缓存：(会增加带宽开销)

  1. Vary:*
  2. Cache-Control:private

压缩的实际效果

压缩通常能将内容压缩约70%


规则5——将样式表放在顶部

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

  1. 全新的界面设计 ，将会带来全新的写作体验；
  2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
  3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
  4. 全新的 KaTeX数学公式 语法；
  5. 增加了支持甘特图的mermaid语法1 功能；
  6. 增加了 多屏幕编辑 Markdown文章功能；
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
  8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目Value
电脑$1600
手机$12
导管$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆
圆角长方形
菱形
  • 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
  • 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

小腊月
关注
互联网企业安全高级指南读书笔记之网络安全
不急不躁
04-17 2303
网络入侵检测 传统 NIDS 绿盟 IDS 体系架构 绿盟 IPS 体系架构 IDS/IPS 部署示意图 大型全流量 NIDS 由于 NIDS 采用的是基于攻击特征的签名库，只要加载的攻击特征一多，系统负载会马上飙升，远到不了系统的标称负载就会出现丢包和误报的上升。不能跟基础架构一起扩展的安全解决方案最终都会掣肘 针对 IPS 一个打折扣的版本就是利用 DDo...
《前端技术架构与工程》之性能笔记
热门推荐
wsdchong的博客
06-14 1万+
《前端技术架构与工程》之性能 前言： 《前端技术架构与工程》这本书真的越看越有味。目前写了部分这本书的笔记，共分为三部分做笔记，已写了两篇如下。 《前端技术架构与工程》初次笔记 《前端技术架构与工程》之编程语言 今天准备写技术架构部分（编程语言、技术规范、组件化、前后端分离、性能）中的性能部分。 初次笔记让我从架构师的角度认识前端技术栈，编程语言笔记让我对前端三大件有了新的理解。 虽然技术规范、组件化、前后端分离里面的知识也重要，但是我这三部分都要了初步了解，勉强够用。唯一性能这一块没有去深入了解，而性能这
《高性能网站建设指南》（High Performance Web Sites）非官方技术支持
weixin_33717298的博客
01-08 136
前不久翻译了High Performance Web Sites一书，出版社定书名为《高性能网站建设指南》。 关于这本书，网络上已经有不少讨论了，确实是一本不可多得的好书。我这里就不过多吹嘘了。 以下是关于这本书的一些链接（等中文版上市后再放出购买链接）： O'REILLY上此书的链接：http://www.oreilly.com/catalog/9780596529307/ ...
高性能网站建设指南
草巾冒小子的博客
10-23 1061
之前一个机械化工类企业网站项目：发现项目原网站确实卡的不行。 项目结束之后，与之前原网站对比了一下，性能优化的大有可侃之处。 总结归纳了一下高性能建站的经验方法。 结合《高性能网站建设指南》一书[作者：美 · Steve Souders 著 && 刘彦博 译]专业的剖析，这里博客一撒，分享一下此书与经验。 Web前端开发精髓 网站性能优化 参考点： 规则1：减少HTTP...
WEB站点性能优化实践（加载速度提升2s）
点测营专栏
06-30 524
http://lusongsong.com/reed/608.html 感谢大CC的投稿：  进行优化前，关键是剖析当前的web性能，找到性能瓶颈，从而确定最需改进的地方;如果精力有限，首先将精力放在能明显提升性能的改进点上; 《高性能网站建设指南》提出了一个性能黄金法则： 只有10%-20%的最终用户响应时间花在了下载HTML文档上;其余的80%-90%的时间花在
《高性能网站建设指南》笔记
03-23
《高性能网站建设指南》，这是一本值得所有网站前端人员、网站开发人员、网站产品经理一读的好书。《高》首先分析了网站的用户响应时间都花在哪里，然后在这个基础上归纳出提高性能的若干办法，最后以十大网站为例...
JavaScript关于提高网站性能的几点建议(一)
12-12
近在学习《高性能网站建设指南》这本书，本文算是一个学习笔记，将学到的东西进行整理一下，方便后面查看。 性能黄金法则（Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML...
高性能网站建设指南2 中文版 高性能网站建设指南(中文版)
01-19
高性能网站建设指南 “如果实现了Steve这些建议中的20％，你的站点就能出现戏剧性的变化。有了这本书和YSlow扩展，实在是没有理由再构建出运行速度缓慢的网站了。” 　　　　　　　　——Joe Hewitt，Firebu9调试器和Mozilla的DOM解释器的开发者 　　“Steve Souders完成了一项神奇的工作，他提出了一系列简明的、可操作的，并且注重实效的开发步骤，使Web性能世界发生了翻天覆地的改变。” 　　　　　　　　——Eric Lawrence，微软Fiddler Web Debugger开发者 　　想让你的网站显示得更快?本书提供了14种规则，可以使用户在请求页面时减少20％～25％的响应时间。作为Chief Performance Yahoo！，作者Steve Souders收集了在优化网络时访问最多的页面积累下来的最佳实践。即使网站已经进行了高度的优化——如Yahoo！Search和Yahoo！首页——我们也能从这些出奇简单的性能规则中获益。 　　《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例，在本书的配套网站上可以找到代码片段。这些规则包括： 　　•减少HTTP请求　　　　　•使用外部JavaScript和CSS 　　•使用内容发布网络　　　•减少DNS查找 　　•添力Expires头　　　　 •精简JavaScript 　　•压缩组件　　　　　　 •避免重定向 　　•将样式表放在顶部 •移除重复脚本 　　•将脚本放在底部 　 •配置ETag 　　•避免CSS表达式 　 •使Ajax可缓存 　　如果你希望构建高流量页面，并且改善用户访问网站的体验，那么本书是你不可或缺之物。 　　Steve Souders，Chief Performance Yahoo！，为Yahoo！的其他产品团队开发了性能分析工具，并致力于推广这些最佳实践和工具。在加盟Yahoo！之前，Stevee曾就职于多家中小型公司，其中有两家还是他协办的——Helix Systems和CoolSync。他是斯坦福大学管理科学与工程硕士。
性能优化-高性能网站建设指南
10-10
Web前端性能优化数据 性能优化-高性能网站建设指南 Web前端性能优化数据 性能优化-高性能网站建设指南Web前端性能优化数据 性能优化-高性能网站建设指南
高性能网站建设指南.zip
06-21
高性能网站建设指南.zip
高性能网站建设指南.pdf
09-19
高性能网站建设指南.pdf
高性能网站建设
05-29 215
近日读了《高性能网站建设指南》一书。就此发点笔记。 目录：绪言A、绪言B第1章：规则1——减少HTTP请求第2章：规则2——使用内容发布网络第3章：规则3——添加Expires头第4章：规则4——压缩组件第5章：规则5——将样式表放在顶部第6章：规则6——将脚本放在底部第7章：规则7——避免CSS表达式第8章：规则8——使用外部JavaScript和CSS第9章：规则9——减少DNS查...
高性能网站建设的14个原则
我的地盘
07-14 765
今日大致浏览了一下《High Performance Web Sites》。本书的中文版是《高性能网站建设指南》。本书另有对其中个别问题深入探究的进阶篇《Even Faster Web Sites》，中译《高性能网站建设进阶指南》。 作者介绍上面的豆瓣链接中有，就不再照搬过来了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值