有过ftp下载文件经验的人都有体验,单独下载一个100M的文件比分开下载100个1M的文件速度快很多,这是因为下载需要解析域名,建立连接等额外开销的时间,因此下载100个文件就要做100次这种额外的开销.因此如果把这个100个文件整合成一个文件下载速度会快很多. 基于上述的方法,可以对HTML中的JS文件也做类似的处理,无论js文件多少个,通过配置文件,把N个js文件合并到一个文件下载.实现手段通过httpHandler.具体代码如下: web.config文件中:   <httpHandler…
Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面对几十个JS文件一遍遍来回“复制-压缩-创建-粘贴”,这样太不人性化了. 于是可以借助Node + uglify-js 轻松实现.(前提你会点node操作) 1.首先看一下目录: |--uglifyJS |--js |--test1.js |--test2.js |--uglify.js   //这…
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所有浏览器. 支持文件批量上传 支持文件夹上传,且要求在服务端保留层级结构.文件夹数量要求支持到10W. 支持大文件断点续传,要求刷新浏览器,重启浏览器,重启电脑后仍然能够继续上传.文件大小要求能够支持到50个G. 支持自动加载本地文件,要求能够自动加载指定的本地文件. 支持文件批量下载,要求不要在服…
话不多说,上代码: try { let reader = new FileReader(); let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' }); reader.readAsArrayBuffer(blob); reader.onload = function() { let data = new Blob([this.result]); // 判断是否为文件流数据 if (dat…
做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并压缩 代码如下: public class Js : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/javascript"; Htt…
我们在建网站时经常会用js特效代码以使页面更美观,比如js幻灯片代码.js下拉菜单等,但是网页特效一多,如果js文件没有合并的话会降低网站的性能,这时我们就要考虑合并js文件了,ytkah总结了以下几种方法可以实现: 1.把不输出(没有document.write)的公共函数合到一起,如果单纯地把两个js文件内容copy到一起可能会出错 2.新建一个import.js文件,把所有的js文件全部写进去 with(document){ write('<script type="text/jav…
写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-js -g 安装 1>压缩单个js文件 打开cmd, 目录引到当前文件夹,cd uglifyjs inet.js -o inet-min.js 或者 uglifyjs inet.js -m -o inet.min.js -m更小,-m参数所以就是把变量名变成a, b, c, d 2.压缩批处理 @ec…
引言问题 <img src="background.jpg"><script src="test.js"></script> test.js和background.jpg是并行下载,还是test.js先下载后执行完成后再下载background.jpg??? <script src="test.js"></script><img src="background.jpg&q…
首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想多了,之前是以为CSS和JAVASCRIPT合并在一起,可以将这两种类型的文件请求合并到一个上面去”. 我以前也误以为该模块可以将css和js文件不分类型的合并,但细一想,确实这样的合并,意义并不大.不过从官方的参数上看,也提供了CSS与JS请求合并的功能.具体可以看concat_unique参数的…
在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel="stylesheet" type="text/css"> 或者: <script type="text/javascript" src="jquery.js"></script> 都会由浏览器向服务器…
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) 将页面中添加的文件路径合并成类似以下格式后: <script type="text/JavaScript" src="Resource/script?href=[Scripts/common/jquery][Scripts/functionA/A1,A2][Scripts…
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面解析速度.压缩功能实现了对javascript脚本和CSS进行压缩的功能,它能够去除脚本或样式中不必要的空白和注释,同时能够优化脚本变量名的长度. 在ASP.NET MVC 4中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及St…
上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具体的合并规则如下: (1),优先级高的文件优先渲染. 假如页面中有以下文件添加代码: //添加样式文件A Html.AppendResFile(ResourceType.StyleSheet, "[Content/Styles/styleA]"); //添加样式文件B,但设置了高优先级 H…
不知道该怎么表达,或许直接贴图贴代码更好 前因:在第一个使用angularjs的项目中我将所有的controller写到一个文件里面,深知维护起来那滋味,所以再次使用angularjs的时候,我便把所有的controlle.directive.factory给提取到相应的文件夹下面,以便于维护.此时js这么多表示很无奈. 当然,解决办法很多,搜索:angularjs 按需加载 site:cnblogs.com 会有很多介绍就不多说了. 下面说说我的解决方案 如题,利用T4模板来合并;模板的写法因…
本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualStudio.QualityTools.UnitTestFramework 的单元测试框架.这样我们就不再需要引用第三方诸如NUnit等测试框架了(顺便少受点Java同学的白眼:D).而 Microsoft.VisualStudio.QualityTools.UnitTestFramework 测试框架…
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一…
写博客的目的就是让其他人少走弯路. C#读取网络上的流和js文件出现的问题 一开始看了今天博客园上的推荐文章,用C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子),然后想自己也来采集一下天气,采集目标是腾讯天气. 腾讯天气的数据是用的js提供的(这里就不多做分析了下次有机会再写文章分析),然而用上文中的GetWebClient方法,传递一个js文件的地址,读取到的是一堆乱码. 分析问题产生的原因 问题出现了,自然要分析原因,为什么抓包工具能看到字符串的内容,浏览…
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一. 本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理. CSS 和 JS 合并工具的发展 对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段. 网站刚刚搭建的时候,…
为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS.JS.图片等文件,指定为异步加载的文件除外. 每读取一个文件,浏览器都会向Web服务器发送一个加载的请求,服务器觉得这个请求没问题后,浏览器才会开始接收文件.也就是说,每次加载一个文件都会消 耗一定的时间在服务器和客户端的来回上.          加载一个文件消耗的时间可以忽略不计…
IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.Web.HttpException: 未能执行 URL. 源错误: 执行当前 Web 请求期间生成了未处理的异常.可以使用下面的异常堆栈跟踪信息确定有关异常原因和发生位置的信息. 堆栈跟踪: [HttpExce…
eclipse加速之禁用JS.jsp等文件的语法验证 去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings-> Enable Javascript Sematic validation前面的勾去掉; 选中要修改的项目,Project>Properties 或右键项目 -> properties -> Builders 去掉JavaScript Validato…
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr…
grunt concat针对有依赖文件的js脚本的合并: 在一个入口文件index.js里,有很多依赖文件,主要分两类,一类是和主文件同目录,另一类是其他目录下的js(cmd.非cmd的js文件,一般会在config中使用alias进行路径配置),而在concat时,默认会将主文件中的第一类的依赖文件和主文件进行合并. define(function(require,exports,module){ require("CommonAPI"); require("commFun…
for /r %%i in (*.js) do type "%%i">>xxx-all.js java -jar yuicompressor.jar --type js --charset utf- -o xxx-min.js xxx-all.js 第一句意思是合并当前目录和子目录的全部js文件,输出为xxx-all.js 第二句结合yuicompressor,把js最小化…
在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q…
写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服务器下载新的资源文件. 如果某个 css 文件被多个页面引用,那么我们就需要去每个页面一个一个的去修改,这样做的方式属于重复性的动作,而且有的时候还会漏掉需要修改的页面,所以我们就需要一个自动管理资源文件版本号的功能 先看效果 如何实现 通过扩展HemHelper 类,添加 为 js 和 css 文…
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数.但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了? 这里需要使用1个常见的注释符<!-- 主要是利用css,js解析器对<!-- 进行不同的解析来实现JS和CSS合并的.    1. CSS解析器 会忽略<!--符号,    2. JS解析器会把<!--当作注释符号,与// 注释相同. 看看下面的列子:    <HEAD>  <…
原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: <script type="text/javascript" src="/js/lib/util/BaseUtil.js"></script> 测试结果1:正常范围:85ms~90ms加载最低耗时:80ms 高速加载js文件: <scri…
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install gulp --save -d 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4. 运行 gulp: $…
资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路.进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理. 这些通信和服务的开销都很昂贵,减少http请求的数量和减少请求资源的大小可有效提高访问性能 减少http的主要手段是合并CSS.合并JavaScript.合并图片.将浏览器一次访问需要的javascript和CSS合并成一个…