所选工具: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. LinkedList子类与Queue接口

    LinkedList表示的是一个链表的操作类.定义如下: public class LinkedList<E> extends AbstractSequentialList<E> ...

  2. php常见问题以及解决方法

    在使用php的过程中,经常会出现一些问题,下面是我遇到的一些问题以及解决方法 1,乱码问题,中文乱码问题 原因是:编码方式不一样,有UTF-8,gbk-2312等编码方式,不同的编码方式导致浏览器在解 ...

  3. GLM in SPM

    主要记一句话: SPM的GLM模型中的β,指的是相应regressor对最后测量得到的信号所产生的效应(effect). 后续的假设检验过程实际上都是对各个regressor的β向量进行的. The ...

  4. 利用 Html 元标记控制搜索引擎蜘蛛

    摘要:快照不被百度缓存: meta name = Baiduspider content = noarchive 所有搜索引擎,抓取这个页面.爬行链接.禁止快照: meta name = robots ...

  5. 使用spring boot+mybatis+mysql 构建RESTful Service

    开发目标 开发两个RESTful Service Method Url Description GET /article/findAll POST /article/insert 主要使用到的技术 j ...

  6. Centos 7 安装 和 卸载 Mysql5.7(压缩包)

    今天装的了mysql,遇到了很多问题,好在最后一一解决了,现在记录在此,防止日后老路重走... 1.下载 当然是去官网,下一个linux下的版本,64位的 tar.gz,好吧这里贴个名字--[mysq ...

  7. hadoop 2.6伪分布安装

    hadoop 2.6的“伪”分式安装与“全”分式安装相比,大部分操作是相同的,主要区别在于不用配置slaves文件,而且其它xxx-core.xml里的参数很多也可以省略,下面是几个关键的配置: (安 ...

  8. express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?

    在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部 ...

  9. Oracle PL/SQL 入门

    PL/SQL 全称:Procedure Language/SQL.产生背景自己去百度. 模板: Declare ---变量定义 num ; name ) := 'damon'; idesc cnt_i ...

  10. Theano2.1.3-基础知识之更多的例子

    来自:http://deeplearning.net/software/theano/tutorial/examples.html More Examples 现在,是时候开始系统的熟悉theano的 ...