专栏首页逸鹏说道Web前端性能优化教程04:精简JS 移除重复脚本&图像和Cookie优化

Web前端性能优化教程04:精简JS 移除重复脚本&图像和Cookie优化

一、精简javascript

基础知识

精简:从javascript代码中移除所有的注释以及不必要的空白字符(空格,换行和制表符),减少javascript文件的大小。

混淆:和精简一样,会从javascript代码中移除注释和空白,另外也会改写代码。作为改写的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了javascript文件的大小。

混淆的缺点

1. 缺陷:混淆过程本身很有可能引入错误。 2. 维护:由于混淆会改变javascript符号,因此需要对任何不能改变的符号进行标记,防止混淆器修改它们。 3. 调试:经过混淆的代码很难阅读,这使得在产品环境中更加难以调试。

相对而言,精简出错的概率会少很多。

一个精简和混淆的示例

这个示例将使用JSMin进行精简,使用yuicompressor进行混淆。原始js如下:

  • //anthor:teroy/*
  • This is for test.
  • */
  • function show(name, day) {
  • alert(name);
  • alert(day);
  • }
  • function test(name, day) {
  • var variable = name;
  • show(name, day);
  • }

JSMin精简后的代码:

  • function show(name,day){alert(name);alert(day);}
  • function test(name,day){var variable=name;show(name,day);}

yuicompressor混淆后的代码:

  • function show(b,a){alert(b);alert(a)}function test(c,a){var b=c;show(c,a)};

可见,混淆更能减少js代码的大小。

对精简和混淆进行抉择

我们知道启用gzip压缩能减少组件的传送大小,压缩后精简和混淆的差别会进一步减少,综合考虑混淆可能带来的额外的风险,所以优先考虑使用精简。不过,如果对于性能的极致追求,可以使用混淆,但要做足测试,确保混淆不会带来其他的问题。

JQuery作为非常流行的前端框架,除了有开发版外,也提供了一个min版本,供实际部署web使用,这个min版本就使用了混淆,最大化地减少代码总量。

二、移除重复脚本

出现重复脚本的原因

导致一个脚本的重复又两个主要因素:团队大小和脚本数量。开发一个网站需要极大数量的资源,不同的团队需要构建一个大型web的不同部分,当团队整合和沟通工作没有做足,则容易出现重复脚本的情况。当然脚本数量也是重要的一环,脚本数量越多越容易出现重复脚本的情况。

重复脚本如何损伤性能

在没有缓存的情况下,如果在html中重复链接了相同的脚本,IE7以下(包括IE7)将会产生两次HTTP请求,IE8以上则不会。

除了产生不必要的HTTP请求外,对脚本进行重复执行也会浪费时间,脚本的重复执行在浏览器中都存在。

如何避免重复脚本

1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况,有些是必要的,但有些却不是必要的,所以需要对脚本进行一个良好的组织。 2. 实现脚本管理器函数。

一、 图像优化

图像基础知识

gif: 适用于动画效果,例如提示的滚动条图案

jpg: 是一种使用有损压缩的图片格式,它将图片的每个像素分解成8*8的栅格,然后对每个栅格的数据进行压缩处理,通过特殊的算法用附近的颜色填充栅格,隐藏细节。用户可以设置质量级别,从0到100,数字越少图片质量就越差。

png:是一种使用无损压缩的图片格式,它将图片上出现的颜色进行索引,保留在“调色板”上,PNG在显示图像的时候就会调用调色板的颜色去填充相应的位置。png又分为png8,png24和png32;png8表示支持2^8个种颜色,通常情况下png8是最通用的web图片格式。

选择jpg还是png

对比jpg和png的特点,不同的图像使用不同的格式能得到最佳压缩效果。对于层次丰富颜色较多的图像,使用jpg更好,因为为了很好的显示这种图像,png将使用调色板颜色更为丰富的png24,这样图片大小会比jpg大。而对于颜色简单对比强烈的图像,使用png更好,因为png使用较少的调色板颜色就可以满足显示效果,而且得到的图片相对也比较小,而jpg是有损的,在清晰的颜色过渡周围会有大色块,影响显示效果。

将png24|32转化为png8

png图片的优化的很重要的一步:有些png24|32图片本身颜色较为简单,将其转变为png8得到的显示效果很类似,但却能极大地减少图片的大小。这一步可以通过使用工具pngGo来完成,这是一个完全免费的工具,而且可以根据需要设置png所需要的调色板颜色数,得到最大的压缩效果。

