专栏首页Alan's Lab使用 gzip 以及 cdn 加快前端载入速度

使用 gzip 以及 cdn 加快前端载入速度

参考资料

  1. Module ngx_http_gzip_module

正文

还记得在 Angular 2 Component 中使用第三方 JS 库这篇文章里说有个新项目用了 Angular2 么?这篇文章还是跟这个项目有关,为了减少每次访问页面的连接数(访问个首页居然会起 132 个连接!就算是调试时的情况也有点吓人了。。。),我用了 SystemJS builder 将整站打包成了单文件,然后另一个数字又狠狠糊了我一熊脸:这个 app.js 在经过 uglifyjs 压缩之后,容量居然还高达 1.2mb 。。。

使用 gzip 减少流量传输

1.2mb,特别这个项目还是用在微信公众平台上的,手机上加载起来简直是噩梦。本文主题所限,先不考虑从项目本身去优化。为了对付这个情况,我们需要在服务器端开启 gzip 来看看效果,这里以 nginx 为例:

  1. sudo vim /etc/nginx/nginx.conf
  2. 定位到 Gzip 的配置 ## # Gzip Settings ## gzip on; gzip_disable "msie6"; # gzip_vary on; # gzip_proxied any; # gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  3. 想省事的话,把后面的#全去掉就能用了
  4. 我这的默认配置里 gzip_types 没有 application/javascript 这一项,如果你那也没有,可能还需要加上才能正常压缩 js 文件 gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript;

好的~万事俱备来看看效果:

实际传输大小 252KB ,压缩到了原来大小的 20% !这个数据不是一般的鼓舞人心,但事情还没完,压缩工作产生的额外开销可不是免费的。如果给每一个请求单独压缩,我这的土豆服务器使上发芽的劲都撑不住。。。

好在解决方法也简单的很,以 nginx 为例,使用 gzip_static 代替即时压缩即可。但这里我不考虑这个,因为前几天申请的腾讯公众号 CDN 还没用上,免费一年呢,不用白不用~

使用 CDN 加速网站访问

关于 CDN 的原理,可以阅读腾讯云的 CDN缓存那些事 一文了解。简单概括的话,源站就是连锁店的总店,CDN 就是开遍全国各地的分店。总店有的菜色,分店都会复制过去。这样一来顾客就不用不远千里慕名前往总店,而可以就近去楼下的分店一饱口福。

好处大致有两点,一是地理位置上的接近保证顾客的需求能够快速被满足,二是不同地区的各个分店分担了大量的压力,总店只需向分店传授新菜即可。

同时, CDN 还帮我们缓存了前面 gzip 压缩的工作成果。当客户端表示可以处理 gzip 数据的情况下,CDN 就会将缓存下来的压缩过的文件版本发送给客户端,而不需要我们的源站服务器再次进行压缩工作。这就是前面说我们不需要使用 gzip_static 就能够缓存压缩结果的原因。

腾讯 CDN 使用手册传送门:腾讯CDN新手入门

收工

经过上面的工作,可以说加载速度的问题已经得到一定程度上的解决了。但其实还有一个说严重也不算严重的问题:

这个 js 最长的一次需要花上将近 1 秒才算初始化完,这还是在电脑上。实测在手机上的表现就是一切下载完后会有一段 1 秒左右的页面空白?。好在是个单页应用,就这一下子慢后面的交互都还蛮顺畅。所有东西都集中在这一个脚本里,花这么久也是能理解的。这表现目前是够我用了,希望以后能有更好的解决办法吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [swift]读取svg图片为UIBezierPath,开心做动画

    最近手痒又想整点动画玩玩,但是想了几个主意发现稍微复杂一点的手写都一定会累爆。这篇文章记录一下今天折腾的一个方案。说来简单,就是用矢量设计工具舒舒服服的做好设计...

    Alan Zhang
  • windows 10 私人不负责任评测(多图预警)

    最牛的一个: Mac 下 Flash 一直是个痛,只有用虚拟机的 Win 7 才勉强敢看,但拿 Win 10 试了一盘三国杀+两部腾讯视频(拿 Mac 看过腾讯...

    Alan Zhang
  • iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

    iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一。不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太...

    Alan Zhang
  • Nginx——开启 GZIP 压缩

    配置在 nginx.conf 文件中,对于 gzip 的编写,写在 http 模块下面。

    凡人飞
  • Nginx服务器的压缩功能

    在Nginx服务器配置文件中可以通过配置Gzip的使用,可以配置在http块,server 块或者location块中设置,Nginx服务器可以通过ngx_ht...

    java乐园
  • 难离难舍的internet2与SDN

    Internet2已经将其产品网络中的OpenFlow相关的部分移除,让用户回到MPLS,此举看上去违背了业界发展大潮,但这只是暂时的现象。 换句话说,In...

    SDNLAB
  • if语句-c语言学习笔记

    Youngxj
  • for循环里的变量闭包

    介绍一下,setTimeout会在若干毫秒的延时后执行一个函数(等待其它代码执行完毕)。

    无邪Z
  • python写xml

    py3study
  • PHP内存模型

    php为单进程的,由apache代执行,每一个请求,由apache从进程池中取出进程,初始化数据结构,创建进程.

    mySoul

扫码关注云+社区

领取腾讯云代金券