前端知识点及面试题总结

1、前端性能优化、前端技术架构、调试、前端安全性问题、前端兼容性问题、nodejs、移动端开发、HTML5/CSS3、正则表达式、web前端的瓶颈（兼容性、组件（框架）不够完善等）；

2、getElementByTagName返回一个伪数组：HTML Collection；

3、getElementById只能是document.getElementById,

createElement只能是document.createElement;

4、Nodelist也是一个伪数组；

5、getElementByClassName在IE8不好用；

4、正则表达式的两种方式： a、var reg = /pattern/;

b、 var reg = new RegExp('pattern');

注意：第二种方式可以传变量，而第一种方式不行。

5、constructor：构造器（String、Number...）:，也可以得到准确的构造函数。

Var a = 123;

a.constructor == Number 或者 typeof a == “number”;

6、elem.setAttribute（name,value）;会在dom结构里添加该属性；而elem[“aa”] = ‘bb’,则只是存到内存里，用property的方式获取，或者elem.aa获取

7、elem.CurrentStyle,是IE获取样式的方法；

document.defaultView.getComputedStyle(elem,false),标准浏览器下获取样式的方式。

8、Height：元素内容的高度；

Widht:元素内容的宽度；

fullHeight:获取元素完整的高度，包含：获取元素(不论是隐藏还是显示的元素)完整的高度，包含：内容的高度和border-width，padding-top、padding-bottom；

fullWidth:获取元素(不论是隐藏还是显示的元素)完整的宽度，包含：内容的宽度和border-width，padding-right、padding-left；

offsetWidth：包含内容的宽度和border-width、padding-right、padding-left，但是不能得到隐藏元素的宽度；这个属性并不是W3C的标准，但是浏览器对它支持的很好；

offsetHeight：包含内容的高度和border-width、padding-top、padding-bottom，但是不能得到隐藏元素的宽度；

clientWidth:(可视区域的宽度)document.documentElement.clientWidth或者document.body.clientWidth(IE下适用)；注意：document.documentElement是获取HTML根元素的；

clientHeight：可视区域（不包含滚动条，但包含padding）的高度；

innerWidth:可视区域的宽度;

outerHeight：？？？；

windowWidth:可视区域的宽度;

windowHeight:可视区域的高度;

scrollWidth：内容的实际宽度（可能带有滚动条，也会把真个内容的高度计算上）；

scrollHeight：内容的实际高度（可能带有滚动条，也会把真个内容的高度计算上）；

蓝色代表属性，黑色代表自己封装的方法（wichung-1.0.js:D:\wichung培训资料）,以下同上;

9、（display：none；）与（visibility：hidden；position：absolute；）的效果一样，空间都释放了；而单独使用visibility：hidden则只会隐藏，而不会释放空间；

10、left:elem.style.left;

top:elem.style.top;

offsetLeft:相对于已定位的父元素的left(可能会用上offsetParent：已定位的父元素);

offsetTop:;

scrollLeft:带有滚动条时才有意义的一个属性，指的是实际的left;

scrollTop:带有滚动条时才有意义的一个属性，指的是实际的top;

10、pageX属性是非IE的属性，不符合W3C标准，;

clientX属性各种浏览器都适用的;

 

offsetX是相对于目标元素来说的（IE下）

layerX是相对于目标元素来说的（非IE下）；

 

11、获取亲爹：elem.parentNode;elem.offsetParent:代表最近的已定位的父元素，有可能是亲爹；

12、Core DOM:;

XML DOM :;

HTML DOM:;

13、元素节点（类型：1,没有nodeValue）、属性节点（类型：2，有nodeValue）、文本节点（类型：3，有nodeValue）、注释节点；

14、elem.childNodes会得到元素的所有节点（空格也算）；

15、Elem.children（不符合W3C标准，但是各个浏览器支持的很好）会得到元素真正的孩子，不算空格；

16、elem.firstChild（会计算上空格）与elem.firstElementChild(，不会计算上空格，之算上真正的元素IE8及以下不支持)；previousSiblings&&previousElementSibling,nextSiblings&&nextElementSibling;

