博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端性能优化(七)精简JS 移除重复脚本
阅读量:4134 次
发布时间:2019-05-25

本文共 1344 字,大约阅读时间需要 4 分钟。

本文转自:

一、精简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. 实现脚本管理器函数。

转载地址:http://xfjvi.baihongyu.com/

你可能感兴趣的文章
我的vimrc和gvimrc配置
查看>>
hdu 4280
查看>>
禁止使用类的copy构造函数和赋值操作符
查看>>
C++学习路线
查看>>
私有构造函数
查看>>
组队总结
查看>>
TitledBorder 设置JPanel边框
查看>>
DBCP——开源组件 的使用
查看>>
抓包工具
查看>>
海量数据相似度计算之simhash和海明距离
查看>>
DeepLearning tutorial(5)CNN卷积神经网络应用于人脸识别(详细流程+代码实现)
查看>>
DeepLearning tutorial(6)易用的深度学习框架Keras简介
查看>>
DeepLearning tutorial(7)深度学习框架Keras的使用-进阶
查看>>
流形学习-高维数据的降维与可视化
查看>>
Python-OpenCV人脸检测(代码)
查看>>
python+opencv之视频人脸识别
查看>>
人脸识别(OpenCV+Python)
查看>>
6个强大的AngularJS扩展应用
查看>>
网站用户登录系统设计——jsGen实现版
查看>>
第三方SDK:讯飞语音听写
查看>>