所选工具: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. 1,字符是否为空,2,比较两个字符大小。String.Compare(String, String)。string.IsNullOrEmpty(string)

    1, String.Compare 方法 (String, String) 比较两个指定的 String 对象. 值 条件 小于零 strA 小于 strB. 零 strA 等于 strB. 大于零 ...

  2. CSS3硬件加速需要注意的事项

    webkit浏览器会把所有需要动画的元素放到复合层中渲染,另外以下两种情况也会使不需要动画的元素也放到复合层中渲染,这样会导致元素动画不流畅(原则是需要的动画才让它在复合层中渲染) 1,元素有一个包含 ...

  3. Hibernate总结4之HQL

    一,HQL特点 与SQL相似,SQL中的语法基本上都可以直接使用. SQL查询的是表和表中的列:HQL查询的是对象与对象中的属性. HQL的关键字不区分大小写,类名与属性名是区分大小写的. SELEC ...

  4. HTML5商城开发三 jquery 星星评分插件

    展示:

  5. jquery常用代码

    转自:未找到 以下是jquery中比较常用的一些操作实现方式: $("标签名") //取html元素 document.getElementsByTagName("&qu ...

  6. tkinter 类继承的三种方式

    tkinter class继承有三种方式. 提醒注意这几种继承的运行方式 一.继承 object 1.铺tk.Frame给parent: 说明: self.rootframe = tk.Frame(p ...

  7. DataTrigger 绑定枚举

    在触发器中绑定枚举类型: <ControlTemplate.Triggers> <DataTrigger Binding="{Binding CheckStateEnum} ...

  8. 写个PHP框架吧

    肯定会问:现在的PHP框架那么多了,为什么还要写一个PHP框架呢? 1.时代:PHP7来了,现在的所有框架都是基于PHP5.x的.到时候PHP7正式推广出来,现有的框架都不能发挥PHP7的最大性能优势 ...

  9. sql server死锁神器

    参考文章: http://blogs.msdn.com/b/sqlserverfaq/archive/2013/04/27/an-in-depth-look-at-sql-server-memory- ...

  10. window 运行指令(1)

    添加或删除程序 appwiz.cpl 管理工具 control admintools Bluetooth文件传送向导 fsquirt 计算器 calc 证书管理控制台 certmgr.msc 字符映射 ...