如何快速判断一个网站是不是一坨shi

大家有没有发现有些网站加载速度特别慢(当然自己的站除外:)),虽然功能很简单,也没什么图片,但是就是一个字“慢”,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条军规,大家可自行搜索

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,458评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,222评论 1 92
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,596评论 0 31
  • 有没有过这样的经历:人生很多大事是仓促之间决定的。为一个事精挑细选了很久,可是临到头解决,决定的时候非常仓促。 想...
    mylkevin阅读 431评论 0 0
  • 作为一名混迹iOS开发圈近4年的码农,资历不深不浅,看到这个问题还是忍不住想回答一下。 如果你打算学习iOS开发,...
    阿道奇阅读 3,141评论 2 22

友情链接更多精彩内容