Javascript

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">2542</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/16957" title="使用纯javascript通过className来获取元素（ge" target="_blank" onclick="return recordId('cid',66)">使用纯javascript通过className来获取元素（ge </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/16957" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/1.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/16957';}else{window.open('/article/16957');}" style="cursor: pointer;">MarkFinklesuggestedthatIdosomespeedtesting,nowthatanativeimplementationofgetElementsByClassNamehaslandedintheMozillatrunk(destinedforFirefox3).SoIwentaroundanddugupallofthedifferent,existing,implementationsthatIcouldfind.Currently</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:47:45</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2542</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/13772" title="javascript 身份证及电话号码验证" target="_blank" onclick="return recordId('cid',66)">javascript 身份证及电话号码验证 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/13772" 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/13772';}else{window.open('/article/13772');}" style="cursor: pointer;">//这个可以验证15位和18位的身份证，并且包含生日和校验位的验证。//如果有兴趣，还可以加上身份证所在地的验证，就是前6位有些数字合法有些数字不合法。functionisIdCardNo(num){num=num.toUpperCase();//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。if(!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))){al</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:07:53</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2542</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/21061" title="Registering JavaScript object methods as cal" target="_blank" onclick="return recordId('cid',66)">Registering JavaScript object methods as cal </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/21061" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/11.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/21061';}else{window.open('/article/21061');}" style="cursor: pointer;">RegisteringJavaScriptobjectmethodsascallbacksNovember27,2007Tags:ajaxTheregistrationofcallbackfunctionsisverycommoninJavaScriptwebprogramming,forexampletoattachuserinterfaceeventhandlers(suchasonclick),ortoprovideafunctiontohandle</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 23:40:15</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2540</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('cid',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/13.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">2540</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('cid',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/2.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">2539</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('cid',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/9.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">2537</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('cid',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/10.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">2535</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/17956" title="JavaScript--正则表达式" target="_blank" onclick="return recordId('cid',66)">JavaScript--正则表达式 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/17956" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/5.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/17956';}else{window.open('/article/17956');}" style="cursor: pointer;">JavaScript--正则表达式正则表达式(regularexpression)对象包含一个正则表达式模式(pattern)。它具有用正则表达式模式去匹配或代替一个串(string)中特定字符(或字符集合)的属性(properties)和方法(methods)。正则表达式构造函数：newRegExp("pattern"[,"flags"]);参数说明：pattern--一个正则表达式文本flags--如果存在，将是以下值：g:全局匹配i:忽略大小写gi:</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 23:00:10</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2534</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('cid',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">2534</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/4126" title="Javascript图像处理——图像金字塔" target="_blank" onclick="return recordId('cid',66)">Javascript图像处理——图像金字塔 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/4126" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/8.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/4126';}else{window.open('/article/4126');}" style="cursor: pointer;">前言上一篇文章，我们讲解了边缘梯度计算函数，这篇文章我们来了解图像金字塔。图像金字塔？图像金字塔被广泛用于计算机视觉应用中。图像金字塔是一个图像集合，集合中所有的图像都源于同一个原始图像，而且是通过对原始图像连续降采样获得的。——《学习OpenCV》常见的图像金字塔有下面两种：高斯金字塔(Gaussianpyramid):用来向下采样拉普拉斯金字塔(Laplacianpyramid):用来从金字塔低层图像重建上层未采样图像高斯金字塔类似金字塔一样，高斯金字</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:37</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2532</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/17534" title="10款Flash和Javascript网页音乐播放器" target="_blank" onclick="return recordId('cid',66)">10款Flash和Javascript网页音乐播放器 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/17534" 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/17534';}else{window.open('/article/17534');}" style="cursor: pointer;">关联：9FreshjQueryMediaPlayers10款音乐播放器，有基于javascript的网页音乐播放器，也有基于Flash的音乐播放器。赶快挑一款，分享你喜爱的音乐吧！1.DewplayerDewplayer是一个微型，免费的Flashmp3播放器，具有简洁的界面。Dewplayer包含三种不同的尺寸界面。2.NiftyPlayerNiftyPlayer是一个非常小（4KB），开源的FlashMP3播放器。拥有非常简洁的界面。可以利用JavaS</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:54:57</span></span> <span class="muted"><i class="fa fa-eye"></i><span class="zj-icon-text">2531</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('cid',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/6.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">2527</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('cid',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/20.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">2513</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/17086" title="js javascript 文字变换颜色，样式，改变文字的" target="_blank" onclick="return recordId('cid',66)">js javascript 文字变换颜色，样式，改变文字的 </a> </h2> </header> <div class="focus"> <a class="zj-del-target" href="/article/17086" target="_blank"><img style="width: 200px; height: 123px;" class="thumb" src="/Public/static/images/article/3.jpg" alt="" title=""></a> </div> <span class="note" onclick="if (jq.browser.versions.mobile) {window.location.href='/article/17086';}else{window.open('/article/17086');}" style="cursor: pointer;"><html><head><title>文字变换颜色样式

热门排行