所选工具:YUI  Compressor(压缩代码软件,直接在百度搜索用网页版就行),阿帕奇(apache)将文件上传到到服务器时,可通过apache将文件再次压缩,winSCP(用于在本地和服务器之间传送文件)

优化思路:将前端中的js和css文件的代码压缩在一行,尽量缩小空格的换行
1、将js或者css的代码复制到YUI Compressor中进行第一次压缩,然后在webStrom里面新建js和css文件然后将压缩后的内容复制到里面,并建立相应的html文件用于调用js或者css,再用浏览器访问
         
测试压缩后的css或js时,记得在每个html页面中加入以下语句:
 

2、通过winSCP可以连接本地和服务器:将两个test文件夹通过winSCP将文件夹上传到服务器上
上传之后,可用CRT连接上之后便可查看文件的大小
 
3、首页中js的优化:index.html页面中的js全都抽取出来,放在assets/js/目录下,然后在index.html中调用index.js
 
4、轮播加载图片的优化
$().ready(function () {
    $("#i1").attr("src","images/ad2.jpg");
    $("#i2").attr("src","images/ad3.jpg");//将首页中的轮播图片地址放在js里面,不要直接读取图片地址,而是通过js去访问图片的地址,当图片内存较大时或者图片的数量较多时,会大大提高加载的速度
    });

js的一些压缩和优化性能的更多相关文章

  1. 新产品为了效果,做的比較炫,用了非常多的图片和JS,所曾经端的性能是非常大的问题,分篇记录前端性能优化的一些小经验。

    第一篇:HTTPserver 因tomcat处理静态资源的速度比較慢,所以首先想到的就是把全部静态资源(JS,CSS,image,swf) 提到单独的server,用更加高速的HTTPserver,这 ...

  2. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  3. [经验] Win7减肥攻略(删文件不删功能、简化优化系统不简优化性能)

    [经验] Win7减肥攻略(删文件不删功能.简化优化系统不简优化性能) ☆心梦无痕☆ 发表于 2014-1-24 11:15:04 https://www.itsk.com/thread-316471 ...

  4. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  5. 【Go】使用压缩文件优化io (二)

    原文链接: https://blog.thinkeridea.com/201907/go/compress_file_io_optimization2.html 上一篇文章<使用压缩文件优化io ...

  6. 一、FreeMarker实现对js和css压缩

    1.代码压缩理解:实际上就是将原有的文本中无用的注释.空行.空格去掉来压缩文件的大小.进行js和css压缩会带来如下好处:1)减小了文件的体积,减少文件占用的内存;2)减小了网络传输量和带宽占用; 3 ...

  7. 使用Concurrency Visualizer优化性能

    Concurrency Visualizer: https://msdn.microsoft.com/en-us/library/dd537632.aspx?f=255&MSPPError=- ...

  8. MVC中的JS和CSS压缩

    小说一下Js和CSS压缩的好处: 1.减小了文件的体积 2.减小了网络传输量和带宽占用 3.减小了服务器的处理的压力 4.提高了页面的渲染显示的速度  很多建议将站点的静态文件(如图片.js.css ...

  9. 【MVC】 js,css 压缩

    [MVC] js,css 压缩 一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...

随机推荐

  1. linux运维中的命令梳理(四)

    ----------管理命令---------- ps命令:查看进程 要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1) ps :是显示瞬间进程的状态,并不 ...

  2. Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例

    概要  前面,我们已经学习了ArrayList,并了解了fail-fast机制.这一章我们接着学习List的实现类——LinkedList.和学习ArrayList一样,接下来呢,我们先对Linked ...

  3. jQuery使用.on()无法绑定hover

    发现好像没有hover这个事件,jQuery的hover事件是一个封装,hover算不得一个事件.他只是将mouseover和mouseout合并了用mouseover和mouseout两个配合效果好 ...

  4. 帆软FineReport如何使用程序数据集

    大多数情况下,FineReport直接在设计器里使用“数据集查询”,直接写SQL就能满足报表要求,但对于一些复杂的报表,有时候SQL处理并不方便,这时可以把查询结果在应用层做一些预处理后,再传递给报表 ...

  5. 小记sql server临时表与表变量的区别

    临时表与表变量都可以起到“临时”的作用,那么两者主要的区别是什么呢? 这里不讨论创建方式,以及全局临时表.会话临时表这些,主要记录一下个人对两者的主要区别以及适用情况的看法,有什么不对或补充的地方,欢 ...

  6. 反距离权重插值inverse distance weighting,IDW

    反距离权重 (IDW) 插值显式假设:彼此距离较近的事物要比彼此距离较远的事物更相似.当为任何未测量的位置预测值时,反距离权重法会采用预测位置周围的测量值.与距离预测位置较远的测量值相比,距离预测位置 ...

  7. 个人知识管理系统Version1.0开发记录(01)

    架 构 描 述 01.数据层,数据源,有形资源入库,无形资源整理,对外搜索引擎,对内平台搜索,数据类型(文字.图片.声音.视频.组合),数据时空优化,数据安全方案(数据进站关卡,数据出战关卡),数据并 ...

  8. 【转】Java 8十个lambda表达式案例

    1. 实现Runnable线程案例 使用() -> {} 替代匿名类: //Before Java 8: new Thread(new Runnable() { @Override public ...

  9. 东大OJ-Prim算法

    1222: Sweep the snow 时间限制: 1 Sec  内存限制: 128 MB 提交: 28  解决: 18 [提交][状态][讨论版] 题目描述 After the big big s ...

  10. Visual Studio 2013启用AnkSVN

    1. 官网下载AnkSVN  https://ankhsvn.open.collab.net/ 2. 安装 3. 启用 When you enable AnkhSVN as a VS.NET sour ...