前端面试知识点个人总结

前言：

记录个人的前端知识点

HTML：

A:Doctype作用？标准模式与兼容模式各有什么区别?

Q:

作用：!DOCTYPE处于html 标签之前。告知浏览器用什么文档标准解析这个文档。（注：DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。）

区别：标准模式：浏览器以最高标准运行。兼容模式：页面以向后兼容显示,防止站点无法工作。

A:html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题？

Q:

新特性： 

1）多样的表单控件：包括calendar、date、time、email、url、search等

2）语意化更好的内容元素：article、footer、header、nav、section标签

3）更支持图像、媒体：增加canvas、video 、audio 元素

4）缓存机制：增加localStorage 、sessionStorage 

5）新技术：Web Workers多线程解决方案、WebSocket接口双向通信、Geolocation地理定位接口等

处理兼容问题：通过document.createElement方法创建标签并添加标签默认的样式

A:cookies，sessionStorage 和 localStorage 的区别

Q:

1）时效性：sessionStorage 只存在当前浏览窗口，关掉即清除缓存，cookies和 localStorage一直存在本地

2）作用域：sessionStorage 只共享于当前浏览窗口，cookies和 localStorage共享于所有同源窗口

3）交互性：cookie可以浏览器和服务器间来回传递，而sessionStorage和localStorage仅在本地保存

4）存储大小：cookie数据不能超过4k，并且始终在同源的http请求中携带,所以cookie只适合保存很小的数据，如会话标识;sessionStorage 和localStorage接近5M

CSS

A:CSS的元素分类

Q:

1）块级元素：div,p,h1,ul,li;

2）行内元素 : span>,a,input，img;

A:CSS隐藏元素的几种方法

Q:

1)Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

2)Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

3)Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

A:CSS清除浮动的几种方法

Q:

1)使用带clear属性的空元素

2)使用CSS的overflow属性

3)使用CSS的:after伪元素

A:CSS居中

Q:

1)内联元素

[1]水平居中

<1>行内元素:text-align:center;

<2>Flex布局：display:flex;  justify-content:center;

[2]垂直居中

<1>行内元素

{1}单行文本:height = line-height;

{2}多行文本: display:table-cell;  vertical-align:middle;

<2>Flex布局：display:flex; align-items:center;

2)块级元素

[1]水平居中

<1>定宽块级元素：左右 margin 值设为 auto

<2>不定宽块级元素：display:flex; justify-content:center;

[2]垂直居中：

<1>父元素设置：display:flex; align-items:center; （或者利用display:table-cell属性使内容垂直居中）

<2>对需要居中的元素设置：position:abosolute;top:50%;left:50%;transform:tanslate(-50%,-50%);（tanslate -50%是往回调居中元素本身一半的宽度和高度）

A: position的值， relative和absolute分别是相对于谁进行定位的？

Q:

absolute:相对于position不是static的父元素进行绝对定位

fixed:相对于浏览器窗口或 frame 进行绝对定位

relative:相对于其原来的位置进行偏移

A:页面导入样式，link和@import区别

Q:

1)载入：link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

2）LINK是XHTML标签，没有兼容问题，并且除了加载CSS，还有定义rel连接属性等作用

A:CSS的盒子模型

Q:盒模型： 内容(content) + 填充(padding)  +  边框(border) + 边界(margin).

A:CSS3 box-sizing 属性

Q:

1)content-box: width和height属性只针对content

2)border-box: width和height属性针对content + padding + border

3)inherit：继续父元素的box-sizing属性

A:CSS3新特性

Q:

1）非动画：border-radius、box-shadow、text-shadow等

2）动画：transform:rotate、scale、translate、skew;//旋转,缩放,定位,倾斜

Javascript

A:javascript的typeof返回哪些数据类型

Q:六种数据类型：Ｏbject function string number boolean underfind;

附： 五种基本类（引用类型）：object array date regexp function

三种特殊类（引用类型）：string number boolean

两个内置对象：global math

A:例举3种强制类型转换和2种隐式类型转换?

Q:

强制：parseInt toString Boolean

隐式：isNan、==

A:数组方法pop() push() unshift() shift()

Q:

push() 尾部增加 pop() 尾部删除 ，类似于栈（叠箱子） 后进先出

unshift() 头部增加 shift() 头部删除 ，类似于队列 先进先出

A:get 和post方式的区别

Q:

本质：Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求

区别：

1）传参机制：get是把参数添加到action指向的url后面，post是将参数放置在HTML HEADER的包体内

2）安全性：由于传参机制的区别，post的安全性会高于get

3）服务器端获取值的方法：get方式提交的数据，服务器端使用request.QueryString获取变量的值;post方式提交的数据，服务器端使用request.Form获取数据

