《高性能网站建设指南》-CSDN博客

本文链接：https://blog.csdn.net/Merciwen/article/details/72886045

读了《高性能网站建设指南》总结一下主要的几点

前端性能优化的非常的重要，作者在前面表示，10~20%的时间花在了后端的处理，80~90%花在的前端，所以优化前端的效果更加的明显。

1 减少http请求

这个是一个基础的优化方案，减少请求，那么怎么可以减少请求呢？

使用图片地图就是在一张图上设置几个点击的效果
使用css的背景定位技术。把图片放在一章图上，然后呢，定位到展示的地方
使用base64这种在文本中的格式
合并javascript和css

2 添加expries头

Expires 设置了这个文件在什么时候过期,如果页面返回有这个头，那么就从缓存里面拿，减少一个http请求。
但是有个问题，但是我们不能保证服务器端的时间和客户端的时间是相同的，而且呢过期日期要经常检查，一旦时间过期还要再设置一个新的日期。

所以呢我们有加了一个属性
cache-control:max-age=9999.定义组件被缓存多少秒。从组件被请求开始的秒数少于max-age 定义的秒数，浏览器就可以使用缓存版本，加入定义了十年，那么你从请求这个文件开始的未来十年都不会再请求这个文件。

如果两个属性都定义了，那么max-age 会重写expires头。

可以通过修改文件名的方式改变缓存的失效时间。

3 使用内容分发网络

cdn加速。就是在不同物理地理位置存放服务器。让客户去距离最近的地方找文件，这样节省时间。但是我认为更高端的是类似骑牛这样的cdn供应商，可以将静态文件放在cdn上，减少本站的http请求，而且呢静态文件访问主站，也会带着cookie去这对网站的性能不好，那么静态文件去另一个网站，对主站的性能得到改善

4 减少DNS的操作

首先明白dns的处理机制，有浏览器缓存的先去浏览器找到域名对应的IP。如果浏览器没有，去操作系统里面找。操作系统里面没有回去host文件里面找。
文件里面也没有那就去ISP哪里找。哪里没有就去广域网里面找。如果我们缓存了，就不用这么多动作.那么我们的网站就会快很多

5 样式表放在页面head部分

这是为什么呢？按理说如果在下面，前面的图片等组件就可以先展示出来，不用等样式先加载就可以展示内容不是很好嘛？

其实呢这是浏览器的一种补救方法.因为如果放在页面下方，先出内容再出样式，会造成无样式内容的闪烁。而且会重绘页面，构建呈现树是一种浪费。为了让页面不闪烁，所以浏览器选择了白屏，加载完样式再显示。所以呢将css 放在上面，白屏的时间变短了，而且闪烁的问题也没有了。

6 js放在页面的后面

js 会阻塞其他的文件的执行，如果放在上面，页面白屏的时间会变长，而且出错的话，有些错误是致命的，整个网页都停止在那里，无法执行下去。js还存在依赖关系。有的js要对文本做出修改，如果文本没有加载，找不到文本也会报错。

7 使用压缩技术

使用gzip压缩。

8 使用，解除Etag

Etag 是web 服务器和浏览器确认缓存组件是否有效性的一种机制

当Etag能对上，那么就从缓存里取304 ，如果对不上会请求200。但是如果系统用了负载就会对Etag造成干扰。因为如果四台服务器，只有四分之一的概率可能成功缓存。所以有了负载尽量不要使用这个属性.如果你没有负载，那么Etag是你除了Cache-control:max-age 之外的很好选择

9 避免css表达式

使用表达式会意想不到执行的次数。方法使用一次性表达式或者用js代替
建议少用css 表达式

10 使用外部JavaScript和css

纯粹的讲：内联要比外联快
将文件放在内部还是外部是一个平衡的过程，具体要看你的这个页面的访问情况，
页面的浏览量，缓存的文件数量，组件的重用情况。
优点：
1. 组件可以重用
2. 组件可以缓存
3. 修改方便（自己感觉）
技术：先加载再下载（先内联再外联），动态内联（使用cookie决定是内联还是外联）