JavaScript 汇总

1. 图片热区:

<img src="logo.jpg"  usemap="#logo">
<map id="logo" name="logo">
<area shape="rect" coords="0,0,50,50" href="#">
</map>
</img>

2. SetTimeout:只执行一次

   SetInterval:定时唤醒

其他用法:

  A. SetTimeout会强制页面进行重绘;

B. 在javascript中,调用递归的次数最多为3000次,用SetTimeout可以破除这个限制;

3. HTML引擎和Javascript(ECMAScript)引擎工作原理小结:

当在HTML页面触发一个点击事件后,对DOM的修改都会被保存在绘制/缓冲队列中,当执行完成JAVASCRIPT方法后,HTML引擎会根据绘制/缓冲队列中对DOM的修改进行重绘。这也就是为什么在执行内容很长的JS脚本时页面会发生卡住或白屏的原因;

当经常对队列进行清空时,页面会出现不断闪烁的情况,称为丢帧。

什么情况下会出现页面重绘的效果呢,就是当页面进行元素的显示与隐藏,元素的位置,大小或浏览器的大小发生变化时,都会引起重绘;

      如何减少重绘的发生呢? 避免对同一个元素多次进行属性的单独操作,尽量将各种属性放在class中一次赋值;

4. Dom树和Dom呈现树:

Dom树:对页面的直接解析,Dom树中包括隐藏的对象,也未包含CSS样式和各种JS文件;

Dom呈现树:在Dom树的基础上,下载JS文件,结合各中CSS样式,并隐藏hidden对象所呈现出来的树形结构即Dom呈现树;

5. SPDY:一次连接中尽可能多的传输数据,减少客户端与服务器端的通信次数;

6. Prototype:

  向对象添加属性和方法,具体示例如下(Object.prototype.hasOwnProperty()):

<html>
<head>
</head>
<body>
<script>
function Employee(name,job,born)
{
    this.name=name;
    this.job=job;
    this.born=born;
}

var bill = new Employee(‘Bill‘,‘Engineer‘,1988);

Employee.prototype.salary=null;

bill.salary=10000;

alert(bill.salary);

</script>
</body>
</html>

7. eval()

函数解析字符串,并执行其中的的 JavaScript 代码;

<html>
<head>
</head>
<body>
<script type="text/javascript">

eval("x=10;y=20;alert(x*y);")

alert(eval("2+2"));

var x=10
alert(eval(x+17));

</script>

</body>
</html>

8. 双向引用

备注:在以下的例子中,当每次完成在<body>标签中新加一个元素<div>后,divs.length的数量会马上发生变化,这种现象就称作双向引用:

<html>
<head>
    <title>HTML5 Controller</title>
    <script type="text/javascript">
        function AddElementToBody() {
            var divs = document.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                alert(‘Before add <div> to body:‘+divs.length.toString());
                var dl = document.createElement("div");
                dl.innerText = "HelloWorld!" + i.toString();
                //var bd = document.getElementsByTagName("body").appendChild(dl); //Wrong usage!
                document.body.appendChild(dl);
                alert(‘Adding <div> to current page is successful!‘);
                alert(‘After add <div> to body:‘ + divs.length.toString());
                alert(document.body.innerHTML);
                if (divs.length > 20)
                {
                    break;
                }
            }
        }
    </script>
</head>
<body onload="AddElementToBody();">
    <div>HelloWorld!</div>
</body>
</html>

9. 声明提前(变量在使用之前可以不用声明)

<html>
<head>
    <title>HTML5 Controller</title>
    <script type="text/javascript">
        var HI = ‘Hello‘;
        var HAY = ‘How are you?‘;

        function WithVar() {
            alert(HI);
            var HI = ‘World‘;//本来为全局变量,现在加上var 声明为局部变量,相当于对先前的全局变量的覆盖(由于JS的双向引用,此时的赋值才是真的赋值)
            alert(HI);
        }

        function WithoutVar() {
            alert(HAY);
            HAY = ‘Fine,thank you!‘;//全局变量
            alert(HAY);
        }

        function LoadAll()
        {
            WithVar();
            WithoutVar();
        }
    </script>
</head>
<body onload="LoadAll();">
    <div>HelloWorld!</div>
</body>
</html>

10. 解决JS页面阻塞:defer Asyn=‘true‘

JS页面阻塞

时间: 2024-10-16 06:15:29

JavaScript 汇总的相关文章

securityoverridehacking challenge 解题思路汇总——JavaScript

通过了Advanced部分( securityoverridehacking challenge 解题思路汇总--Advanced),下面就进入JavaScript了.总的来说,这个部分比较简单,因为JavaScript是高度可控的东西.也就是说,安全角度而言,JavaScript是不可信的. 4        Javascript 4.1       Login Bypass 这题比较容易让人想多,逛了下hint,发现很简单.观察,首先请求了index.php,然后跳转到了fail.php,并

JavaScript强化教程——Native.js示例汇总

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Native.js示例汇总 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成. 这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者. 众人拾柴火焰高,有能力的开发者多多提交NJS代码,大家都会给你点赞的, Android平台 在桌面创建和删除App快捷方式 见Hello H5+里Native.js部分演示及源码. 或在这里搜索"快捷方式",h

JavaScript正則表達式知识汇总

Js 正則表達式知识汇总 正則表達式: 1.什么是RegExp?RegExp是正則表達式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegExp(); 3.RegExp 对象有 3 个方法: 1)test()检索字符串中的指定值,返回值是true或false. var p1=new Reg("e"); document.write(Reg.test("welcome to China!")); 2)exec

JavaScript之Array常用函数汇总

[20141121]JavaScript之Array常用功能汇总 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table

浏览器端javascript调用手机终端本地功能实现02-功能点汇总

上篇博文已经说明,本篇直接进入主题.本篇大致说明总体功能以及代码用途,下篇将功能点逐一详细说明. 功能点包括: 拍照相关接口(camera) 功能函数名称 作用 备注 invokeCamera() 调用摄像头拍照 requestAlbum() 调用相册功能 requestAlbumMulti() 相册多选 requestAlbumMultiUpload() 相册多选完后上传 2. 录音相关接口(media) 功能函数名称 作用 备注 startRecord() 录制音频 stopRecord()

javascript中event汇总

ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处引用的是javascript中的event兼容处理代码. var EventUtil = {//在这里我们用一个对象来将对event的各种兼容处理封装起来 //首先是对绑定事件的兼容 addHandler: function(element, type, handler){ if (element.addEventListener){ //D

javascript日期格式化方法汇总

本文给大家汇总介绍了javascript格式化日期时间的几种常用方法,个人对最后一种个性化输出时间比较有兴趣,基本上只要项目中能用到都是使用这种,推荐给小伙伴们. 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S

javascript刷新页面的方法汇总

如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进

最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新html5以及css3资源下载汇总                                               Dreamweaver 教程汇总 索引: JavaScript初学者及参考必备 Javascript高级进阶 AJAX (Asynchronous JavaScript and