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. Javascript双向引用

备注：在以下的例子中，当每次完成在<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页面阻塞

11. 关于JS文件在HTML文件中的位置

通常情况下，我们将JS脚本及文件引用放在<head></head>部分。最近参加了公司的一次培训，让我更加清楚地认识了JS与HTML的执行逻辑。我们都知道HTML页面的内容顺序执行，当HTML页面引用JS文件时会对<head></head>部分引用的JS文件进行下载，在JS文件下载的过程中，有时会造成HTML内容的下载中止，即页面会出现空白。当JS文件下载完成后，HTML页面才会继续进行UI的展示。此外从另一方面来说，如果我们将JS代码放在HTML文件的<head></head>部分，在进行有些DOM对象进行操作时，页面元素还未进行呈现，所以会出现找不到对象的错误。所以我们应该将JS文件放在页面末尾即</body>之前进行引用。

12. Splice()和slice()用法

arrayObj.slice(start,end)：从start开始截取元素，直到end结束。end可选，如不填，则截取从start开始的所有元素；

　 arrayObj.splice(index,howmany,item1,.....,itemX)：方法向/从数组中添加/删除项目，然后返回被删除的项目（会对原数组进行修改）；

<html>

<head>

<script>

var CA=new Array('H','E','L','L','O','!');

var C11=CA.slice(3);

var C12=CA.slice(1,4);

//alert(C11);

//alert(C12);

var C21=CA.splice(2,4);

var C22=CA.splice(0,2,1,2,3);

alert(C21);

alert(C22);

alert(CA);

</script>

</head>

</html>

JavaScript基础知识汇总的更多相关文章

  1. javaScript 基础知识汇总（三）

    1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while  循环 let i =0; do { //循环体 }while( ...

  2. javaScript 基础知识汇总（六）

    1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number  boolean  symbol  null  undefined 对 ...

  3. javaScript 基础知识汇总（五）

    1.垃圾回收 JavaScript 的内存管理是自动的,不能强制执行或者阻止执行 可达性 JavaScript中主要的内存管理概念是可达性. 什么是可达性? 定义一个对象 let user = { n ...

  4. javaScript 基础知识汇总（二）

    1.运算符 术语或者叫法:一元运算符.二元运算符.运算元(参数) let x=0; x=5+2; //5和2为运算元,“+” 为二元运算符: x=-x; //"-" 为一元运算符 ...

  5. javascript 基础知识汇总（一）

    1.<script> 标签 1) 可以通过<script> 标签将javaScript 代码添加到页面中 (type 和language 属性不是必须的) 2)外部的脚本可以通 ...

  6. javaScript 基础知识汇总 （十三）

    1.Class 在JavaScript中 calss即类是一种函数 基本语法 class Myclass{ constructor(){} method1(){} method2(){} method ...

  7. javaScript 基础知识汇总（七）

    1.数组 特点:数组是可以存储有序集合的对象. 声明: let arr = new Array();   let arr=[]; 大多数情况下我们使用第二种. let fruits = [" ...

  8. javaScript 基础知识汇总 （十）

    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...

  9. javaScript 基础知识汇总 （十一）

    1.柯里化和偏函数 偏函数 假如一个函数有两个参数,然后第一个参数我们调用的时候是确定的,那么我门就可以创建一个偏函数来简化参数传递的问题 示例 function mul(a,b){ return a ...

随机推荐

  1. Matlab代码备忘

    1.Matlab写入文件  set(hp1,'xdata',bbb(1,:),'ydata',bbb(2,:),'zdata',bbb(3,:)); M=size(bbb,2); name=strca ...

  2. SVN 多项目管理（强烈建议每个项目建一个库）

    Subversion的目录结构是很自由的,所有的规划都必须是你自己规定,考虑一个 subversion仓库的目录树,你可以把任何一个目录认定为一个项目,你可以只checkout这个目录下的所有文件进行 ...

  3. 学习OpenCV——Surf简化版

    之前写过一遍关于学习surf算法的blog:http://blog.csdn.net/sangni007/article/details/7482960 但是代码比较麻烦,而且其中还涉及到flann算 ...

  4. android 消息机制

    一.Android应用程序的主线程主要用于更新UI界面,并且主线程不能做耗时操作,否则会引起ANR:这种情况下需要开一个子线程来进行耗时操作,动作完成之后,子线程发消息给主线程通知其更新UI显示,常见 ...

  5. Hadoop实战5:MapReduce编程-WordCount统计单词个数-eclipse-java-windows环境

    Hadoop研发在java环境的拓展 一 背景 由于一直使用hadoop streaming形式编写mapreduce程序,所以目前的hadoop程序局限于python语言.下面为了拓展java语言研 ...

  6. html+css创建提示框

    看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...

  7. CentOS 更改yum源与更新系统

    FROM:http://www.cnblogs.com/lightnear/archive/2012/10/03/2710952.html [1] 首先备份/etc/yum.repos.d/CentO ...

  8. 1350. Primary Arithmetic

    Children are taught to add multi-digit numbers from right-to-left one digit at a time.  Many find th ...

  9. PetaPoco入门(二）

    1. Petapoco基本用法 1.1. 创建示例工程 首先创建一个工程文件,为了便于展示数据这里创建一个类型为:WindowsApplication的工程文件.命名为:PetapocoTest. 程 ...

  10. async和await浅析

    要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await,在此主要总结了以下三点: 只有在a ...