所选工具: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. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  2. jQuery获取文本节点之 text()/val()/html() 方法区别

    1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p&g ...

  3. SPM FDR校正

    来源: http://blog.sciencenet.cn/blog-479412-572049.html,http://52brain.com/thread-15512-1-1.html SPM8允 ...

  4. [转]git fetch 的简单用法:更新远程代码到本地仓库

    [原文地址]:http://my.eoe.cn/com360/archive/3533.html Git中从远程的分支获取最新的版本到本地方式如下,如何更新下载到代码到本地,请参阅ice的博客基于Gi ...

  5. java:集合的自定义多重排序

    问题: 有一个乱序的对象集合,要求先按对象的属性A排序(排序规则由业务确定,非A-Z或0-9的常规顺序),相同A属性的记录,按根据属性B排序(排序规则,同样由业务确定,非常规顺序) -前提:业务规则是 ...

  6. Nutch搜索引擎系列(目录)

    下面是Nutch搜索系列目录,希望对研究Nutch的同学有所帮助. 目录安排: 1)Nutch搜索引擎(第1期)_ Nutch简介及安装[下载] 2)Nutch搜索引擎(第2期)_ Solr简介及安装 ...

  7. opencv5-objdetect之级联分类器

    这是<opencv2.4.9tutorial.pdf>的objdetect module的唯一一个例子. 在opencv中进行人脸或者人眼 或者身体的检测 首先就是训练好级联分类器,然后就 ...

  8. 【算法之美】你可能想不到的归并排序的神奇应用 — leetcode 327. Count of Range Sum

    又是一道有意思的题目,Count of Range Sum.(PS:leetcode 我已经做了 190 道,欢迎围观全部题解 https://github.com/hanzichi/leetcode ...

  9. PHP Date ( I need to use)

    本文记录项目中用到的 PHP Date 相关,备忘. 日期格式约定为 xx-xx-xx 格式(字符串),例如 2016-03-09. xx-xx-xx -> 时间戳 $date = " ...

  10. 使用markdown编辑evernote(印象笔记)的常用方法汇总

    原文发表在我的博客主页,转载请注明出处 前言 正所谓工欲善其事,必先利其器,本文将要介绍的evernote和markdown都是程序员必备的工具 虽然国内现在有了很多evernote的替代品,做的比较 ...