《高性能网站建设指南》读书总结

昨天完整的读了一遍《高性能网站建设指南》,收获颇丰。正如作者序言里说的,拿到这本书的你是幸运的,但是更重要的是,你的网站的用户很幸运,:)

 

书的作者是YUI(Yahoo! User Interface)的一名核心开发人员,而书的内容是将他们在网站前端优化的14条原则逐一分享。

书很薄,适合我这种懒人,可以一天就读完,:) 不过书的内容简洁明了,很有操作性,道理也讲得明白,喜欢这种书的风格。

下面把这14条原则简单说一下,以做备忘。

 

规则1,减少HTTP请求

这是最重要的原则,如果14条规则里只能选一条,那就是它了。可以通过多种方法减少HTTP请求,例如合并图片,合并JS和CSS等等。这一点薄荷网有很多改进的余地,首先应该把现在的JS合并了。

 

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

内容发布网络就是CDN了,但是CDN似乎挺贵的,目前还不适合薄荷网,不过可以考虑自己弄一个网通的静态资源服务器解决有中国特色的可恶的南北互通问题。

 

规则3,添加Expires头

这个没什么好说的,是个建网站的人都应该知道。目前薄荷网图片,css,js,flash过期时间设置了3年,可以说是永久了,:) Expires有个麻烦的地方是内容更新问题,Ruby on Rails这方面处理的非常棒,它是在文件名后面自动带了资源文件的timestamp,完美解决。

 

规则4,压缩组件

这个也没什么好说的,配置一下web server的压缩功能,减少服务器带宽,加快响应,立杆见影。

 

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

这条有点新鲜,虽然平常都是这么做的,但是没有想过不这样做有什么麻烦。如果不这样,浏览器是不能做到边下载边显示,用户体验很糟糕。薄荷网现在有部分样式没放在顶部,回头检查测试一下看看。

 

规则6,将脚本放在底部

这条是第一次听说,有些震惊。原因在于浏览器下载执行脚本的时候,会阻塞其他资源的下载,这样导致整体响应时间变长。薄荷网的脚本几乎都是放在顶部的,回头测试比较下看看。

 

规则7,避免CSS表达式

CSS表达是简直像个Bug,可以弃用,寻求变通的解决方便,比如事件处理器等。

 

规则8,使用外部的JavaScript和CSS

相信大家大部分情形下都是使用外联的,但纯粹的处理而已,内联JS和CSS似乎更快,考虑到缓存和复用,大部分情况显然是外联更划算。因此,在一些情景,例如首页,还是可以使用内联的。

 

规则9,减少DNS查找

DNS耗费的时间是相当可观的,因此同一页面的域名数量最好控制在2~4之间。

 

规则10,精简JavaScript

精简JavaScript可以显著减少Js文件的大小,减少下载时间。

 

规则11,避免重定向

get的重定向可以通过web server的url rewrite很好解决。

 

规则12,移除重复脚本

重复的脚本既增加一次http请求,又要重复执行,当然坚决移除了。

 

规则13,配置ETag

目前web server的ETag实现不但起不到好的效果,通常还使性能变得更差,真是一个糟糕的设计。所以静态资源尽量去除ETag配置。但是对于刷新频率不高的Rails动态页面,这个似乎是个不错的大幅加快响应的方法,值得再深入好好研究一番。

 

规则14,使Ajax可缓存

就是使用之前的规则应用于Ajax请求)

 

对于前端优化技术,我之前根据已经从 14 条增加到 34 条的 Exceptional Performance 做了一份笔记:

· Web 前端优化最佳实践之 内容篇

· Web 前端优化最佳实践之 Server 篇

· Web 前端优化最佳实践之 Cookie 篇

· Web 前端优化最佳实践之 CSS 篇

· Web 前端优化最佳实践之 JavaScript 篇

· Web 前端优化最佳实践之 图象篇

· Web 前端优化最佳实践之 Mobile(iPhone) 篇

这些最佳实践看似没什么艰深的技术含量,而网络上也能看到很多关于网络前端优化的文章,但是实际上我发现能操作、执行下去的网站还是不多,更多的时候,大家把类似的信息当成参考信息而已,看过,丢掉,如此而已。Web 前端优化的时间准则有些其实也算是常识。我曾经听到过某家大型网站的案例:用户反映网站速度慢,进行了多次技术会议,多个方案评估之后,"发现"是图片拖慢了整个网站,于是,大家的意见统一了,建设更多的 CDN ... 可实际上,这个问题或许不需要过多的投入研究,简单的分析一下页面元素比例就知道了。

这本《高性能网站建设指南》的内容以最初的 14 条优化准则写的,精炼简洁(几个小时就能读完),我觉得已经抓住了前端优化的至少 80% 的内容,加上书中的一些引申内容(尤其是涉及到的 RFC),如果这些都能做好,那么已经能够解决绝大部分问题了。所以是绝对值得网站运维人员一读。而且,我也认为这是 Web 2.0 网站架构不可或缺的图书 之一。

