大家有没有发现有些网站加载速度特别慢（当然自己的站除外：）），虽然功能很简单，也没什么图片，但是就是一个字“慢”，PC上就已经够慢了，别说手机移动端了，完全惨不忍睹。但如果一个网页的如果打开速度超过4s，用户基本就会直接关闭网页了。
但一些大站，比如网易搜狐，虽然信息量巨大，图片巨多，但是加载速度巨快，基本上是ms级的，为什么人家的就这么快呢？
大家可以看下周围的网站是否有这些问题呢？
1 图片未压缩且未使用CDN：如果你看到一个网站上有N多图，但你即不压缩又不使用CDN，那么速度绝对会被拖慢。
2 未设置过期时间：静态资源若没有设置过期时间会导致不会被浏览器缓存，那么每一次都会重新到服务器重新拉取。
3 外链资源过多：如果你的JS或CSS文件很多，而且不做合并的话，由于每一次http请求多会消耗非常多的资源，因此会造成很大的资源浪费。
使用YSlow，立马发现网站是不是一坨shi。YSlow一个插件，Chrome和Firefox都可以下哦，
浏览器输入地址，然后点击测试，就可以测试网站啦，这是传说中的大站，大家请看，
评分为A的大站
下面这个就不是很好啦
评分为D
我们来看看有哪些主要问题
1 HTTP请求过多（Make fewer HTTP request）
F（Fail）了
每一个HTTP请求都要消耗资源，是一个漫长的IO过程，所以，请求数量越少越好，以上这个例子有19个外部的JavaScript样式， 13个外部的CSS样式，如此多的外部引用，每个都会消耗大量的浏览器资源，所以我们需要做的是进行压缩合并处理：将所有的JavaScript文件合并成一个，将所有的CSS再合并成一个，这样，就能大大减少HTTP请求了。常见的合并工具有很多，常见的有compile.js等等。
2 未使用内容分发网络 Use a Content Delivery Network (CDN)
又 F（Fail）了
CDN（内容分发网络）是通过在网络各处放置节点服务器，然后你请求某个资源时，这个虚拟网会把离你最近的资源分配给你。网络中最浪费流量的就是图片资源了，小则十几K，多则上百K，所以，如果图片不错CDN，将非常影响加载速度。国内常用的CDN有阿里云、七牛啥的，这里可以推荐大家使用七牛，因为在流量小的情况下，他是完全免费的。
3 过期时间 (add expired headers)
过期时间
浏览器中都会有一个过期时间，通过Cache-Control首部和Expires首部来控制，比如我设为3天，那么在3天内，你访问这个静态网站时，都会直接从浏览器缓冲中获取，如果不设Cache-Control的话，那么每次就将会向服务器取数据。
4 JavaScript必须放到最后
这个想把大家都知道，引用的JavaScript文件必须放到HTML文件的最后。原因是因为浏览器的加载原理，浏览器当中有一个叫“首屏时间”，所谓的首屏时间是网页第一次显示出来的时间，注意这个时间并不是网页完全加载完毕的时间。因为浏览器是线性加载，只有在HTML元素全部加载完毕之后才会显示，那么如果把JS放到前面的话，会导致必须加载完所有的JS代码，会大大影响加载速度。
5 使用gZip压缩
这个想必大家都知道，服务器端的静态资源是能够使用gZip压缩的，只要在服务器中设置一下即可，压缩之后静态资源会至少缩小30%左右。
6 使用懒加载
无论如何，图片还是太影响网页加载速度了，比如10张图片，全部加载的话可能要10秒，但是如果首页只有2张图的话，只显示2张图片，那么就是2秒了。懒加载组件有很多现成的，在github上搜索mlazy即可。
这是最实用的6个方法了，常见的优化方式有yahoo的35条军规，大家可自行搜索
网友评论