使用smushit.it在线无损化压缩

png格式将图像信息保存在“块”中,对于web显示来说,大部分的“块”都并非必要,所以优化策略可以将它们安全地删除。雅虎的YSlow提供了一个在线的无损化压缩工具smushit.it,不过基本上假如已经将图片转变为png8,使用smushit.it能压缩的空间已经很小了,不过对于追求极致性能的web来说,还是值得一试的。

二、优化Cookie

什么是Cookie

Cookie是存储在客户端的一小段文本信息,伴随着用户请求在浏览器和服务器之间传递。Cookie除了核心对象key-value外,还有max-age,path,domain和httponly属性。httponly属性标识一个客户端javascript能否操作这个Cookie;max-age表示缓存时间,单位为秒;domain代表域名,例如设置为.cnblog.com,则i.cnblogs.com也可以访问这个Cookie,如果设置为i.cnblogs.com,则image.cnblogs.com这个域名下的资源将不能访问这个Cookie;path代表文件路径,默认为/,表示可以该domain下的所有资源可以访问这个Cookie。浏览器对单个Cookie大小限制不超过4KB;对于同一域名下Cookie的数量也有限制,一般不允许超过50个。

非持久Cookie和持久Cookie

假如Http请求响应头部Set-Cookie的时候没有给Cookie添加一个过期时间,则它的默认过期时间为当前浏览会话结束,既退出浏览器这个Cookie就无效了,这个Cookie就叫做非持久Cookie,因为是存储在浏览器进程的内存中的。

而如果给Cookie添加了一个过期时间,则Cookie信息将存储到硬盘上,即使浏览器退出这个Cookie还是存在的。只要Cookie未被清除且还在过期时间以内,这个Cookie就会在访问对应域名的时候发送给服务器。

减少Cookie的体积

由于Cookie在访问对应域名下的资源的时候都会通过Http请求发送到服务器,所以通过合理地设计Cookie,减少Cookie的体积,能够减少Http请求报文的大小,提高响应速度。

通过使用不同的主机减少Cookie的使用

Cookie在访问对应域名下的资源的时候都会通过Http请求发送到服务器,但是在访问一些资源(例如js脚本,css和图片)的时候,大多数情况下这些Cookie是多余的,所以我们可以通过使用不同的主机来存储一些静态资源,例如用专门的主机来存储图片,这样访问这些资源的时候就不会发送多余的Cookie,从而提高响应速度。

本文分享自微信公众号 - 我为Net狂(dotNetCrazy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-01

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 新型漏洞:利用浏览器Cookie绕过HTTPS并窃取私人信息

    近期,一个存在于主要浏览器的Web cookie中的严重漏洞被发现,它使安全的浏览方式(HTTPS)容易遭受中间人攻击。此外,大部分Web网站和流行的开源应用程...

    逸鹏
  • C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)

    第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,...

    逸鹏
  • 07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件

    如果移动方向有任何问题请参考===> 异常处理汇总-移动系列 http://www.cnblogs.com/dunitian/p/4867701.html 移动...

    逸鹏
  • 快速学习-登录功能实现-登录成功跳转主页面

    5) Session的时效问题 Session默认有效时间为30分钟,可以在服务器的web.xml配置中修改.

    cwl_java
  • Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】

    什么是会话技术 基本概念: 指用户开一个浏览器,访问一个网站,只要不关闭该浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个这个过程我们...

    Java3y
  • 【Web技术】582- 聊聊 Cookie “火热”的 SameSite 属性

    2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie,在灰度期间,就导致了阿里系的很多应用都产生了问题,为此还专门成立了小组,推动各 BU...

    pingan8787
  • 当浏览器全面禁用三方 Cookie

    苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行...

    ConardLi
  • GO-会话控制

    HTTP 是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出。这样的设计严重阻碍的 Web 程序的设计。如:在我...

    cwl_java
  • Go Web 编程--如何确保Cookie数据的安全传输

    Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发...

    KevinYan
  • 新型漏洞:利用浏览器Cookie绕过HTTPS并窃取私人信息

    近期,一个存在于主要浏览器的Web cookie中的严重漏洞被发现,它使安全的浏览方式(HTTPS)容易遭受中间人攻击。此外,大部分Web网站和流行的开源应用程...

    逸鹏

扫码关注云+社区

领取腾讯云代金券