此情无计可消除，才下眉头，又上心头。
我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄
1. 首先减少http请求, 首先是图片请求
1-1.将项目中的图片尽量使用为icon
1-2.图片地图<map><area/></map>
1-3.还有精灵图(css-sprites)
1-4.图片压缩 压缩后的图片大小会减少
1-5.小于300k的图片进行压缩 减少http请求 在webpack中可以配置
1-6.合并脚本和样式表 因为都是外联进来的 每一个文件都需要加载 合并之后减少请求量
2. 使用内容发布网络
2-1.使用CDN, 将一些资源放在cdn进行引入,发布静态内容
2-2.节省,将资源放在单独的服务器上
3.添加 Expires Header
3-1.浏览器使用缓存来减少http请求的数量,减少http的响应大小
如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片
3-2.max-age mod_expires
浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中取，
mod_expires Apache模块,在使用ExpiresHeader 时能够像max_age那样设置日期,通过 Expires Default 指令来完成
(如果在规定的时间内,需要发版,但是有缓存任务的时候,可以使用生成新连接的方法进行资源重新请求)
4.压缩组件
4-1. Accept-Encoding: gzip, deflate (客户端列出来的方法中的一种进行压缩响应)
很多浏览器不支持deflate,但是支持 gzip
很多网站会压缩HTML文档,但是像脚本和样式表,XML和JSON 都值得压缩
图片和PDF不应该压缩,因为都是压缩过的 压缩只会浪费CPU资源,还可能会增加文件大小
gzip能将响应整体减少66%, deflate能减少60%
4-2. 配置
配置gzip时使用的模块取决于Apache的版本
Accept1.3使用mod_gzip
Accept2.x使用mod_deflate
4-3.代理缓存
Vary: Accept-Encoding
4-4.边缘情形
服务器和客户端的压缩对等性看似简单,但必须正确才行。无论是客户端还是服务器发生错误，页面都会被破坏，
错误不会经常发生，但是需要考虑。
5.将样式表放在顶部
5-1.将DHTML 特征的样式表放在文档顶部,加载更快, 反之放在后面加载更慢
5-2.逐步呈现
将样式表放在文档底部会导致浏览器中阻止内容逐步呈现,为避免当样式变化时重绘页面中的元素,
浏览器会阻塞内容逐步呈现.
5-3.sleep.cgi
5-4.将css放在顶部
为了避免页面白屏,将样式表放在顶部,这样叫做(css at the top),不管页面是如何加载的,窗口新开,重新加载,页面都会逐步呈现
一个style模块可以包含多个@import 但是@import必须放在所有其他规则之前
@import有可能导致白屏,即便把@import放在文档的head标签中也是如此
5-5.无样式内容的闪烁
样式表在页面中的位置并不影响下载时间,但是会影响页面的呈现
6.将脚本放在底部 可以提高下载的并行度
6-1.脚本带来的问题
6-2.并行下载
6-3.脚本阻塞下载
6-4.最差情况: 将脚本放在顶部
6-5.最佳情况: 将脚本放在底部
7.避免css 表达式 CSS表达式是动态设置css属性的一种强大 并且危险的方式.
7-1.一次性表达式 防抖节流
7-2.事件处理
7-3.没有深入了解底层影响的情况下使用css表达式是很危险的
8.使用外部JavaScript 和 css
8-1.纯粹而言,在HTML文档中写js与css 加载更快,因为减少了http请求 30% ~ 50%
8-2.组件重用
如过网站每个页面使用了想通的js和css,那么使用外部文件可以提高这些组件重用率.Expires
如果重用性底,还是内联更有意义
8-3.典型的对比结果
9.减少DNS查找
Internet是通过IP地址来查找服务器的,犹豫IP地址很难记,太长使用包含主机名的URL来取代她
dns也是开销,通常浏览器查找一个给定的主机名的IP地址要花费20~120毫秒
9-1.DNS缓存和TTL
DNS查找可以被缓存起来以提高性能
10. 精简JavaScript
10-1.混淆是可以应用在源代码上的另一种优化方式.和精简一样,他会移除注释和空白,同事他还会改写代码.
也就是压缩js
10-2.精简css #000000 => #000 0代替0px
11. 避免重定向
每一个请求都是要消费时间的
12. 避免重复脚本
12-1.在页面冲多次包含相同的脚本回事页面变慢
12-2.在Internet Explorer中,如果脚本没有被缓存,或在重新加载页面时,会产生额外的HTTP请求
12-3.在Firefox 和 Internet Explorer中,脚本会被多次请求
13. 使用ETag 没看
14. 使ajax 可缓存
网友评论