17、jQuery（“#div1”）.text()可以获取div1下的文本，包括div下子元素的文本都可以得到；原生的innerText属性在火狐（textContent可以用）不适用，存在兼容性问题；

18、事件：

a) 、标准下：addEventListener（‘click’,function(){},false）;removeEventListener（）为移除事件；

IE下：attachEvent(‘onclick’,function(){})，但是attach下的this不是指定的元素，而是window;detachEvent（）为移除事件；

19、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

GET方式：

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

 

 

 

POST方式（以下方式是在提交表单数据时常用的，也可以写成上面get方式的形式）：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

当readyState发生变化时，则会触发这个事件：

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

Data = xmlhttp.responseText;

//下面则进行对返回的数据data的操作。

    

    }

  }

 

几种状态：

readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。  0: 请求未初始化  1: 服务器连接已建立  2: 请求已接收  3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

查找常见的状态码（status）？？？？？

20、在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

21、Arguments代表的是实参，等于该参数，且可读可写；fn.length等于该函数形参的个数；

22、闭包（closure）：从表现来看,是在外部函数内有一个内部函数，且该内部函数调用了外部函数的局部资源，当外部函数执行后，该函数的局部资源不会被垃圾回收机制（GC）回收：

1、For(var i=0;i

   2、(function(index){

   3、aLi[index].onclick = function(){

   4、Alert(index);

};

})(i);

}

第四行中，index为内部函数（第二行）的局部变量；每次该函数调用（该函数会被调用aLi.length次）完后，都不会释放该函数的局部变量（index）；

缺点：内存泄露：

1、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。   

.....

23、跨域：（带src属性（script、img、link）的都可以加载外部资源，利用这个属性的特点去实现跨域）；

{主域与子域之间的跨域：在子域里document.domain = “qq.com(主域)”;}

