所选工具: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. Kali linux渗透测试常用工具汇总1

    1.ProxyChains 简介:代理工具.支持HTTP/SOCKS4/SOCK5的代理服务器,允许TCP/DNS通过代理隧道. 应用场景:通过代理服务器上网. 配置:/etc/proxychains ...

  2. python魔法函数的一些疑问

    看了魔法函数,有一点疑问.1中需要用self.word才能执行,而2直接用self就可以执行.而1中Word继承了int基本类型,但在__new__时并没有什么卵用.当用 Word(“123”)来实例 ...

  3. php加载xml编码错误,“Error: Input is not proper UTF-8, indicate encoding! ”

    最近在给php中解析xml的时候,抛出一个错误: "Warning: DOMDocument::load(): Input is not proper UTF-8, indicate enc ...

  4. mongodb.conf配置文件详解

    mongod --config /etc/mongodb.conf 配置如下:verbose:日志信息冗余.默认false.提高内部报告标准输出或记录到logpath配置的日志文件中.要启用verbo ...

  5. Paxos变种和优化

    分布式系统理论进阶 - Paxos变种和优化 引言 <分布式系统理论进阶 - Paxos>中我们了解了Basic Paxos.Multi Paxos的基本原理,但如果想把Paxos应用于工 ...

  6. C#以post方式调用struts rest-plugin service的问题

    struts2: 玩转 rest-plugin一文中,学习了用struts2开发restful service的方法,发现用c#以post方式调用时各种报错,但java.ajax,包括firefox ...

  7. 图片加载框架Picasso解析

    picasso是Square公司开源的一个Android图形缓存库 主要有以下一些特性: 在adapter中回收和取消当前的下载: 使用最少的内存完成复杂的图形转换操作: 自动的内存和硬盘缓存: 图形 ...

  8. JavaScript Array

    1.常用方法 // 数组构造 var a = new Array(20); // 长度为20的数组 var b = new Array('red', 'blue', 'white'); var c = ...

  9. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  10. 深入理解OOP(四): 多态和继承(抽象类)

    在本文中,我们讨论OOP中的热点之一:抽象类.抽象类在各个编程语言中概念是一致的,但是C#稍微有些不一样.本文中我们会通过代码来实现抽象类,并一一进行解析. 深入理解OOP(一):多态和继承(初期绑定 ...