前台javascript速度优化总结

第一篇：前台javascript速度优化总结

两个基本点

1.择重避轻，有所取舍。

 核心优先

通常来讲，系统是都是庞大的，不要太完美主义，先抓住重点，理解那些是我们的核心页面，那些页面对我们来说是最重要的，那些页面访问量最高，核心优先。

 主要问题在那，抓住瓶颈点。

治病要医本。优化前，需要进行细致的分析，抓住主要瓶颈点，对症下药。优化那么多的方子，别全采用，通常几个就能达到效果 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” ?>

2.常见分析与调试工具

IE Httpwatch Firefox firebug

本文地址 http://user.qzone.qq.com/165162897/blog/1248096280

第二篇：电脑开机及速度优化

电脑开机及速度优化

1、系统常规优化

1）关闭系统属性中的特效，这可是简单有效的提速良方。点击开始→控制面板→系统→高级→性能→设置→在视觉效果中，设置为调整为最佳性能→确定即可。

2）“我的电脑”－“属性”－“高级”－“错误报告”－选择“禁用错误汇报”。

3）再点“启动和故障恢复”－“设置”，将“将事件写入系统日志”、“发送管理警报”、“自动重新启动”这三项的勾去掉。再将下面的“写入调试信息”设置为“无”。

4）“我的电脑”－“属性”－“高级”－“性能”－“设置”－“高级”，将虚拟内存值设为物理内存的2.5倍，将初始大小和最大值值设为一样（比如你的内存是256M，你可以设置为640M），并将虚拟内存设置在系统盘外（注意：当移动好后要将原来的文件删除）。

5）将“我的文档”文件夹转到其他分区：右击“我的文档”－“属性“－“移动”，设置到系统盘以外的分区即可。

6）将IE临时文件夹转到其他分区：打开IE浏览器，选择“工具“－“internet选项”－“常规”－“设置”－“移动文件夹”，设置设置到系统盘以外的分区即可 关掉调试器Dr.Watson：运行drwtsn32，把除了“转储全部线程上下文”之外的全都去掉。否则一旦有程序出错，硬盘会响很久，而且会占用很多 空间。如果你以前遇到过这种情况，请查找user.dmp文件并删掉，可能会省掉几十M的空间。这是出错程序的现场，对我们没用。然后打开注册表，找到 HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsNTCurrentVersionAeDebug子键 分支，双击在它下面的Auto键值名称，将其“数值数据”改为0，最后按F5刷新使设置生效，这样就彻底来取消它的运行了。另外蓝屏时出现的 memory.dmp也可删掉。在“我的电脑→属性→高级→设置→写入调试信息→选择无”。

8关闭“系统还原”：鼠标右健单击桌面上的“我的电脑”，选择“属性”，找到“系统还原”去掉，这样可以节省好多空间。

9关闭“系统还原”：鼠标右健单击桌面上的“我的电脑”，选择“属性”，找到“系统还原”去掉，这样可以节省好多空间。

10关闭错误报告：在“系统属性”对话框中选择“高级”选项卡，单击“错误报告”按钮，在弹出的“错误汇报”对话框中，选择“禁用错误汇报”单选项，最后单击“确定”即可。

11、关闭自动更新：“我的电脑”右键，选择“属性”－“自动更新”－“关闭自动更新，我将手动更新计算机”，单击“确定”。12关闭磁盘索引打开我的电脑－右击驱动器－“属性”－取消“使用索引以便快速查找文件

13、加快自动刷新率：运行注册表编辑器，找HKEY_LOCAL_MACHINEystemCurrentControlSetControlUpdate，将Dword[UpdateMode]的数值数据更改为[0]。14 关闭自动重新启动功能：WindowsXP遇到严重问题时会突然重新开机，可从注册表将此功能取消。打开注册表编辑器，找到 “HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlCrashControl”将 AutoReboot键的Dword值更改为0。

