- 浏览: 362296 次
- 性别:
最新评论
-
天使建站:
这里这篇文章更详细 还有完整的实例演示:js跳出循环:brea ...
js跳出循环的方法区别(break,continue,return) -
jahentao:
我觉得Jcreator和eclipse中的列出属性和方法,很多 ...
反射原理 -
T240178168:
相互交流下吧
ie9以下都有这个问题(ajax) -
blackproof:
试了一下,的确第一种写法oracle优化了,效率比第二种快多了 ...
Oracle分页sql语句 -
杨白白:
进程与线程
两个基本点
1. 择重避轻,有所取舍。
l 核心优先
通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先。
l 主要问题在那,抓住瓶颈点。
治病要医本。优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果
2. 简单有效才是硬道理
越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在做产品,而不是在搞研发。很多看似很蠢的方法,往往越是有效。
新技术,新方法的引用是具备一定的风险的,要评估,要慎重。
Js处理
1. 尽量放到页面尾部
Js的加载时阻塞页面的,没下载完毕后面的内容不会出来,所以尽量避免把JS放到页面头部,按照经验估计,整个页面中所用的JS逻辑,90%都是可以放到页面尾部。
2. 延迟加载(按需加载)
很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的JS.比如说权限验证通过,加载管理模块。点击发表文章按钮,加载与发表文章有关的验证和处理函数。
如果写过C++的肯定会接触过动态库和静态库,这个与之类似,什么时候需要什么时候再加载,首次打开页面肯定会清净了许多,而且业务逻辑也由此分离开来,管理和维护也会方便很多,毕竟减少了那么多的耦合。
按照BBS项目经验估计,普通页面的所有业务逻辑中需要在首次请求中加载的不到50%,我们的JS又由此砍掉了一半。
3. 合并JS,减少请求
请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。
所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。
为了提高开发效率,合并建议不要每次都手动来进行,导致之后维护成本很大,相信些个XML配置文件,确定合并规则以及依赖关系后,用程序自动合并效率会高很多,后面有我附上的一个配置示例,仅作参考形式不重要
4. JS压缩
此手段属前端特有,毕竟流量意味着速度,意味着金钱。是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件来解决。
所谓的压缩,就是把场的变量名换成短的变量名,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具。不再细说
经验值,能压缩50%以上,视程序与压缩工具而论。
5. 尽量少用第三方库
在我的印象中,很多框架都是很庞大20K以上,虽然很强大很方便,但如果不是做企业级应用,不要用,因为我们也许只可能用到其中很少的一部分功能却加载了整个框架。
不过框架中的很多方法是可以提取出来滴,或者精简成一个轻量级的框架,比如说trimPath,完全可以精简到4k.
6. 合并ajax请求
Ajax请求的数据,如果涉及请求多种数据,尽量考虑到将其合并。
7. 合理的使用缓存
缓存视乎是server端的事,但是js中也是经常用的。
一种是缓存在一个全局变量中,一些很复杂的计算和查找操作可以这样做。如果大家在使用模板类trimPath经常是需要对模板进行预处理,这种预处理的结果是可以被缓存的。这种缓存的缺点是页面刷新后数据就会失效。
另外一种是缓存在window.name或cookie里面,经常用来缓存一些AJAX调用的结果,避免反复请求server端,比如一些用户的权限验证信息,就没必要总是调用server端接口,缓存了也就减少了请求,提高了性能,但cookie大家要慎用,存于一些数据比较小的还行,每次http请求他是占用上行带宽的。
还有一种缓存的实现是借助于flash或其他的第三方组件,特点是可以缓存超大的数据,但是适应场景优先,需要特殊的平台支持,不过FLASH目前已经很通用了。
8. 能静态化输出,尽量少用JS渲染输出
页面制作
1. 素材合并
尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。
2. CSS压缩处理
道理同JS压缩,也是有很多工具实用的可用。
3. 图片背景切割与平铺
切图是很有讲究的,很多区域能切成用1像素平铺,尽量用1像素小图平铺,尽量用一个较大的图片设置成背静。
4. 少用iframe和frameset
首先一点frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好
5. CSS尽量放到页面头部
浏览器只有等CSS下载完毕后,才会真正的显示页面,所以为了让页面尽快有所输出,把CSS放到头部,而且浏览器对CSS的处理时并行的,不会像JS那样会阻塞页面。
Server处理
1. 启用gzip压缩,约能压缩70%~80%
2. js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。
3. 静态页面、js、css等静态文件单独迁移
第一, 可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。
第二, 便于管理和维护,以后迁移和拓展方便。
4. js、css、图片等静态文件与当前应用放到不同的域名下。
不再传递那些无必要的cookie,减少传输。
5. 图片服务器分多域名。
浏览器对同一域名的只允许使用2个并发,如果页面图片过多,会由于并发排队从而阻塞页面。但域名也不能太多,会消耗DNS解析的时间,建议4个为佳。
附加
1. JS合并配置文件示例
<?xml version="1.0" encoding="gb2312" ?>
<root>
<include>
<list><![CDATA[qStandBottom_static]]></list>
</include>
<js>
<list><![CDATA[/lib/postJs.obj.js]]></list>
<list><![CDATA[/lib/JSON.obj.js]]></list>
<list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>
<list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>
<list><![CDATA[/control/subject/checkDomain.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>
<list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>
</js>
</root>
2. 常见分析与调试工具
IE Httpwatch
Firefox firebug
1. 择重避轻,有所取舍。
l 核心优先
通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先。
l 主要问题在那,抓住瓶颈点。
治病要医本。优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果
2. 简单有效才是硬道理
越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在做产品,而不是在搞研发。很多看似很蠢的方法,往往越是有效。
新技术,新方法的引用是具备一定的风险的,要评估,要慎重。
Js处理
1. 尽量放到页面尾部
Js的加载时阻塞页面的,没下载完毕后面的内容不会出来,所以尽量避免把JS放到页面头部,按照经验估计,整个页面中所用的JS逻辑,90%都是可以放到页面尾部。
2. 延迟加载(按需加载)
很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的JS.比如说权限验证通过,加载管理模块。点击发表文章按钮,加载与发表文章有关的验证和处理函数。
如果写过C++的肯定会接触过动态库和静态库,这个与之类似,什么时候需要什么时候再加载,首次打开页面肯定会清净了许多,而且业务逻辑也由此分离开来,管理和维护也会方便很多,毕竟减少了那么多的耦合。
按照BBS项目经验估计,普通页面的所有业务逻辑中需要在首次请求中加载的不到50%,我们的JS又由此砍掉了一半。
3. 合并JS,减少请求
请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。
所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。
为了提高开发效率,合并建议不要每次都手动来进行,导致之后维护成本很大,相信些个XML配置文件,确定合并规则以及依赖关系后,用程序自动合并效率会高很多,后面有我附上的一个配置示例,仅作参考形式不重要
4. JS压缩
此手段属前端特有,毕竟流量意味着速度,意味着金钱。是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件来解决。
所谓的压缩,就是把场的变量名换成短的变量名,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具。不再细说
经验值,能压缩50%以上,视程序与压缩工具而论。
5. 尽量少用第三方库
在我的印象中,很多框架都是很庞大20K以上,虽然很强大很方便,但如果不是做企业级应用,不要用,因为我们也许只可能用到其中很少的一部分功能却加载了整个框架。
不过框架中的很多方法是可以提取出来滴,或者精简成一个轻量级的框架,比如说trimPath,完全可以精简到4k.
6. 合并ajax请求
Ajax请求的数据,如果涉及请求多种数据,尽量考虑到将其合并。
7. 合理的使用缓存
缓存视乎是server端的事,但是js中也是经常用的。
一种是缓存在一个全局变量中,一些很复杂的计算和查找操作可以这样做。如果大家在使用模板类trimPath经常是需要对模板进行预处理,这种预处理的结果是可以被缓存的。这种缓存的缺点是页面刷新后数据就会失效。
另外一种是缓存在window.name或cookie里面,经常用来缓存一些AJAX调用的结果,避免反复请求server端,比如一些用户的权限验证信息,就没必要总是调用server端接口,缓存了也就减少了请求,提高了性能,但cookie大家要慎用,存于一些数据比较小的还行,每次http请求他是占用上行带宽的。
还有一种缓存的实现是借助于flash或其他的第三方组件,特点是可以缓存超大的数据,但是适应场景优先,需要特殊的平台支持,不过FLASH目前已经很通用了。
8. 能静态化输出,尽量少用JS渲染输出
页面制作
1. 素材合并
尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。
2. CSS压缩处理
道理同JS压缩,也是有很多工具实用的可用。
3. 图片背景切割与平铺
切图是很有讲究的,很多区域能切成用1像素平铺,尽量用1像素小图平铺,尽量用一个较大的图片设置成背静。
4. 少用iframe和frameset
首先一点frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好
5. CSS尽量放到页面头部
浏览器只有等CSS下载完毕后,才会真正的显示页面,所以为了让页面尽快有所输出,把CSS放到头部,而且浏览器对CSS的处理时并行的,不会像JS那样会阻塞页面。
Server处理
1. 启用gzip压缩,约能压缩70%~80%
2. js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。
3. 静态页面、js、css等静态文件单独迁移
第一, 可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。
第二, 便于管理和维护,以后迁移和拓展方便。
4. js、css、图片等静态文件与当前应用放到不同的域名下。
不再传递那些无必要的cookie,减少传输。
5. 图片服务器分多域名。
浏览器对同一域名的只允许使用2个并发,如果页面图片过多,会由于并发排队从而阻塞页面。但域名也不能太多,会消耗DNS解析的时间,建议4个为佳。
附加
1. JS合并配置文件示例
<?xml version="1.0" encoding="gb2312" ?>
<root>
<include>
<list><![CDATA[qStandBottom_static]]></list>
</include>
<js>
<list><![CDATA[/lib/postJs.obj.js]]></list>
<list><![CDATA[/lib/JSON.obj.js]]></list>
<list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>
<list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>
<list><![CDATA[/control/subject/checkDomain.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>
<list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>
</js>
</root>
2. 常见分析与调试工具
IE Httpwatch
Firefox firebug
- JavaScript优化细节.rar (411.2 KB)
- 下载次数: 9
发表评论
-
ie9以下都有这个问题(ajax)
2016-01-18 17:01 1336ajax在IE下使用GET方式请求,如果地址和参数一样 会首先 ... -
Jquery绑定事件(bind和live的区别)
2015-04-27 21:56 1195Jquery中绑定事件有三种方法:以click事件为例 ... -
js字符串转换成数字
2015-01-14 23:33 4152js字符串转换成数字 js ... -
table中div内容为纯数字和字母换行
2014-12-29 20:01 1271不换行 简单些td中加white-space: nowrap; ... -
java 方式的将 java 对象以及 list 或者 map 转化为 json 数据
2014-03-12 23:40 1204JavajsonAjax.net 学会了在 j2ee中使用 ... -
query each方法跳出循环,并获得返回值
2014-03-12 23:26 1131return false:将停止循环 (就像在普通的循环中使用 ... -
js跳出循环的方法区别(break,continue,return)
2014-03-12 23:24 20650跟许多多态语言一样,js也有break,continue,re ... -
jsp中的乱码怎么解决
2014-03-06 21:41 8501、在jsp页中加入一条语句: <%@ page co ... -
image 不提交表单
2014-03-06 21:24 726默认input的type为image或者submit都会提交的 ... -
HTML表格中的nowrap是什么意思啊?
2013-11-03 22:34 2383HTML <td> 标签的 nowrap 属性 ... -
IFrame AND window对象
2013-07-20 01:07 1858var detialIframe=document.all(& ... -
window.onload
2013-07-20 01:02 1582window.onload 同时执行多个函数的解决方法 1. ... -
关键词高亮显示
2012-10-27 23:18 1117<!DOCTYPE html PUBLIC " ... -
简单javascript概述
2012-10-20 18:19 2456什么是JavaScript JavaScript ... -
禁止网页复制的代码
2012-09-11 22:59 2264<html> <head> < ... -
JS打印
2012-09-11 22:56 2449一、普通打印(整页打) 这个不用多说,直接用 引用:wi ... -
Javascript总结(代码篇)
2012-08-17 20:23 24431)Alert box <html> <h ... -
JS优化经验
2012-08-16 22:00 22701.定义局部变量。对于 ... -
js优化(收集一)
2012-08-16 21:58 37121.使用局部变量避免使用全局变量 比如 fun ... -
Javascript继承
2012-08-15 22:40 2260(一)对象冒充 JScript code funct ...
相关推荐
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请...
更利于搜索引擎收录采用数据缓存技术,在不生成静态文件的情况下也能有效提高页面打开速度在静态页面中利用javascript实现了访问量,评论等数据的实时更新(首页,分类页每一小时系统自动更新一次) 后台支持多附件...
红技SHOP网上购物系统在前台页面上别出心裁的设计不仅网页打开速度快而且页面显示美观大气,使用时下最流行的CSS DIV设计,完全符合W3C组织提倡使用的WEB标准,适合在当今各大主流的浏览器中正常运行显示,用户...
- 前台页面重新布局重构,页面布局更加简洁,首页加载速度更快。 - 前台首页文章列表顶部新增滚动消息,超级炫酷。 - 新增了监控用户是否授权的功能、增加了用户的体验性。 - 增加图片删除后也将该路径的图片删除的...
12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类...
12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类...
程序优化APC和Mem缓存机制,对可扩展Minify技术对Javascript和CSS文件进行合并、压缩以及缓存,使系统程序运行速度和可靠性大幅增强。 三、 用户交互更成熟 新版本对前端交互动作大量重新定义,结合早期版本...
学了SSM后重构了一次才有的这个项目,里面代码写的比较水,勿喷新人学习玩耍还是可以的〜PS后面有时间会不断重构和优化里面的代码^ _ ^ 1.项目展示 【页面】: 【功能】: 用户登录注册,MD5加密,邮箱验证。博客...
本篇文章不会非常扯蛋地去进行什么评测,然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
团队于2007年正式投入开发,是最早一批国内领先Asp.Net开发人员,系统由团队完全自主独立研发,从数据库设计到底层代码基建再到前台UI设计,最早的内部版本发布于2010年8月,历时2年的系统完善,目前拥有的成熟模型...
'4、后台文章管理采用企业级优化分页技术,解决文章记录达到数万篇以上时,其显示速度仍然较快。 '5、标签调用文章标题超过指定文字个数时,将以...结束。 '6、后台登录增加防止跨站提交验证。 '7、后台帮助文档增加...
优化后的通用分页存储过程 sql语句 一些Select检索高级用法 SQL server 2005中新增的排序函数及应用 根据基本表结构及其数据生成 INSERT ... 的 SQL 简便的MS SQL 数据库 表内容 脚本 生成器 将表数据生成SQL脚本的...
15、修改了calendar.js,优化了日历选择控件样式和速度 16、修正了几处界面显示效果 17、在“私人定制界面”页面增加了“是否开启系统tips” (tips有时候很烦人……哥也深受其害 >_<)的功能。 [2009-11-27] v3.2...
程序优化APC和Mem缓存机制,对可扩展Minify技术对Javascript和CSS文件进行合并、压缩以及缓存,使系统程序运行速度和可靠性大幅增强。 三、 用户交互更成熟 新版本对前端交互动作大量重新定义,结合早期版本的...