`
j2eetop
  • 浏览: 58951 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

《自己动手写框架》1:JS、CSS合并带来的效率提升

 
阅读更多
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没有合并,是由于这个是皮肤样式,要用来动态切换的,如果把它也合并了,就没有办法进行皮肤动态切换了。
分享到:
评论

相关推荐

    react-skeleton-css:骨架“微” css框架样板

    合并为1个回购 react-skeleton-css是使用响应式CSS样板构建的React UI框架。 用法和文档 安装 react-skeleton-css作为 npm install react-skeleton-css 用法 您必须在项目中包括框架CSS /样式表。 <link href=...

    前端js和css的压缩合并之grunt

    此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查

    grunt-demo:使用grunt工具压缩合并css 和 js

    如何将多个js文件合并压缩为一个js文件为什么要合并、压缩你的JS文件?在开始之前,先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了。HTML里...

    UIkit 前端开发框架

    UIkit是一款轻量级、模块化的前端开发框架用于开发快速且强大的Web界面。UIkit为你提供较为全面的HTML、CSS、JS组件,使用简单、易定制和可...这款框架还是完全免费的,你可以使用、复制、合并、拆分框架无任何限制。

    框架:Node.js框架

    Node.js框架 Total.js框架是用pure JavaScript编写的Node.js平台框架,类似于PHP的Laravel或Python的Django或ASP.NET MVC。 它可以用作Web,桌面,服务或IoT应用程序。 重要信息: $ npm install -g total.js 官方...

    零基础学HTML CSS源代码

    第1章(源代码\第1章) 示例描述:本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) ...

    基于适配spring boot工程开发,在以spring boot框架为基础的项目工程中的pom.xml文件引入的工具包

    hm-tools-js-css 功能:根据URL请求参数将多个javascript文件合并成一个javascript文件返回给请求者。根据URL请求参数将多个css文件合并成一个css文件返回给请求者。支持从当前运行的spring boot工程jar包中读取...

    程序天下:JavaScript实例自学手册

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    《程序天下:JavaScript实例自学手册》光盘源码

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    resume:我的简历Web版

    resume ###如何运行。 下载源码部署到自己的WebServer下面,或者使用NodeJS。...项目优化工具:r.js合并压缩AMD模块 版本管理工具:Git、GitHub 开发环境的WebServer:NodeJS+Express ###目录介绍: bo

    Amaze UI,一个移动优先的模块化前端框架

    Amaze UI 包含近 20 个 CSS 组件、10 个 JS 组件和 17 个 Web 组件,包含近 60 个主题。可以快速搭建界面优秀、体验极佳的多屏页面,大大提高开发效率。与国外框架相比,Amaze UI注重中文排版,根据用户代理调整字体...

    inko:使用Vue.js,Primer.css和Marked.js构建的在线降价编辑器

    印子概述Inko是我使用Vue.js,Primer css框架和marked.js制作的在线降价编辑器。 Inko目前处于beta测试阶段。 如果您发现任何错误,请给我发邮件至jirattikarn [at] mailbox [dot] org特征React灵敏实时预览导出.md...

    QuaggaQuagga-Production:功能丰富的JS-multiselector

    JavaScript-使用Require JS作为框架来增加模块化和JQuery库功能 LessJS-用于CSS重用和嵌套CSS选择器 Fontawesome-图标库 Bootstrap样式-功能丰富且支持动态HTML / JS Scrum大师: Swathi Kaluvakuri 学生电子邮件...

    PHP的资源管理框架Assetic.zip

    Assetic 是一个 PHP 的资源管理框架,用于合并和压缩 CSS/JS 资源。这种方式合并资源可以减少浏览器对资源的请求数、降低资源下载大小、加速网站访问。 示例代码: <?php use Assetic\Asset\AssetCollection; ...

    响应式:超轻量级HTML,Sass,CSS和JavaScript框架,用于构建响应式网站

    一个功能强大,易于访问,对开发人员友好的框架,用于构建响应式网站响应式样板是开发人员的框架。 其他框架在设计上也过于笨拙。... 合并后的输出CSS和JavaScript仅压缩并压缩了20.3kb,但是框架中内置

    网页版2048游戏.rar

    JavaScript:实现游戏的核心逻辑,包括控制数字方块的移动、合并、生成新数字等功能,确保游戏的流畅运行。 jQuery:简化JavaScript的编写,提供便捷的DOM操作、事件处理以及动画效果,增强游戏的交互性和用户体验。...

    hxui-pc:这个项目是关于PC终端的快速入门前端Porject,使用Angular(v1.4)作为MVVM框架,以及使用gulpJS作为前端自动管理器工具。 并使用自己CSS框架--xpage

    3) 项目中使用了基于流形式的前端自动化管理工具--,在整个项目中,gulp在整个项目中一方面负责对业务逻辑js文件进行合并压缩,一方面将SCSS文件编译为css后合并压缩,同时负责整个项目的热更新,即不需要浏览器作...

    在Word表格中将上下行相同内容的单元格自动合并.zip

    前端: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

    在Excel表格中将上下行相同内容的单元格自动合并.zip

    前端: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

    JockJs:javascript 库

    配合(css框架)、(组件库)、(业务组件)等组成前端解决方案,拥有丰富的组件库,极大的提升了前端开发效率,完善的性能监控、错误日志监控、事件追踪等支持,为性能、系统稳定性提供了很多保障。目前各个事业部...

Global site tag (gtag.js) - Google Analytics