JS合并的必要性分析
一、效率因素
一般来说,在一个WEB工程中,需要使用大量的JS,这些JS可能来自许多提供者。
而在页面访问时,每次访问资源都要发起一个http请求,因此,即使文件已经缓冲,也需要发出一次http请求来确认文件是否被改变过。如果js个数比较少,那么没有什么问题,但是当JS文件数目比较多的时候,就会导致页面访问效率下降。如果能把所有的js都合并为一个文件,那么就可以节省几百毫秒,甚至几秒的时间,视网络状况而定。如果不需要做任何人为处理,就节省下来这些时间,无疑是相当有意义的。
二、JS引入顺序问题
如果说,效率问题还只是用户体验的问题,而JS引入顺序问题,就会导致你的页面是否可以执行的问题。我们知道,如果JS如果有依赖其它JS库,则被依赖的JS库就要放在依赖的JS库的前面,否则就会发生js错误。当引用的JS库比较小的时候,问题当然不大,但是做企业应用的时候,要用到的JS非常多,甚至在开发后期或维护期还会增加新的JS,这时稍有不慎,就会出现JS引入顺序问题。
为此,Tiny框架提供了解决方案,可以把工程中所有引用的JS资源都根据依赖关系,按顺序放在一个JS引用当中,它可以保证JS的引用顺序是正确的,同时由于所有的JS都只放入一个文件,因此,只会发出一次HTTP请求;第三提供了文件压缩传输功能,所以会保证网络传输量最小。
从下图中,可以看到,引入的js只有一个文件:uiengine.uijs,总共用时609ms
再次访问,可以看到,静态资源都已经是304,全部来自缓冲了,其中js用时58ms。
实际上这里面包含的JS文件有许多个,串行用时5434ms:
第二次访问的时间:js文件都已经是在本地缓冲了,串行用时395ms
两下做下对比:
合并为一个文件时,首次加载用时609ms,未合并为一个文件时,首次加载串行用时5434,节省时间:4825ms,时间比率为1:8.92,也就是说只有原来的11%的时间。
合并为一个文件时,缓冲后加载用时58ms,未合并为一个文件时,缓冲后加载串行用时395ms,节省时间:337ms,时间比率为15.7,也就是说只有原来的15%。
单纯从js加载方面来看,效率提升明显!
加上压缩过滤器,看看情况如何?
可以看到,原本5M的传输量已经变为936KB,访问时间为352ms,较压缩之前访问时间,少了237ms,时间是的58%,因此,访问时间有一定提升,尤其是网络带宽只有原来的18%,这个提升还是非常显著的。
不同的访问,数据会有一些差异,会有一些变化,但是总体来看差异还是显著的。缓冲后再访问,加载的串行时间比率为 1:合并文件个数,也就是说与合并的文件个数成正比。
新又增加了CSS合并,解决了图片资源引用的问题,有图有真相:
从图中看到,CSS都已经被合并到uiengine.uicss文件中了。
下面还有一个css没有合并,是由于这个是皮肤样式,要用来动态切换的,如果把它也合并了,就没有办法进行皮肤动态切换了。
分享到:
相关推荐
合并为1个回购 react-skeleton-css是使用响应式CSS样板构建的React UI框架。 用法和文档 安装 react-skeleton-css作为 npm install react-skeleton-css 用法 您必须在项目中包括框架CSS /样式表。 <link href=...
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
如何将多个js文件合并压缩为一个js文件为什么要合并、压缩你的JS文件?在开始之前,先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了。HTML里...
UIkit是一款轻量级、模块化的前端开发框架用于开发快速且强大的Web界面。UIkit为你提供较为全面的HTML、CSS、JS组件,使用简单、易定制和可...这款框架还是完全免费的,你可以使用、复制、合并、拆分框架无任何限制。
Node.js框架 Total.js框架是用pure JavaScript编写的Node.js平台框架,类似于PHP的Laravel或Python的Django或ASP.NET MVC。 它可以用作Web,桌面,服务或IoT应用程序。 重要信息: $ npm install -g total.js 官方...
第1章(源代码\第1章) 示例描述:本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) ...
hm-tools-js-css 功能:根据URL请求参数将多个javascript文件合并成一个javascript文件返回给请求者。根据URL请求参数将多个css文件合并成一个css文件返回给请求者。支持从当前运行的spring boot工程jar包中读取...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
resume ###如何运行。 下载源码部署到自己的WebServer下面,或者使用NodeJS。...项目优化工具:r.js合并压缩AMD模块 版本管理工具:Git、GitHub 开发环境的WebServer:NodeJS+Express ###目录介绍: bo
Amaze UI 包含近 20 个 CSS 组件、10 个 JS 组件和 17 个 Web 组件,包含近 60 个主题。可以快速搭建界面优秀、体验极佳的多屏页面,大大提高开发效率。与国外框架相比,Amaze UI注重中文排版,根据用户代理调整字体...
印子概述Inko是我使用Vue.js,Primer css框架和marked.js制作的在线降价编辑器。 Inko目前处于beta测试阶段。 如果您发现任何错误,请给我发邮件至jirattikarn [at] mailbox [dot] org特征React灵敏实时预览导出.md...
JavaScript-使用Require JS作为框架来增加模块化和JQuery库功能 LessJS-用于CSS重用和嵌套CSS选择器 Fontawesome-图标库 Bootstrap样式-功能丰富且支持动态HTML / JS Scrum大师: Swathi Kaluvakuri 学生电子邮件...
Assetic 是一个 PHP 的资源管理框架,用于合并和压缩 CSS/JS 资源。这种方式合并资源可以减少浏览器对资源的请求数、降低资源下载大小、加速网站访问。 示例代码: <?php use Assetic\Asset\AssetCollection; ...
一个功能强大,易于访问,对开发人员友好的框架,用于构建响应式网站响应式样板是开发人员的框架。 其他框架在设计上也过于笨拙。... 合并后的输出CSS和JavaScript仅压缩并压缩了20.3kb,但是框架中内置
JavaScript:实现游戏的核心逻辑,包括控制数字方块的移动、合并、生成新数字等功能,确保游戏的流畅运行。 jQuery:简化JavaScript的编写,提供便捷的DOM操作、事件处理以及动画效果,增强游戏的交互性和用户体验。...
3) 项目中使用了基于流形式的前端自动化管理工具--,在整个项目中,gulp在整个项目中一方面负责对业务逻辑js文件进行合并压缩,一方面将SCSS文件编译为css后合并压缩,同时负责整个项目的热更新,即不需要浏览器作...
前端:Vue/JSP/React/HTML+JS+CSS/ASP 后台框架代码:java/c/c++/php/VB/lun/Andorid/Python 开发环境:idea 数据库:MySql(建议用 5.7,8.0 有时候会有坑) 部署环境:Tomcat(建议用 7.x 或者 8.x b版本),maven
前端:Vue/JSP/React/HTML+JS+CSS/ASP 后台框架代码:java/c/c++/php/VB/lun/Andorid/Python 开发环境:idea 数据库:MySql(建议用 5.7,8.0 有时候会有坑) 部署环境:Tomcat(建议用 7.x 或者 8.x b版本),maven
配合(css框架)、(组件库)、(业务组件)等组成前端解决方案,拥有丰富的组件库,极大的提升了前端开发效率,完善的性能监控、错误日志监控、事件追踪等支持,为性能、系统稳定性提供了很多保障。目前各个事业部...