另外,发现博文视点的这一批 O'Reilly 的图书都是有索引的,很难得。

 

华为的C语言编程规范.pdf 华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。 立即下载

相关推荐

DaVinci Configurator实战:从DBC导入到通信栈配置全解析

本文详细解析了如何使用Vector DaVinci Configurator工具,从导入行业标准DBC文件开始,高效完成AutoSAR通信栈(包括COM、PduR、CanIf等模块)的自动化与精细化配置。文章通过实战步骤,重点阐述了DBC导入、与EB MCAL协同、核心模块参数调整及诊断标定服务集成等关键环节,旨在帮助汽车电子工程师快速掌握这一核心工具,提升开发效率与准确性。

weixin_29159127的博客 592

高性能网站建设指南读书笔记

思维导图链接:http://v3.processon.com/view/link/5f7ec46b762131119546c87d 取材自《高性能网站建设指南》及《高性能网站建设进阶指南》》 本文只是个人读书笔记,更多详细内容请查看原书。 高性能网站建设指南 1. 减少HTTP请求 CSS Sprites:干净的标签,很少的图片和很短的响应时间 Inline Images:data:[<mediatype>][;base64],<data> 由于data:U.

好女绪的博客 581

黑暗中的爆破(船讯网Ais爬虫暨爬虫实战js逆向学习经验分享)

船讯网 爬虫 js逆向 python

returnadsss的博客 1575

性能之巅:《高性能网站建设指南》读书笔记

性能之巅:《高性能网站建设指南》读书笔记前言去年笔者(Chainn)读完了几本前端性能优化以及HTTP等网络方面的书,并在生产环境做了部分应用。这些书包括《高性能网站建设指南》、《高性能网站建设进阶指南》、《大型网站技术架构:核心原理与案例分析》、《HTTP权威指南》、《图解TCP/IP》等,最近遇到一些问题,又开始翻这些书,发现不少技术点颇为生疏,看来该总结一番了。先总结最实用的《高性能网站建设指

Chainn的全栈之旅 6422

项目计划书、规划文档模板

项目计划书、规划文档模板 最近通过项目实践经历,整理出的一套项目计划书(仅供自己参考梳理思路使用) 有喜欢的文末加VX 辛苦码字如有转载请标明出处谢谢!——木研 更新的简版项目规划文档! 原版文件请+vx :baierfa ...

weixin_43194923的博客 987

GoPro官方API实战:从蓝牙配对到Wi-Fi流媒体,构建跨平台控制应用

本文详细解析了GoPro官方API的开发实践,涵盖蓝牙配对、Wi-Fi流媒体控制等关键技术。通过实战案例,指导开发者如何构建跨平台控制应用,解决设备发现、指令解析、视频流传输等核心问题,并分享Android平台迁移经验与常见问题排查方法。

weixin_30727835的博客 397

《高性能网站建设指南》读书摘要

本文未详细记录细节,仅以提纲的形式大致列出了书中所讲内容,作为备忘之用。 只有10%-20%的最终响应时间花在了下载HTML文档上,其余的80%-90%花在了下载页面的中的所有组件上。 ——性能黄金法则 规则一 减少HTTP请求 使用图片地图,多个图片相邻的时候可以使用一个张大的图片然后使用map分割以减少HTTP请求 使用当然也可以使用CSS sprites来合并图片 使用内联图片。格式如同

林新月的专栏 625

潜在图神经网络学习笔记(Latent Graph Neural Networks for Human Skeleton-based Action Recognition)

在本文中,我们从一个新的角度来解决这个问题,通过将非结构化的骨架数据映射到潜在空间,如图2所示,这里称为潜在特征空间或嵌入空间,其中一组项嵌入在一个流形中[ 1 ],并且在潜在空间中彼此更相似的项被放置在彼此更接近的位置。潜在空间中的位置可以被认为是由一组潜在变量定义的,这些潜在变量来源于对象的相似性。将骨架数据嵌入到流形中,消除了远近邻居之间的冗余依赖关系,以解决加权问题。得到具有多尺度聚合特征的稀疏图矩阵结构,以更好地理解骨骼关节的直接加权信息。

qq_45631885的博客 489

高性能网站建设指南 读书笔记

