1.先来看看，不用合并js的情况，传输量大

1.1新建一个 【基本】的mvc项目

然后新建一个控制器HomeController，因为js会在很多视图中用到，所以此时我们添加一个视图带布局页Index视图。为了更好的看到效果，我们删除掉会影响效果的东西。

2.2视图中的代码，超简洁

2.3开始测试

运行视图，然后在HttpWatch监视发送的请求

发现了，此次请求Index.cshtml视图，共发送了四次请求，同时看到了每次请求的数据大小

【视图压缩后大小：574byte】

【js总大小：267676+39920+17056=324652】

2.开始合并js，传输量小了

2.1布局页，以及BundleConfig中的代码如下

2.2视图页，如下

2.3开始测试

【视图页压缩后的大小：592byte】

【js传递的大小：52042byte，明显小了】

3.合并css，同合并js

更多精彩内容请看：http://www.cnblogs.com/2star

合并JS和CSS的更多相关文章

  1. Web性能优化-合并js与css，减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  2. 第十一节：Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  3. 引用：使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  4. Gulpfile.js——编译、压缩、合并js和css文件

    gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...

  5. minify合并js和css文件

    压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销:合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力.而这些枯燥又没有技术含量的工作,我们以前通常会手动处 ...

  6. MVC系列学习(十三)-合并JS和CSS

    1.先来看看,不用合并js的情况,传输量大 1.1新建一个 [基本]的mvc项目 然后新建一个控制器HomeController,因为js会在很多视图中用到,所以此时我们添加一个视图带布局页Index ...

  7. 一句命令快速合并 JS、CSS

    在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多. 而项目上线后,会要求将所有 JS 文件合并为 1 个或者几个 ...

  8. Maven插件wro4j-maven-plugin压缩、合并js、css详解

    1.    在pom.xml文件中,引入wro4j-maven-plugin插件 <plugin> <groupId>ro.isdc.wro4j</groupId> ...

  9. Asp.Net MVC 合并js或css请求

    Step1:BundleConfig中注册 bundles.Add(new ScriptBundle("~/isValid").Include(  "~/Scripts/ ...

随机推荐

  1. Marzoni(玛佐尼）意大利顶级西服面料之一_HollandandSherry_新浪博客

    Marzoni(玛佐尼)意大利顶级西服面料之一_HollandandSherry_新浪博客 Marzoni(玛佐尼)意大利顶级西服面料之一 (2013-01-08 17:30:04) 转载▼

  2. tomcat中debug启动和start启动的区别

    debug启动tomcat:修改代码不加方法,不加参数,只是单纯的修改方法,不用重启tomcat(热部署). start启动tamcat:修改代码需要重启tomcat.

  3. C# 对JS编码/解码进行转换

    public static class Extension { #region [编码/解码统一转换] /// <summary> /// /// </summary> /// ...

  4. Android技术精髓-Bitmap详解

    Bitmap (android.graphics.Bitmap) Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保 ...

  5. 安全的PHP代码编写准则(转)

    绝不要信任外部数据或输入 关于 Web 应用程序安全性,必须认识到的第一件事是不应该信任外部数据.外部数据(outside data) 包括不是由程序员在 PHP 代码中直接输入的任何数据.在采取措施 ...

  6. 实现ARC文件与MRC文件互转，和混合使用。

    这段时间做项目是以MRC为主的 但是某些第三方现在都只能支持ARC了 找到了这篇文章 可谓是帮了大忙 亲测完全可用喔:-O 如何在未使用arc的工程中引入一个使用了arc特性的文件,如何在arc工程中 ...

  7. navicat导入mysql数据库sql时报错或数据不完全问题

    错误详情:[Err] [Imp] 2006 - MySQL server has gone away 或无提示错误,但是导入数据明显缺少字段和数据 找到服务器上的MYSQL安装目录下的my.ini文件 ...

  8. Linux shell入门基础（七）

    七.bash脚本中的流程控制   条件判断控制   -[]([]中的表达式是否为真)  &&(前边的结果是true的时候执行后边的命令)   ||(前边的结果是false的时候执行后边 ...

  9. python-打印简单公司员工信息表

    python-打印简单公司员工信息表 要求,输入name不为空,输入次数最多3次,3次后跳出程序: 知识点: raw_input str转int whil if elif else continue ...

  10. 一道在知乎很火的 Java 题——如何输出 ab【转】

    这是一个源自知乎的话题,原贴链接:一道百度的面试题,有大神会嘛? 虽然我不是大神,但我也点进去看了一下,思考了一会之后有了一些思路,然后去看其它人的答案的时候果然全都已经被各路大神们先想到并贴出来了, ...