15启动时禁止自动调用“WindowsMessenger”：运行注册表编辑器，找到并删除“HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionRunMSMSGS”此键来实现。

16删除帮助文件（减掉40多mb)（使用中文汉化包的文件大小为92兆，刚开始 使用xp的同志最好别删）

17把我的文档、IE的临时文件夹都转到其他盘（分区）。（同时对系统的速度，和硬盘都有好处，如果使用的是双系统，最好把两个系统的IE临时文件都放在同一个文件夹，这样既加快速度有节省空间）

18把虚拟内存也转到其他盘。（最好就是将这些东西和平时临时下载文件放在一个不大的分区里，这样也方便整理硬盘）删除驱动备份 windowscache目录下的Driver.cab文件（73mb)20.删除系统文件备份运行中输入 sfc.exe /purgecache（一般用户是不怎么用的）

21清除内存中不被使用的DLL文件。可以使用优化大师“及时清理内存中不常用的动态链接库（DLL）。在注册表的HKKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersion，在Explorer增加一个项AlwaysUnloadDLL，默认值设为1。注：如由默认值设定为0则代表停用此功能。

22、加快窗口显示速度：我们可以通过修改注册表来改变窗口从任务栏弹出，以及最小化回归任务栏的动作，步骤如下：打开注册表编辑器，找到HKEY_CURRENT_USER ControlPanelDesktop WindowMetrics子键分支，在右边的窗口中找到MinAniMate键值，其类型为REG_SZ，默认情况下此健值的值为1，表示打开窗口显 示的动画，把它改为0，则禁止动画的显示，接下来从开始菜单中选择“注销”命令，激活刚才所作的修改即可23.提升系统内核的性能（WINNT/2024/XP）

[HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlSessionManagerMemory Management] “DisablePagingExecutive”=dword:00000001 [注]默认情况下，Windows会把系统内核写入硬盘，这个设置就是通过禁用内存页面调度（PagingExecutive），让数据保留在内存中，从而提升系统性能。建议拥有很多内存的用户（256M以上）使用这个设置。速XP,win7的开、关机

1）首先，打开“系统属性”点“高级”选项卡，在“启动和故障恢复”区里打开“设置”，去掉“系统启动”区里的两个√，如果是多系统的用户保留“显示操作系统列表的时间”的√。再点“编辑”确定启动项的附加属性为/fastdetect而不要改为/nodetect，先不要加/noguiboot属性，因为后面还要用到guiboot。

2）接下来这一步很关键，在“系统属性”里打开“硬件”选项卡，打开“设备管理器”，展开“IDEATA/ATAPI控制器”，双击打开“次要IDE通道”属性，点“高级设置”选项卡，把设备1和2的传送模式改为“DMA（若可用）”，设备类型如果可以选择“无”就选为“无”，点确定完成设置。同样的方法设置“主要IDE通道”。

3）设置预读改善开机速度，打开注册表，找到HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlSessionManagerMemoryManagementPrefetchParameters，右边窗口将EnablePrefetcher的数值更改为1（0－禁用预读，1－预读应用程序，2－系统启动预读，3－前两者皆预读）。电脑是PIII 800MHz以上的可以尝试将数值更改为4或5。

4）顺便把关机也加速一下吧。打开注册表（开始－运行－regedit），单击“我的电脑”打开“编辑”菜单的“查找”，输入AutoEndTasks，点“查找下一个”。双击打开找到的结果修改“数值数据”为1（此项是让系统自动关闭停止响应的程序）。然后在AutoEndTasks的下面找到HungAppTimeout（将其“数值数据”设为2024或者更小，推荐设为200），再找到WaitToKillAppTimeout（将其“数值数据”设为2024或者更小，推荐设为1000）。在这里顺便也把菜单延迟的时间修改一下，在AutoEndTasks的下面找到MenuShowDelay，数值是以毫秒为单位，如果想去掉菜单延迟就设为0。修改后点“编辑”菜单，打开“查找下一个”（快捷键F3），继续查找，把找到的结果都安照上一步的方法修改（注意：数值要对应相同）。