高性能网站建设指南--笔记 ================================================================================ 规则1--减少HTTP请求 性能黄金法则: 10%-20%的最终用户响应的时间花在接受所请求的HTML文档上。剩下80%-90%的时间花在为 HTML文档所引用的所有组件(图片、脚本、

xradio的专栏 950

Ubuntu22.04 网络图标消失与连接故障排查指南(附实战修复流程)

本文详细介绍了Ubuntu22.04系统中网络图标消失与连接故障的排查与修复方法。通过ifconfig、dhclient等命令诊断问题,提供从紧急恢复网络连接到深度排查的完整解决方案,帮助用户快速恢复网络功能并预防类似问题再次发生。

weixin_28481133的博客 287

深入理解命名实体识别(NER)

命名实体识别(NER,Named Entity Recognition)是自然语言处理(NLP)中的一项重要技术,用于从文本中识别出特定类型的实体,并将这些实体分类到预定义的类别中。实体通常包括人名、地名、组织名、日期、时间、数量、货币等。例如,在句子“Barack Obama was born in Hawaii in 1961”中,NER任务的目标是识别“Barack Obama”作为人名,“Hawaii”作为地名,以及“1961”作为日期。

AngelCryToo的专栏 4638

《高性能网站建设指南》读书笔记

昨天完整的读了一遍《高性能网站建设指南》,收获颇丰。正如作者序言里说的,拿到这本书的你是幸运的,但是更重要的是,你的网站的用户很幸运,:)   书的作者是YUI(Yahoo! User Interface)的一名核心开发人员,而书的内容是将他们在网站前端优化的14条原则逐一分享。 书很薄,适合我这种懒人,可以一天就读完,:) 不过书的内容简洁明了,很有操作性,道理也讲得明白,喜欢这种书的风格...

男人最终还得靠身材取胜! 201

OpenClaw 技术架构解析-网关层(上)

OpenClaw 网关层是架构核心中枢,承接Channel层消息,串联消息路由器、会话状态管理器等五大组件,负责消息分发、会话管理、状态统筹、上下文维护等关键职责,是连接Channel层与AI执行引擎的核心桥梁,保障多渠道交互稳定、有序运行。

wend的博客 711

高性能网站建设指南-读书笔记

《高性能网站建设指南》读书笔记:   性能黄金法则:   只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。规则1 减少HTTP请求   可以通过使用图片地图,CSS Sprites(有利有弊),内联图片(data:URL模式,IE不支持,不能被缓存),合并脚本和样式表。   规则2 使用内容发布网络

redspspider 662

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

高性能网站建设指南(读书笔记)

1.减少HTTP请求:    a. 用CSS Sprites产生一张图片,而非分开的图片,这样只用请求1次而非多次。一个图片关联多个url。通过background-position属性指定CSS偏移量。 且合并图片比分离图片的总和要少(减少颜色表,格式信息),降低下载量    b.合并脚本和样式表(JS/CSS):合并成一个文件,但不要产生大量的组合 2.使用内容发布网络(CDN)

huanghuayn的专栏 883

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

用NE555定时器驱动舵机:从PWM原理到硬件实践

PWM(脉宽调制)是一种通过调节脉冲宽度来控制模拟信号电平的基础技术,广泛应用于电机调速、舵机控制等领域。其核心原理是利用固定频率的方波信号,通过改变高电平持续时间(占空比)来等效输出不同的平均电压或控制量。在嵌入式系统和电子设计中,理解PWM的硬件生成机制对于深入掌握信号本质和进行底层调试至关重要。NE555定时器作为经典的模拟集成电路,能够通过外围RC元件构成振荡器,直接生成PWM波,为学习信号时序、占空比计算提供了直观的硬件平台。本文以舵机驱动为具体应用场景,舵机作为一种位置伺服机构,其标准控制协议要

weixin_30613727的博客 389

高性能网站建设指南 读书笔记(一)

这本书的绪言讲得很好,对于网站来说,页面从发送请求到看到页面,只有10%~20%的时间是花在Web服务器获取HTML文档并且传输到浏览器的,剩余的80%~90%的工作都是前端部分来做的,作为一个前端开发人员,与其希望后台提升效率,不如自己通过一些方法来提升前端的效率。作者说,将这本书的14条规则合理的运用在网站上,可以节省25%甚至更高的...

weixin_34060741的博客 188

将样式表放在顶部——高性能网站建设指南规则5(读书笔记)

PS:以下内容仅仅为个人读书笔记,如有错漏,随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得! 背景 阅读《高性能网站建设指南》第五章,文章中,作者建议最好将CSS文件(样式表)放在文档顶部,即<head>标签之间。当然这是在一定的应用前提之下的——该样式表在页面呈现时可能并不需要,而是作用于由于用户与页面的交互行为而产生的动态标签。比方说你点击某个显示有“...

dengrong8117的博客 122

读书笔记:高性能网站建设进阶指南

第7章 编写高效的JavaScript 1 管理作用域 标识符在作用域链中的位置越深,查找和访问它所需要的时间就越长; 局部变量是JavaScript中读写最快的标识符。全局变量对象始终是作用域链中的最后一个对象,所以对全局标识符的解析总是最耗时的。 原则:尽可能的使用局部变量。任何非局部变量在函数中使用超过一次时,都应该将其存储为局部变量。 如:在函数中如果多次调用全局变量docum...

weixin_33695450的博客 141

高性能网站建设指南 --读书笔记

为什么80%的码农都做不了架构师?>>> ...

weixin_33807284的博客 117
上一篇: 如何优化JavaScript脚本的性能
下一篇: 京东今天还在用.NET架构的原因是什么?
SleepInDelphi
博客等级 码龄19年 32粉丝 388原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值