总结：查询统计的时候，使用get方式；数据的添加，修改或删除操作时，使用post方式

A:call和apply

Q:

作用：改变某个函数的某个方法执行的作用域（或者说是改变其THIS的指向）

区别：参数不同

A:ajax请求时，如何解释json数据

Q:使用eval parse,鉴于安全性考虑 使用parse更靠谱(eval对数据的格式要求不高)

A: 事件委托

Q:利用事件冒泡的原理，通过绑定父元素的事件，使其子元素也绑定同样的事件

A:闭包

Q:简单讲即函数里面的函数，里面的函数拥有作用域链，所以能访问外部的函数。

特点：闭包能避免全局变量污染，也由于其变量循环引用的机制，会使得其变量不会被回收

A:添加 删除 替换 插入到某个节点的方法

Q:

添加节点：obj.appendChild

删除节点：obj.removeChild
替换节点：obj.replaceChild

插入节点：obj.insertBefore

A:javascript的同源策略

Q:一段脚本只能读取来自于同一来源的窗口和文档，同一来源指的是主机名、协议和端口号的组合

A:编写一个b继承a的方法

Q:
父类：

// 定义一个动物类
function Animal (name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

子类：（组合继承）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

A: 阻止事件冒泡

Q:

function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else

        window.event.cancelBubble=true //兼容IE
}
return false

A:阻止默认事件

Q:

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函数器默认动作的方式  
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默认浏览器动作(W3C)  
    e.preventDefault(); 
  }  
} 

A:下面程序执行后弹出什么样的结果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

Q: 0 和 30（原因：执行函数时会先在实例里面找，再到原型里面找）

A:谈谈This对象的理解

Q:this指的是调用函数的那个对象。
函数声明时this指向：全局对象Global。 

被调用时this指向：调用的对象。

A:下面程序的结果

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

Q:

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

考点：

1）区分fun函数和fun属性

2）闭包的变量不会被回收

A:下面程序的输出结果

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

Q:Goodbye Jack
考点：声明提升，声明操作在编译阶段进行，声明操作会被提升到执行环境的顶部，值是undefined(表示未初始化)

A:自动化构建工具（gulp）和打包工具（webpack）

Q:

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作

1.构建工具 

2.自动化

3.提高效率用
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

1.打包工具 

2.模块化识别 

3.编译模块代码方案用

A:JS模块化

Q:

概念:一个模块就是实现特定功能的文件，类似JAVA的包,用来隔离、组织复杂的JavaScript代码,通过封装部分JS文件组成一个模块,需要的时候直接导入

解决问题:避免全局变量的污染,组织代码

其他:

A: 如何解决跨域问题

Q:

1)JSONP:json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

原理:动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

实现:

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

2)window.name

原理:window对象有一个name属性，该属性有一个特征：即窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，所有可以以windows.name为中枢跨域传输数据

3)CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttprequest请求，从而克服了AJAX只能同源使用的限制。

A:XML和JSON的区别？

Q:JSON相对于XML，体积小，速度快，易解析，但描述性没XML好

A:创建ajax过程

Q:

1)创建XMLHttpRequest对象

2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及是否异步处理信息.【XMLHttpRequest.open(method,url,async)方法】

3)设置响应HTTP请求状态变化的函数.【XMLHttpRequest.onreadystatechange方法】

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

4)发送HTTP请求.【XMLHttpRequest.send()方法】

5)获取异步调用返回的数据【XMLHttpRequest.responseText 或 XMLHttpRequest.responseXML 】

A:sql注入原理

Q:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

A:XSS

Q:

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。

比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；

或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，就会把信息传送到攻击者的服务器中。

A:前端工程的价值

Q:

1)交互：提高用户的体验

2)兼容：使网页能在多种浏览器，多种设备上面展示

3)速度：优化网页加载速度，提高用户浏览速度

A:性能优化问题

Q:

1)代码层面：避免使用css表达式，避免使用高级选择器，通配选择器，少用全局变量。

2)缓存利用：使用异步加载，并且JS文件放在底部，cookies添加Expire

A:快速排序

Q:

相当于二分法：

1）在数据集之中，找一个中间点

2）建立两个数组，分别存储小于中间点的和大于中间点的

3）利用递归进行下次比较

A:new操作符具体干了什么呢?

Q:

1)创建一个空对象，该对象继承构造函数的原型

2)对象继承构造函数的属性和方法

3)this指向该对象

A:编写一个方法 求一个字符串的字节长度

Q:

 function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

A:attribute和property的区别

Q:attribute是标签的属性，property是对象的属性