5）用上面的方法找到WaitToKillServiceTimeout并设置数值与WaitToKillAppTimeout相同。

6）享受了极速重启的乐趣后我们再进一步加速一下启动的速度，打开“系统属性”－“高级”－“启动和故障恢复”设置，打开“系统启动”区的编辑，在fastdetect的后面加上/noguiboot，这样在启动的时候就不会再显示滚动条。如果你非常喜欢这个滚动条的显示这一步就不用做了。

7）MsConfig。选择“运行”－“msconfig”。我们要动手脚的是“启动”选项卡，点击它，这个选项卡中显示了Windows启动时运行的所有程序。这里没有一个程序对Windows来说是生死悠关的，所以放心大胆地把不要的去掉。

（2）选择“引导”选项卡“高级”选项，点击最大处理器数下拉菜单，选择最大处理器数，点击最大内存复选框，选择最大内存引导。8.减少开机磁盘扫描等待时间

选择“开始→运行”，在运行对话框中键入“chkntfs/t:0”，即可将磁盘扫描等待时间设置为0；如果要在计算机启动时忽略扫描某个分区，比如C盘，可以输入“chkntfs/x c:”命令；如果要恢复对C盘的扫描，可使用“chkntfs /dc:”命令，即可还原所有chkntfs默认设置，除了自动文件检查的倒计时之外

9.使用微软提供的“Bootvis”软件可以有效的提高WindowsXP启动速度。这个工具是微软内部提供的，专门用于提升WindowsXP启动速度。下载后解压缩到一个文件夹下，并在“Options”项中设置使用当前路径。之后从“Trace”项下拉菜单中选择跟踪方式。该程序会引导WindowsXP重新启动，并记录启动进程，生成相关的BIN文件。之后从Bootvis中调用这个文件，从Trace项下拉菜单中选择“Optimizesystem”命令即可。

10.运用360开机加速去掉不用的服务，应用程序方面只保留一个360，其他不需要的禁止，需要的延迟启动。还有很多系统服务，看着不用的去掉。

11.开机声音没用吧，去掉，开始-控制面板-硬件和声音选项卡-更改系统声音，去掉windows启动声音的复选框上的勾。

用win7优化大师进行可更深一层的优化，具体方法太多，以后列出。