{不同域之间的跨域(以下也称ＪＳＯＮＰ（ｊｓｏｎ　ｐａｄｄｉｎｇ填充）,需求：第三方平台)：

在a域名下有一个文件现在向b域名（IP：192.168.25.78）请求数据：

{

 

}

在b域名下的test项目下的test.php文件：

$name = $_GET[‘name’];

$sayHello = $name.’,hello’;

＄callback = $_GET[‘callback’];

echo $callback.‘(“‘.$sayHello.’”)’;

?>

24、异步加载JS，使用defer或者async属性,它会使浏览器在加载时略过（但是是在另一个进程去加载）该文件去加载其他的js文件；一般不能乱用，只有在该脚本计算量大且不着急用时才能用异步加载方式；

  

25、js中的类

prototype：一个类的原始的对象，通过原型下添加的任何方法，都会被实例化的对象继承；一个类中如果有this.sayHello方法，而且也有classA.prototype.sayHello。则会执行this.sayHello，这有关原型链在本类中找不到该方法，则一层一层网上找；

26、js中的继承

1）对象冒充：

function classA(sColor){//var classA = function(sColo){

this.color = sColor;

this.sayColor = function(){

alert(this.color);

};

}

function classB(sColor){

1、this.newMethod = classA;/*相当于this.newMethod =  function(){

this.color = sColor;//这个时候this是classB,而语法.color相当于给this添加了一个属性，这就相当于给classB添加了一个属性；sayColor方法也是这样添加到classB中了；

this.sayColor = function(){

alert(this.color);

};

}

;*/

2、this.newMethod(sColor);//调用之后才是真正的完成继承

3、delete this.newMethod;//这个时候已完成继承，所以newMethod已经没有作用了，就给删了

this.name = name;

}

上面第一二三行==classA.call(this,sColor);

2）prototype:prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。两种用途：一个是给类添加方法；另一个是继承【

classB.prototype = new ClassA();

classB.prototype.constructor = ClassB;//不写这句话则会导致classB实例化的对象的constructor成为classA；

 

】

27、call()和apply():只有函数才有这两个方法，与对象冒充等有关

28、事件冒泡、时间委托、事件捕获capture

javascript的typeof返回值有以下6种：

1.number（数字）;

2.string（字符串）;

3.boolean（布尔值）;

4.object（对象、数组和null）;

5.function（函数）;

6.undefined;

 

名称	复杂度	说明	备注
冒泡排序 Bubble Sort	O(N*N)	将待排序的元素看作是竖着排列的“气泡”，较小的元素比较轻，从而要往上浮
插入排序 Insertion sort	O(N*N)	逐一取出元素，在已经排序的元素序列中从后向前扫描，放到适当的位置	起初，已经排序的元素序列为空
选择排序	O(N*N)	首先在未排序序列中找到最小元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小元素，然后放到排序序列末尾。以此递归。
快速排序 Quick Sort	O(n *log2(n))	先选择中间值，然后把比它小的放在左边，大的放在右边（具体的实现是从两边找，找到一对后交换）。然后对两边分别使用这个过程（递归）。
堆排序HeapSort	O(n *log2(n))	利用堆（heaps）这种数据结构来构造的一种排序算法。堆是一个近似完全二叉树结构，并同时满足堆属性：即子节点的键值或索引总是小于（或者大于）它的父节点。	近似完全二叉树
希尔排序 SHELL	O(n1+￡) 0<￡<1	选择一个步长(Step) ,然后按间隔为步长的单元进行排序.递归,步长逐渐变小,直至为1.
箱排序 Bin Sort	O(n)	设置若干个箱子，把关键字等于 k 的记录全都装入到第k 个箱子里 ( 分配 ) ，然后按序号依次将各非空的箱子首尾连接起来 ( 收集 ) 。	分配排序的一种：通过" 分配 " 和 " 收集 " 过程来实现排序。
桶排序 Bucket Sort	O(n)	桶排序的思想是把 [0 ， 1) 划分为 n 个大小相同的子区间，每一子区间是一个桶。

冒泡排序算法：

 function bubbleSort(arr){        var n=arr.length; //获取数组的长度，即有n个数在排序        var temp=null; //定义一个临时变量，交换数据用        for(var i=0; iarr[j+1]){ //如果a[j]>a[j+1]则交换位置                    temp=arr[j];                    arr[j]=arr[j+1];                    arr[j+1]=temp;                }            }        }        return arr; //返回排好序的数组    }

快速排序：

   function quickSort(arr){        var len=arr.length;//获取arr的长度        if(len<=1){//如果arr的长度小于等于1则直接返回arr            return arr;        }        var pIndex=Math.floor(len/2);//获取基准点的索引下标        var pivot=arr.splice(pIndex,1);//用splice方法获取基准点pivot=[arr[pIndex]],此时的arr为去除第pIndex项之后的剩余项;        var left=[];        var right=[];        for(var i=0; i

插入排序：

 function insertSort(arr){        var temp=null;//定义一个临时变量保存要插入元素的值        for(var i=1; i=0){//如果要插入的元素小于已排好序的元素并且没有到已排好数组的开始位置                    arr[p+1]=arr[p];//把大于要插入元素(temp)的已排好序元素位置往后挪一位                    p--;//从后往前遍历已经排好序的元素                }                arr[p+1]=temp;//把要插入的元素插入到已排好序的数组中,索引位置为p+1            }         }        return arr;//返回已排好序的数组    }

选择排序：

function selection_sort(unsorted){

    for (var i = 0; i < unsorted.length; i++){

        var min = unsorted[i], min_index = i;

        for (var j = i; j < unsorted.length; j++) {

            if (unsorted[j] < min){

                min = unsorted[j];

                min_index = j;

            }

        }

        if (min_index != i){

            var temp = unsorted[i];

            unsorted[i] = unsorted[min_index];

            unsorted[min_index] = temp;

        }

    }

    return unsorted;

}

希尔排序：

#include #include void swap(int *p1, int *p2){      int temp;      temp=*p1;      *p1=*p2;      *p2=temp;}void shell(int *a,int d,int len){       int i,j;              for(i=d+1;i=i && j=1)       {            shell(a,d,len);            d=d/2;       }}

 

 

归并排序：

int merge(int start, int mid, int end)
{
    int num1[mid - start + 1];
    int num2[end - mid];    
    int i = start;
    int j = mid + 1;
    while(i <= mid){
        num1[i - start] = num[i];    
        i ++;
    }
    while(j <= end){
        num2[j - mid - 1] = num[j];
        j ++;    
    }
    
    i = 0; 
    j = 0; 
    int k = start; 
    while(i < mid - start + 1 && j < end - mid){
        if(num1[i] < num2[j]){
            num[k ++] = num1[i];    
            i ++;
        }    
        else{
            num[k ++] = num2[j];    
            j ++;
        }
    }
    while(i < mid - start + 1){
        num[k ++] = num1[i ++];    
    }
    while(j < end - mid){
        num[k ++] = num2[j ++];    
    }
}

void mergesort(int start, int end)
{
    if(start < end){
        int mid = (start + end) / 2;
        mergesort(start, mid);
        mergesort(mid + 1, end); 
        merge(start, mid, end);    
    }
    return ;
}

 

归并排序：O(n)

排序法	平均时间	最差情形	稳定度	额外空间	备注
冒泡	O(n2)	O(n2)	稳定	O(1)	n小时较好
交换	O(n2)	O(n2)	不稳定	O(1)	n小时较好
选择	O(n2)	O(n2)	不稳定	O(1)	n小时较好
插入	O(n2)	O(n2)	稳定	O(1)	大部分已排序时较好
基数	O(logRB)	O(logRB)	稳定	O(n)	B是真数(0-9)，R是基数(个十百)
Shell	O(nlogn)	O(ns) 1	不稳定	O(1)	s是所选分组
快速	O(nlogn)	O(n2)	不稳定	O(nlogn)	n大时较好
归并	O(nlogn)	O(nlogn)	稳定	O(1)	n大时较好
堆	O(nlogn)	O(nlogn)	不稳定	O(1)	n大时较好

二叉树遍历：

 

先序遍历：

例如：遍历已知二叉树结果为：A->B->D->G->H->C->E->F

中序遍历：（左大子的左子：从上往下写->左大子的右子：从上往下写->根节点->右大子的左子：从上往下写->右大子的右子：从上往下写）

例如遍历已知二叉树的结果：B->G->D->H->A->E->C->F

后序遍历：

例如遍历已知二叉树的结果：G->H->D->B->E->F->C->A

层次遍历：

从上到下，从左到右遍历二叉树的各个结点(实现时需要借辅助容器)；

例如遍历已知二叉树的结果：A->B->C->D->E->F->G->H

 

29、解决跨域问题：第一题js跨域问题解决办法：1、document.domain+iframe的设置；2、动态创建script；3、利用iframe和location.hash；4、window.name实现的跨域数据传输；5、使用HTML5 postMessage；6、利用flash； 7、利用window剪贴板

30、说说nodejs的异步I/O是什么？面对负责的业务需求，多次回调的node代码场景，你有什么看法，如何让代码更好阅读和维护？

 

1.简单来讲，nodejs中没有多线程机制，那么是如何实现高并发访问的呢，正是由于异步I/O，所谓异步I/O是指nodejs可以以非阻塞的访问去执行代码，然后使用回调的方式来继续完成代码完成后续的工作。2.nodejs在复杂的业务情况下，会大量的产生回调的代码，并且一层层嵌套，会相当的复杂，难于维护，所以如果有可能应该尽可能的多封装一些通用好用的api接口，减少应用层开发者的回调函数数量，比如mongoose就是一个好的对native mongodb的封装。

31、为满足商业项目的开发需要，你要从一堆的开源产品里做技术选型，请问需要考虑哪些因素？

1.最重要的是要有丰富完善的开发文档，如果没有，你会很蛋疼

2.要有较多的成功案例，如果没有，你可能会成为小白鼠

3.要有活跃的社区，如果没有，碰到问题没人帮你，岂不很孤单？

4.要有大公司支持，这样的话以后可能被收购，会有更强大的支持

32、面向PC端和移动端的网页性能优化技术有哪些异同：

改善网站性能的主要策略并没有因为从PC变成手机或者平板设备而有变化，只是会参杂一些小的策略。不论在PC还是在移动浏览器上，页面展示需要的时间里，只有20%是用来读取页面的HTML的。剩下的80%是用来加载额外的像样式表、脚本文件、或者图片这样的资源和执行客户端的程序。

三个主要的改善性能的策略是：

•减少每个页面需要获取额外资源的HTTP请求数

•减少每个请求加载的大小

•优化客户端执行的优先级和脚本执行的效率片这样的资源和执行客户端的程序。

三个主要的改善性能的策略是：

•减少每个页面需要获取额外资源的HTTP请求数

•减少每个请求加载的大小

•优化客户端执行的优先级和脚本执行的效率

由于移动网络通常比桌面机器的网络慢，所以减少请求数和请求加载量是非常

重要的。由于移动端的浏览器解析HTML和执行JavaScript的效率比桌面PC低，

所以优化客户端程序也是非常关键的。另外，移动端浏览器的缓存大小比桌面PC低，所以需要有方法能重复利用本地的缓存资源。

33、请描述用户在浏览器中从输入http://www.taobao.con开始发生了什么？针对每个过程我们应该如何优化？

1.浏览器查找域名的IP地址, 减少DNS查询

2.浏览器给web服务器发送一个HTTP请求，减少http请求数量

3.服务器“处理”请求，服务器端应尽可能优化来提高处理和响应速度，比如数据库访问

4.服务器发回一个HTML响应，避免返回特别大的数据

5.浏览器开始显示HTML，将影响见面渲染速度的代码，如果加载的js，放在html的结束等

34、//在网页开发过程中，往往需要进行调试工作，假如一个线上地址（http://testcdn.com/index/index.js）出现了问题，请列出你所知道的几种快速进行调试的方式，边谈谈这几种方式的原理和优缺点？

// 1. 利用alert和console.log函数，优点简单，最简单的环境下也可以使用，缺

// 点效率低，不能深度跟踪

// 2. 利用chrome webdev和firefox firebug，优点简单强大

// 3. 利用webstrom这样的开发工具中的调试工具，优点强大，缺点对工具要

// 求较高

// 网络答案：

// 五种前端开发必备的调试技术。

// Weinre移动调试

// 优点：实现pc和手机的socket通信，从而实现实时调试。

// 缺点：每次都要在调试的页面引入js，安装麻烦

// DOM 断点

// 优点：DOM断点是一个Firebug和chrome DevTools提供的功能，当js需要操作打

// 了断点的DOM时，会自动暂停，类似debugger调试。

// 缺点：Firebug中，DOM断点可以在Script> Breakpoints里面看到

// chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到

// debugger断点

// 需要调试js的时候，我们可以给需要调试的地方通过debugger打断点，代码执

// 行到断点就会暂停，这时候通过单步调试等方式就可以调试js代码

// native方法hook

// 缺点：这种方法不保证在所有浏览器中有效，比如ios的safari隐私模式下，我

// 们就不可以修改localStorage方法

// 远程映射本地调试

/*

优点：当线上某个js/css出现问题，我们可以用代理的方式，将远程的文件代

理到本地来实现远程映射调试。其实除了这个功能，还可以作为抓包工具，这

在移动端是很重要的。

*/

35、clearfix什么意思？

清除浮动的方式：a、overflow：hidden；

b、clear

c、clearfix

对比：clearfix 主要是用在浮动层的父层，而 clear主要是用在浮动层与浮动层之间，和浮动层同 一级，如果想要撑开父层的高度，clear 就要 放在最后。

    

用 clear 清除浮动

    

        

        

        

    

    

用 clearfix 清除浮动