- 军军小站|张军博客

JavaScript 的性能优化：加载和执行

概览无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()。例如清单1清单1JavaScript代码内嵌示例Sou</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-29 22:50:45</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1931</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/539" title="Javascript的声明" target="_blank" onclick="return recordId('tid',66)">Javascript的声明 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/539" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/7.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/539';}else{window.open('/article/539');}" style="cursor: pointer;">Quiz下面Javascript代码为什么能运行？hello();functionhello(){alert("Hello,world!");}但对于C，这么写会报错：#include"stdio.h"voidmain(){hello();}voidhello(){printf("Hello,world\n");}由于hello没有被预先声明，代码“hello()”被认为是隐式声明，而隐式声明返回类型是int，所以提示hello类型错误。通过预先声明或者将</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 01:32:08</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1931</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/14012" title="eclipse Errors running builder 'JavaScript V" target="_blank" onclick="return recordId('tid',66)">eclipse Errors running builder 'JavaScript V </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/14012" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/4.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/14012';}else{window.open('/article/14012');}" style="cursor: pointer;">跑java程序时提示错误：Errorsoccurredduringthebuild.Errorsrunningbuilder'JavaScriptValidator'onproject'......'.java.lang.NullPointerException导致计算机运行速度很慢，因此想取消关于js校验的工作。提高eclipse运行的速度。解决方法：项目—-右键Properties—-Builders—-取消“JavaScriptValidator”e</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-29 22:10:45</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1920</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/11029" title="Javascript 操作select控件大全（新增、修改、" target="_blank" onclick="return recordId('tid',66)">Javascript 操作select控件大全（新增、修改、 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/11029" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/17.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/11029';}else{window.open('/article/11029');}" style="cursor: pointer;">Javascript操作select控件大全（新增、修改、删除、选中、清空、判断存在等）Postedon2007-08-0814:56礼拜一阅读(14918)评论(28)编辑收藏网摘所属分类:JavaScript1判断select选项中是否存在Value="paraValue"的Item2向select选项中加入一个Item3从select选项中删除一个Item4删除select中选中的项5修改select选项中value="paraValu</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 09:29:29</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1918</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/12199" title="微软新推TypeScript取代JavaScript" target="_blank" onclick="return recordId('tid',66)">微软新推TypeScript取代JavaScript </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/12199" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/16.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/12199';}else{window.open('/article/12199');}" style="cursor: pointer;">微软新推TypeScript取代JavaScriptTypeScript是一个应用程序级的JavaScript开发语言。TypeScript是JavaScript的超集，可以编译成纯JavaScript。TypeScript跨浏览器、跨操作系统、跨主机，开源。主页：http://www.typescriptlang.org/StartsfromJavaScript,EndswithJavaScriptTypeScript遵循JavaScript的语法和语义</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 09:30:13</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1915</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/3742" title="一种模仿线程的Javascript异步模型设计&实现" target="_blank" onclick="return recordId('tid',66)">一种模仿线程的Javascript异步模型设计&实现 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/3742" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/18.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/3742';}else{window.open('/article/3742');}" style="cursor: pointer;">jQuery中所支持的异步模型为：Callbacks，回调函数列队。Deferred，延迟执行对象。Promise，是Deferred只暴露非状态改变方法的对象。这些模型都很漂亮，但我想要一种更帅气的异步模型。Thread？我们知道链式操作是可以很好的表征运行顺序的（可以参考我的文章《jQuery链式操作》），然而通常基于回调函数或者基于事件监听的异步模型中，代码的执行顺序不清晰。Callbacks模型实际上类似一个自定义事件的回调函数队列，当触发该事件（</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 01:33:28</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1903</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/11367" title="学习Javascript闭包（Closure）" target="_blank" onclick="return recordId('tid',66)">学习Javascript闭包（Closure） </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/11367" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/7.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/11367';}else{window.open('/article/11367');}" style="cursor: pointer;">闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。varn=999;functionf1(){alert(n);}f1();//999另一方面</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 09:29:42</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1902</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/4580" title="JavaScript 语言基础知识点总结（思维导图）" target="_blank" onclick="return recordId('tid',66)">JavaScript 语言基础知识点总结（思维导图） </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/4580" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/20.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/4580';}else{window.open('/article/4580');}" style="cursor: pointer;">JavaScript数组JavaScript函数基础Javascript运算符JavaScript流程控制JavaScript正则表达式JavaScript字符串函数JavaScript数据类型JavaScript变量Window对象DOM基本操作JavaScript语言基础知识点总结（思维导图）</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 01:33:49</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1897</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/420" title="Javascript图像处理——阈值" target="_blank" onclick="return recordId('tid',66)">Javascript图像处理——阈值 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/420" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/18.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/420';}else{window.open('/article/420');}" style="cursor: pointer;">前言上一篇文章，我们讲解了图像处理中的亮度和对比度的变化，这篇文章我们来做一个阈值函数。最简单的图像分割方法阈值是最简单的图像分割方法。比如为了从下图中分割出苹果，我们利用前景与背景的灰度差值，通过设定一个阈值，对于该像素大于这个阈值时就以黑色表示，小于便以灰色表示。五种阈值类型和OpenCV一样，我们将提供五种阈值类型，方便使用。下面是原图像的波形表示，纵坐标表示像素点的灰度值大小，蓝线是阈值大小。二进制阈值化公式表示是：图像表示是：可见超过该阈值的就变</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 01:32:03</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1894</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/14422" title="50个实用的JavaScript工具" target="_blank" onclick="return recordId('tid',66)">50个实用的JavaScript工具 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/14422" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/9.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/14422';}else{window.open('/article/14422');}" style="cursor: pointer;">JavaScript是一个功能强大的客户端脚本语言，许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验，并提供丰富的互动式组件和功能。虽然它的语法相当简单，但是对开发者来说还是很有难度的，因为它要运行在Web浏览器中。以下是我们为你推荐的50个相关工具:JavaScript/AJAX编辑工具jQueryUIjQueryUI是jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能，如我们常用的</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-29 22:15:45</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1893</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/11068" title="(IBM)最大限度利用 JavaScript 和 Ajax 性能" target="_blank" onclick="return recordId('tid',66)">(IBM)最大限度利用 JavaScript 和 Ajax 性能 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/11068" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/9.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/11068';}else{window.open('/article/11068');}" style="cursor: pointer;">简介在web早期，优化web页面的性能通常意味着避免了使用不必要的HTML标记，将JavaScript代码量控制到最小，并尽量减小所有图片文件大小，否则上网冲浪者会走开去泡杯咖啡来等待页面加载。web各个方面的改进也意味着我们现在面临新的性能考虑。尽管DSL和宽带为很多人提供了对Internet上更多内容的高速访问，我们对加载时间和响应的期望也在发展，希望在页面上执行操作后能立刻得到结果。AsynchronousJavaScriptandXML(Ajax)</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 09:29:30</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1864</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/15822" title="javaScript 对象大全（javascript code al 2）" target="_blank" onclick="return recordId('tid',66)">javaScript 对象大全（javascript code al 2） </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/15822" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/6.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/15822';}else{window.open('/article/15822');}" style="cursor: pointer;">javaScript对象大全JavaScript是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。JavaScript的特点：简单、易学、易用；跨平台；IE、Navigator符合ECMA（欧洲计算机制造协会）标准，可移植；事件驱动式的脚本程序设计思想；动态、交互式的操作方式。JavaScript的作用：交互式操作；表单验证；网页特效；Web游戏服务</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-29 22:33:25</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1859</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/12323" title="javascript计算本周起止日期" target="_blank" onclick="return recordId('tid',66)">javascript计算本周起止日期 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/12323" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/13.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/12323';}else{window.open('/article/12323');}" style="cursor: pointer;">运行效果：<SCRIPTLANGUAGE="JavaScript">functionformatDate(date){varmymonth=date.getMonth()+1;varmyweekday=date.getDate();return(mymonth+"月"+myweekday+"日");}functionprintWeek(){varnow=newDate();varnowDayOfWeek=now.getDay();varnowDay=now</span> <p class="auth-span"> <span class="muted"><i class="fa fa-user"></i><span class="zj-icon-text">系统</span></span> <span class="muted"><i class="fa fa-clock-o"></i><span class="zj-icon-text">2019-08-12 09:30:17</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">1850</span></span>  </p> </article><article class="excerpt"> <header> <a title="Javascript" class="label label-important zj-del-target" href="/category/66">Javascript<i class="label-arrow"></i></a> <h2> <a class="zj-titles zj-del-target" href="/article/15635" title="JavaScript二级联动下拉菜单" target="_blank" onclick="return recordId('tid',66)">JavaScript二级联动下拉菜单 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/15635" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/14.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/15635';}else{window.open('/article/15635');}" style="cursor: pointer;"><html><head><title>test//varselect1_len=document.frm.s1.options.length;varselect2=newArray(4);for(i=0;i<4;i++){select2[i]=newArray();}//定义基本选项select2[0][0]=newOption("请选择","");select2[1][0]=new

系统 2019-08-29 22:31:07 1849

热门排行

JavaScript 的性能优化：加载和执行

腾讯的一道JavaScript面试题