12.减少开机滚动条的滚动次数，修改注册表:(HKEY_LOCAL_MACHINESYSTEMCURRENTCONTROLSETCONTROL SESSIONMANAGERMEMORYMANAGEMENTPREFETCHPARAMETERS的子键，然后在对应窗 口，ENABLEPREFETCHER的数值从3改为1，这样滚动有三次变为一次

13.桌面图标太多严重影响开机速度。把不经常用的图标删掉，或建立一个文档，把图标放进去，这样大大减少了开机时间

14.设定本地连接:右击本地连接属性，在大家都知道的TCP/IP那右击属性后设定指定ip192.168.1.1这样减少系统检查网络自动获取IP的时间，减少开机速度

第三篇：JavaScript学习总结（最终版）

1、JavaScript变量可以使用var事先进行声明，也可以用赋值语句隐藏声明。对于一个变量，它存在指的是它拥有值。检查一个变量是否有值的方法是使用Window对象，因为JavaScript声明或使用的变量都属于Window对象的属性。

2、JavaScript函数使用function命令声明，如果函数有返回值，在调用时就可以使用指定语

句获取返回值。当调用函数传入参数时，函数即使没有指明参数名称，也一样可以使用参数数组的对象arguments获取参数的个数和参数值。

3、局部变量：在函数内声明，只能在函数内的程序使用；全局变量：在函数外声明，整个

JavaScript程序的函数和程序代码都可以使用。

4、自定义JavaScript的对象：直接建立Object对象副本后，可新增所需的属性和方法；建

立对象的构造函数，定义属性和方法，使用new命令建立对象副本时，构造函数传入的参数是对象的属性值，如果在建立副本时未指定属性值，一样可以在建立副本后再设置对象的属性值。

5、JavaScript的内置对象：Array、Date、Function、Math、String···

6、DHTML对象模型：是将浏览器和HTML文件的标签都对象化，以便JavaScript程序代

码可以轻易地操控浏览器和访问HTML标签的对象。

版本3.xBOM、版本4.xDHTML=BOM+DHTML DOM、版本5.xBOM+W3C DOM7、DOM对象模型是一种拥有扩展性的文件架构

DOM Level 0-DHTML DOM、DOM Level 1 – W3C DOM

DHTML DOM 和 W3C DOM 的差异在于DHTML DOM只是将整份HTML文件都对象化，每一个HTML标签都对应有标签对象；W3C DOM属于一种通用的文件浏览和访问机制，可以将整份HTML或XML文件视为一种阶层架构的树状结构。

8、DHTML对象模型的完整架构是由BOM的根对象Window开始。

9、Window对象：浏览器的窗口对象

浏览器的状态栏：属性defaultStatus、status

定时器：方法setTimeout(express,time)clearTimeout()

只会运行一次，在经过设置的一段时间后，运行指定的函数或表达式

方法setInterval(express,time)clearInteval()

一旦启动就可以周期性地运行函数或表达式

窗口的打开与关闭：open(url,winName)方法可以打开一个全新的窗口，并且使用JavaScript程序代码获取新窗口的Window对象；在父窗口使用winID访问新窗口的属性和方法，Window对象的opener属性可以参考到父窗口的Window对象。

Close()方法可以关闭一个窗口。

10、Window对象内置对话框：

alert(message)显示一个警告信息的窗口，参数就是显示的信息内容。

confirm(message)一个确认的对话框，参数为信息内容，传回true表示单击”确认”按钮，false为”取消”按钮。

Prompt(msg,value)显示输入文字内容的对话框，参数msg为信息内容，value为默认值，传回用户输入的字符串。

showModelessDialog(url,arguments,features)显示一个新的窗口，参数url为显示的网页。arguments为传送到显示网页的参数，可以是任何数据，例如对象；在显示的网页中可以使用window对象的dialogArguments属性获取传递过来的参数。feature参数可以设置对话框的外观。

11、更改窗口的尺寸和位置：

Window对象的属性：screenLeft传回左边界的坐标 screenTop传回上边界的坐标

Window对象的方法：moveTo(x,y)将浏览器移到坐标x和y的位置

moveBy(offsetx,offsety)将浏览器目前的位置移动参数的位移量

resizeTo(width,height)将浏览器窗口调整为参数width和height的尺寸resizeBy(offsetx,offsety)将浏览器窗口尺寸放大或缩小

12、窗口内容的卷动

Window对象的方法：scroll(x,y)、scrollTo(x,y)滚动窗口内容到指定的位置

scrollBy(offsetx,offsety)从目前窗口内容的位置，滚动参数的位移量

13、Navigator对象：获取浏览器和系统资源的信息

14、History对象：保存历史记录

15、Location对象：保存目前URL网址的详细数据

属性：href 返回完整的URL字符串，重设该属性可以转向链接到其他的网址

方法：reload()重新加载现在打开的HTML文件，如同浏览器工具栏中的“刷新”按钮replace(url)转向到参数url的网址，如同设置href属性

16、Document对象：

打开与写入文件：方法open(“text/html”,”replace”)可以清除目前的文件内容，第一个参数是MIME类型，text/html就是html文件，第二个参数replace可以取代历史记录，浏览器就无法按工具栏的“上一页”按钮返回上一页。

方法 write()或writeln()输出HTML文件的内容

方法 close()显示输出的内容

获取文件的指定元素：getElementById()

17、JavaScript的Cookies处理：Cookies可以在客户端的计算机保存所需的数据，可以使用

Document对象的cookie属性处理Cookie的访问，返回的字符串使用“；”分隔每一个Cookie

新增Cookie函数：saveCookie(name,value,expires)

获取Cookie值函数：getCookie(name)

检查Cookie是否存在的函数：checkCookieExit()

删除Cookie函数：deleteCookie(name)

18、DHTML DOM的Collection对象：

document.all对象集合可以获取HTML文件中所有的标签对象，这是一个数组对象，依

照标签在HTML文件出现的顺序，可以使用索引值访问指定的标签对象,如document.all[i]。也可以直接使用id属性获取，如document.all(“myId”)或myId。

如果HTML文件拥有同名的id属性，获取的仍然是一个集合，还需要使用item()方法

获取指定的标签对象。

同理，myBody.all对象集合可以获取id为myBody的body区域块中的所有标签对象。在all对象集合的所有标签对象中，可以进一步使用tags()方法筛选出指定标签的对象集

合，如document.all.tags(“p”)，可使用length属性获取共有多少个

标签。

19、HTML文件的阶层架构：

HTML文件中的标签属于一种阶层架构，可以使用parentElement属性获取上一层的标

签对象，用children对象集合获取下一层标签的对象集合，这个对象集合可以进一步使用item()方法获取指定的标签对象。

20、访问HTML标签的内容：

innerText()访问标签对象的内容

innerHTML()访问标签对象内的子标签和内容，不包含标签对象本身

outerText()访问标签对象的内容，可以用来取代整个标签对象

outerHTML()访问标签对象的子标签和内容，包括标签对象本身

21、访问HTML标签的属性：

在获取HTML标签的对象后，也可以访问标签对象的属性

22、CSS层级式样式表：

HTML标签都拥有默认的显示样式，CSS能够重新定义HTML标签的显示效果，也可以自定义新的样式名称。

如果是class属性，则定义的样式名称以”.”句点开始，可以定义多个值，并且可以应用到多个标签上

如果是id属性，则定义的样式名称以”#”开始，可以定义多个值，但只能应用到一个标签上

23、动态样式CSS：

CSS样式属性可以对应Style对象的属性，在获取HTML标签对象后，可以访问Style对象的属性，如：objEle.style.color24、DHTML的事件：

事件就是在浏览器显示和阅读HTML文件时，鼠标、键盘或文件加载等操作所触发的一些动作

鼠标事件：onclick 单击鼠标左键 ondbclick 双击鼠标左键 onmousemove 移动鼠标onmouseout 鼠标指针离开HTML标签

onmouseover鼠标指针进入HTML标签

onmousedown 按下鼠标键onmouseup 放开鼠标键

键盘事件：onkeydown 当按下键盘按键 onkeyup 放开键盘按键

其他常用事件：onload 当浏览器加载HTML文件后

onunload 当用户离开浏览器，或是加载其他网页时

onfocus 用户指定对象拥有处理权

onblur 用户离开拥有处理权的对象

onchange 用户更改对象的内容

onsubmit 用户发送窗体字段

onreset 用户重设窗体字段

onselect 用户选择了网页内容

25、JavaScript的事件处理：

方式一：在HTML标签的属性中设置JavaScript的事件处理函数

如：

方式二：在对象的属性中设置JavaScript的事件处理

如：document.myForm.myButton.onclick = showAlert;

如果事件是由Window或Document等上层对象所触发，此时只需设置对象的事件属性，就可以指定事件的处理函数

取消事件的处理：可以取消用户新增的事件处理函数，也可以取消浏览器默认的事件处

理函数。

当事件触发后，浏览器默认的事件处理函数就会进行事件的处理，拥有默认处理函数的 常见事件有：元素 事件onclick 单击可以显示其他URL网址的HTML文件元素