前端面试题复习篇（一）

1.什么是IDE？请写出平时常用的几种IDE.

 IDE = 编辑器  

  sublime , webstorm ,vs code

2.行内元素有哪些？块级元素有哪些？行内元素如何转化为块级元素？

   行内元素：a,strong,span ,img,label,button,input,textarea

   块级元素 : header,form ,ul ,ol,table,div, canvas ,video

   display:block;

2.前端页面有哪三层构成，分别是什么？作用是什么？

结构，表现，和行为

结构-html

表现-css

行为-js

3.在很多浏览器中body都有默认的margin ，这个值是多少呢？

8px

3.CSS的基本语句构成是？

*{margin:0;padding:0}

选择器{样式：样式值}

4.请介绍一下主流浏览器以及他们相应的内核，请介绍一下浏览器分为哪几个部分，内核呢？

 IE            =>    trident

Chrome    =>    webkit/blink

Safari        =>    webkit

Firefox      =>    Gecko

Opera       =>    presto

浏览器分为 shell 和内核

内核分渲染引擎和js引擎

5.标签上的title 与 alt 属性的区别是什么？

title  提示的作用

alt  一般作用在img标签上，img读取失败后会显示alt的内容

6.你如何对css 和 js 进行优化？

css

1.代码去重 2代码压缩  3 精灵图合并  4 css文件合并

js 

1.尽可能少声明变量 2 尽量减少闭包的使用 3 尽量少用for  in 循环 

4 尽量少使用DOM操作  5  减少代码重用  6 代码压缩，文件合并

7.javascript的typeof返回哪些数据类型？

function  string  number  object  undefined   boolean   symbol

8.事件绑定和普通事件有什么区别？

普通添加事件不支持添加多个事件，最下面的事件会覆盖上面的，

而事件绑定方式可以添加多个事件。

9.请举例说明浏览器的兼容写法？

-webkit-        safari,谷歌浏览器等使用webkit引擎的浏览器

-moz-            火狐等使用Gecko浏览器引擎的浏览器

-ms-               IE

-o-                  早期的opera浏览器 

使用window.navigator.userAgent 判断游览器型号

10.ajax请求时,如何解释json 数据？

JSON.parse         string->json

JSON.stringify     json  ->string

11.ajax请求的时候get 和post方式的区别

请求和发送数据的

get 内容都在地址栏里     不安全   32k

post 内容加密                比get要安全一点点   2g

12.call和apply 和bind 的区别？

都是改变this指向

call 和 apply 都是可以把函数直接调用

call -> 从第二个参数 开始 就是指的调用函数的形参

apply ->第二个参数  是一个数组，数组里面就是调用函数的形参

bind 不会立即调用函数

13.闭包是什么，有什么特性，对页面有什么影响？

1.子函数使用父函数变量的行为

2.子函数可以延长父函数变量的生命周期

3.可以扩展函数的空间

过多的使用闭包会造成内存溢出

14.ajax可以跨域吗？

ajax 不可以跨域

跨域可以用jsonp   iframe

15.请解释jsonp的原理，以及为什么不是真正的ajax?

jsonp 利用 script标签

并没有使用 XMLhtttprequest();

16.如何阻止事件冒泡？

stopPropagation();

cancelBubble = true;

17.如何查找节点？添加节点？删除节点？

document.getElementById()
		 getElementsByTagName();
		 getElementsByClassName();
		 getElementsByName();
		 querySelector();
		 querySelectorAll();
		 children;
		 parentNode;
		 firstChild();
		 lastChild();
		 nextChild();

		 添加
		 appendChild();
		 insertBefore();
		 insertAdjacentElement();
		 beforeBegin / 放入他前面
		 afterBegin ／ 放去里面第一个
		 beforeEnd  ／ 里面最后一个
		 afterEnd   ／ 放入他后面

		 innerHTML
		 outerHTML 

		 删除 
		 innerHTML 
		 outerHTML
		 removeChild()
		 remove();

18.请编写一个数组去重的方法？

	var str = [1,2,2,3,4,4,5,5,6];
		Array.prototype.unique =function (){
			var arr=[];
			for(var i = 0;i < this.length;i++){
				if(arr.indexOf(this[i]) != -1){
			}else{
				arr.push(this[i])
               }
           }
          return  arr;
         }
console.log(str.unique());

19.请编写一个字符串的方法，可以告诉我分别里面字母是多少个？

  var arr='dddddddrrdssssss';
 String.prototype.strNum = function (){
	 var len=this.length
	 var json={};
	  for(var i =0 ; i<len ;i++){
		  if(json[this[i]]){  
			json[this[i]]++;
		  }else{
			json[this[i]]=1;
		  }
	  }
	  return json;
  }
  console.log(arr.strNum())

20.cookie, sessionStorage , localeStorage 的区别？

cookie                   4kb     临时存储                    所有同源窗口共享              每次http请求中携带

localeStorage        5mb    永久存储                     所有同源窗口共享             本地保存

sessionStorage      5mb    关闭浏览器消失          不在不同浏览器中共享         本地保存

21

var f = (function f() {
    return "1";
}, function g() {
    return 2;
})();
typeof f;    // number

 此处是一个立即执行函数，但是在括号里面包含了2个函数，并用逗号隔开。我们可以理解为如下的例子

var a = (1,2,3,4)
console.log(a)  // 4

例子可以看到a为4，说明命名空间中用逗号隔开返回值为最后一个。所以上面的题目是返回了第二个函数，第二个函数又返回了数字2，所以答案为number