面试题整理

最新推荐文章于 2024-04-11 06:11:25 发布

原创最新推荐文章于 2024-04-11 06:11:25 发布

· 299 阅读

0 ·

版权

1.谈谈对前端安全的理解，有什么，怎么防范

安全问题主要有xss 、CSRF攻击

xss：跨站脚本攻击攻击者将恶意代码植入到提供给其他用户使用的页面中，可以理解为一种javascript代码注入

防范措施：

1.过滤用户的输入输出

2.使用cookie 的httpOnly属性加上这个属性的cookie js无法进行读写

在浏览器中的document对象中，就储存了Cookie的信息，而利用js可以把这里面的Cookie给取出来，只要得到这个Cookie就可以拥有别人的身份了。

http Only属性一旦被设置，那么在document中就看不到了，而在浏览网页的时候不会有任何影响。

3.使用innerHTML或者document.write的时候需要对用户输入关键字符进行过滤与转义

CSRF：网站的一些提交行为被黑客利用

防范措施：

1.检测http referer是否为同域名

2.避免登录的session长时间存储在客户端中

3.关键请求使用验证码或者token机制

2.使用箭头函数需要注意的地方

当要求动态改变上下文的时候就不能使用箭头函数例如定义字面量方法、定义原型方法、定义事件回调函数、定义构造函数

/*补充定义方法

先看几种常用的定义方式：

function func1([参数]){/*函数体*/}
var func2=function([参数]){/*函数体*/};
var func3=function func4([参数]){/*函数体*/};
var func5=new Function();

用构造器创建对象

/*function Person(name, age) {
this.name = name;
this.age = age;
}
var p = new Person('lily', 20);*/

https://zhuanlan.zhihu.com/p/26540168

3.webpack.load原理

loaders 是使用在app源码上的转换元件

他们是使用node.js运行的把源文件作为参数返回新的资源函数

4.es6 let const

let是更完美的var

1.let声明的变量拥有块级作用域仍然具有变量提升的特性但不会盲目提升

2.let声明的全局变量不是全局对象的属性不可以通过window.变量名访问

3.形如for（let x..）的循环在每次循环时会为x创建新的绑定

4.let声明的变量直到控制流到达该变量的被执行的代码时才会装载，在到达之前使用该变量都会报错

以下是控制流关键字。

BEGIN...END WAITFOR

GOTO WHILE

IF...ELSE BREAK

RETURN CONTINUE

const定义常量值不可以重新赋值但如果const定义的一个变量可以改变变量属性

const OBJ={"a":1,"b":2};OBJ.a=3;OBJ={};// 重新赋值，报错！console.log(OBJ.a);// 3
作者： Dunizb
链接：http://www.imooc.com/article/20319
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作！

const OBJ = {"a":1, "b":2};

OBJ.a = 3;

OBJ = {};// 重新赋值，报错！

console.log(OBJ.a); // 3

5.css3的box-sizing的作用

设置css的盒模型为标准模型或者ie模型

标准模型的宽度只包括content ie模型还包括padding和border

box-sizing三个值

content-box 默认值 width只计算content的

border-box 将boder和padding计算到width中

padding-box 将padding计算到width中

6.说说html5标签语义化和seo

代码语义化有利于seo 搜索引擎很容易读懂网页表达的意思例如文本模块需要大标题合理利用h1-h6 列表使用ul ol ,重要的文字使用strong 等等

7.git命令如何批量删除分支

git branch | grep ‘branchName’ | xargs git branch -D 这条命令的意思是从分支列表中匹配到指定的分支然后一个一个分成小块传递给删除分支的命令最后再删除

8.创建对象的三种方式

第一种字面量

var o1= {name：‘o1’}；

var o2 = new Object（{name：‘o1’}）；

第二种通过构造函数

var obj =function （name）{

this.name = name;

}

var o = new obj('zhangsan');

第三种 object.creat

var p = {name ：‘ p‘’}；

var o = object.creat（p）；

9.js实现继承的几种方式

1.借用构造函数实现继承

function Parent1 （）{

this.name = “”parent1“”；

}

function Child1 （）{

Parent1.call（this）；

this.type = “child1”

}

缺点是child1并没有继承parent1的原型对象只是部分继承

2.借用原型链实现继承

function Parent2 （）{

this.name = "parent2";

this.play = [1,2,3];

}

function Child 2 (){

this.type = "child2"

}

Child2.prototype = Parent2();

缺点：原型对象的属性是共享的

var s1 = new Child2();

s1.colors.push("black");

var s2 = new Child2();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (4) ["red", "blue", "yellow"，“black”]
s1s2两个实例共享了属性

3.组合式继承

function Parents3（）{

this.name = "parent3;

this.play = [1,2,3];

}

function Child3(){

Parent3.call(this);

this.type = "child3";

}

Child3.prototype = Object.creat(Parent3.prototype);

Child3.prototype.constructor = Child3;

http://www.imooc.com/article/20162

10.浏览器渲染原理

①html被解析成domtree css被解析成css rule true

②将dom tree 和css rule true 整合成render tree

③通过显卡画在屏幕上

11.前端路由

什么是路由：根据不同的url地址显示不同的页面和内容

使用场景：单页应用因为是单页应用基本上是前后端分离所以后端不会给前端提供路由

实现路由的方法：①html5新增的history api

history.pushState 和history.replaceState 两个api都会操作浏览器的历史记录而不会引起页面刷新

②hash 根据监听哈西变化触发的事件hashChange 我们用window.location 处理哈西的时候不会重新渲染页面而是当做新页面加载到历史记录中，这样我们就可以再hashchange事件中注册ajax从而改变页面内容

优点：后端路由每次访问新页面都会向服务器发送请求然后服务器响应请求这个过程肯定又延迟前端路由访问一个新页面只用改变一下路径没有网络延迟对用户体验有相当大的提升

缺点：使用浏览器前进后退也会发送请求没有合理利用内存

12.script标签的defer async区别

defer是HTML解析完才会执行如果有多个按照加载次序依次执行

async在加载完后立即执行如果有多个执行顺序与加载顺序无关

13.同源与跨域

什么是同源策略：限制从一个源加载的文档与脚本与另一个源交互，用于隔离潜在的恶意文件

同源：主机名协议端口号必须相同

跨域通信的几种方法：

其实正统的跨全域的解决方法大致也就，JSONP,Access Control和服务器代理这么三种
作者：慕斯蛋糕糕
链接：http://www.imooc.com/article/7541
来源：慕课网

其实解决跨域问题的也就jsonp 、服务器代理、html5中的postMessage、CORS

JSONP原理：利用scirpt的异步加载特性实现给服务端传一个回调函数服务端返回一个以传过去的回调函数为名的js代码

14.原型与闭包

原型：原型是一个普通对象，所有对象都有原型除了object 原型能存储方法构造函数创建的对象可以引用原型中的方法

查看原型：使用__proto__ es6推荐使用Object.getPrototypeOf（）；

闭包：当一个内部函数被其外部函数之外的变量引用时就形成了闭包

创建闭包：函数作为返0回值函数作为参数传递

闭包的特性：函数嵌套函数函数内部可以引用函数外部的参数和变量参数和变量不会被垃圾回收机制回收

闭包的作用：当我们需要定义一些变量希望这些变量一直保存在内存中但又不会污染全局变量时，就需要闭包

闭包缺点：常驻内存会增加内存使用量使用不当造成内存泄漏也就是无法销毁驻留在内存中的元素

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551344&idx=1&sn=f6493bc7d3305139fae7c9059d52e846&chksm=8025a1b1b75228a711eb8089ebd19802fff51eb1b16ee00e3fa70401ffde664fc3e0173bb8f3&mpshare=1&scene=1&srcid=1014PQeGkxJBchXg2fpatR4W#rd

补充垃圾回收机制：

当一个变量不再被引用的时候就会被垃圾回收当两个变量相互引用但不被第三个变量引用的时候这俩个相互引用的变量也会被回收

15.错误监控

前端错误分类：即时运行错误（代码错误）、资源加载错误

错误捕获方式：

即时运行错误：try ...catch window.onerror

资源加载错误：object.onerror、 performance.getentries（）

跨域js资源错误可以捕获吗？错误显示什么？怎么解决

可以/显示script error /

①为script添加crossorigin属性 ②设置js资源响应头 Access-cotrol-allow-orgin：*

上报错误的基本原理：采用ajax通信方式采用img对象上报

16.DOM事件

DOM 0级事件：elment.onclick = function (){};

DOM 2级事件：element.addEventListener('click',function(){});

DOM事件模型：指的是冒泡和捕获

DOM事件流：捕获阶段->目标阶段->冒泡阶段

事件捕获流程：window -》document-》document.elmenent->body-》...》目标对象

event常见的应用：event.stopPropagation() event.preventDefault event.currentTarget() 返回绑定事件的元素 event.target返回触发事件的元素 event.stopImmedieatPropagation阻止剩余事件处理函数并阻止冒泡不接受任何参数

如何自定义事件：

//document 上绑定自定义事件
  document.addEventListener('oneating',function (event) {
      alert(event.name+ ','+event.message);
  },false);

  //创建event实例

var event = document.createEvent('HTMLEvents');

//3个参数：事件类型是否冒泡是否组织浏览器默认行为 event.initEvent('oneating',true,true); //属性 event.name = 'haha'; event.message = '99岁'; //触发自定义事件 document.dispatchEvent(event);

var eve=newEvent('自定义事件名');ev.addEventListener('自定义事件名',function(){ console.log('自定义事件')});ev.dispatchEvent(eve);
作者： Dunizb
链接：http://www.imooc.com/article/20319
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作！

17.本地建立的http server 为什么只能在wifi上访问

没有公网ip 所以不能被外网访问只是局域网看见

18.回流与重绘

回流
对于DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的）来计算并根据计算结果将元素放到它该出现的位置，这个过程称为回流。

重绘
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为重绘。

什么情况下会触发回流和重绘？

DOM元素的添加、修改（内容）、删除（回流+重绘），仅修改DOM元素的字体颜色（只有重绘，因为不需要调整布局），回流一定触发重绘，但是重绘不一定触发回流。

如何避免触发回流和重绘

先将元素从document中删除，完成修改后再把元素放回原来的位置，如果需要创建多个DOM节点，可以使用creatdocumentFragment创建完后一次性的加入document

19.数组去重

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651550928&idx=1&sn=0912e56c7ccbb68cf36562e723e29da0&scene=1&srcid=0612ekFt6xkwpwwFhCDSPKnM#rd

20.深拷贝与浅拷贝

浅拷贝是只复制指向某个对象的指针而不是复制对象本身新旧对象共享一块内存

深拷贝是创建一个一模一样的对象新旧对象不共享内存修改不会相互影响

浅拷贝

var obj1 = { a: 10, b: 20, c: 30 };

var obj2 = obj1; obj2.b = 100;

console.log(obj1); // { a: 10, b: 100, c: 30 } <-- b 被改到了

console.log(obj2); // { a: 10, b: 100, c: 30 }

深拷贝

var obj1 = { a: 10, b: 20, c: 30 };

var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };

obj2.b = 100;

console.log(obj1); // { a: 10, b: 20, c: 30 } <-- b 沒被改到

console.log(obj2); // { a: 10, b: 100, c: 30 }
实现深拷贝的方法

①如上手动复制

②es6提供了一个Object.assign

var obj1 = { a: 10, b: 20, c: 30 };

var obj2 = Object.assign({}, obj1);

obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- 沒被改到

console.log(obj2); // { a: 10, b: 100, c: 30 }

③转成JSON再转回来

先用JSON.stringify （）转为字符串再用JSON.parse转回来缺点是只有JSON格式的对象才能这么用

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

④jquery中提供了$.extend

var $ = require('jquery');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);
// false

⑤递归实现

function clone( o ) {

var temp = {};

for( var k in o ) {

if( typeof o[ k ] == 'object' ){

temp[ k ] = clone( o[ k ] );

} else {

temp[ k ] = o[ k ];

}

return temp;

}

⑥

lodash

另外一个很热门的函数库lodash，也有提供_.cloneDeep用来做 Deep Copy。

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

https://mp.weixin.qq.com/s/FFp56h9MnMKK4OM0BjDd1Q
https://segmentfault.com/a/1190000006811354

21.如何快速合成雪碧图

gulp ：gulp-css-spriter

webpack：optimize-css-assets-webpack-plugin

go！png

22.代码优化

html优化：

①代码语义化

②减少iframe

③避免重定向

css优化：

①布局代码写前面

②删除空样式

③不滥用浮动、字体

④选择器性能优化

⑤避免使用id写样式

js优化：

压缩减少重复代码

图片优化：使用雪碧图使用webP格式

减少DOM操作：

缓存已经访问过的元素

“离线”更新节点将他们添加到树中

避免使用js输出页面布局

其他：

使用JSON格式进行数据交换

使用CDN加速

使用http缓存：添加expires或cache-control信息头

使用DNS预解析

22.https握手过程 //

http://blog.jobbole.com/105633/

23.BFC

BFC：块级格式化上下文他是一个独立的渲染区域

BFC渲染规则：

BFC元素的垂直边距会发生重合

BFC区域不会与浮动元素的box重叠

BFC在页面上是一个独立的容器外面的元素不会影响他里面的元素反过来里面的也不会影响外面

计算BFC高度的时候浮动元素也会参与计算

如何创建BFC：

overflow不为visible

float不为none

position为absolute或者fixed

display为inline-block table-cell table-caption flex inline-flex

BFC使用场景：解决边距重叠

24.响应式图片：

①使用js硬编码通过resize来判断屏幕大小然后加载不同图片

②给img 添加srcset方法

③svg

④第三方库polyfill

25.判断一个变量是否是数组、

var a = [];

// 1.基于instanceof

a instanceof Array;

// 2.基于constructor

a.constructor === Array;

// 3.基于Object.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(a);

// 4.基于getPrototypeOf

Object.getPrototypeOf(a) === Array.prototype;

// 5.基于Object.prototype.toString

Object.prototype.toString.apply(a) === '[object Array]';

// 6.Array.isArray

Array.isArray(a); // true

26.unicode 和utf-8的区别

Unicode 是「字符集」
UTF-8 是「编码规则」

UTF-8就是在互联网上使用最广的一种unicode的实现方式。
作者： Dunizb
链接：http://www.imooc.com/article/20319
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作！

utf8是对unicode字符集进行编码的一种编码方式。

27.作用域链

当需要从局部函数查找某一属性或方法时如果当前作用域没找到就到上层作用域查找直至全局函数这种层层查找就形成了作用域链

28.null undefined的区别

①null表示对象值为空 undefined表示变量未声明或者声明了没有赋值

②undefined不是一个有效的JSON 而null是

③typeof undefined结果是undefined 而 null结果是object

29.js延迟加载的方法

defer和async 动态创建DOM 按需异步载入js

30.document.write 和innerHTML区别

前者只能重绘整个页面后者可以重绘一部分页面

31.闭包的题目

http://www.cnblogs.com/xxcanghai/p/4991870.html

js定义提升

http://www.cnblogs.com/xxcanghai/p/5189353.html

32.将url拆解成字符

33.事件模型

http://www.cnblogs.com/dfyg-xiaoxiao/articles/6213063.html

34.函数节流

使用场景：例如网页滚动滚动到哪需要什么样的动画特效这时候就要注册一个onscroll事件如何减少触发次数同时满足要求又不卡顿一个是代码优化再就是函数节流

http://www.cnblogs.com/dolphinX/p/3403821.html

35.自适应布局

http://blog.youkuaiyun.com/u011456552/article/details/72936988

http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html

37.移动端自适应

http://blog.youkuaiyun.com/duzanuolu/article/details/63135402

一些题目

第一部分：Object Prototypes (对象原型)

刚开始很简单。我会让侯选人去定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回，例如：

spacify('hello world') // => 'h e l l o w o r l d'

尽管这个问题似乎非常简单，其实这是一个很好的开始，尤其是对于那些未经过电话面试的侯选人——他们很多人声称精通JavaScript，但通常连一个简单的方法都不会写。

下面是正确答案，有时侯选人可能会用一个循环，这也是一种可接受的答案。

function spacify(str) {
return str.split('').join(' ');
}

接下来，我会问侯选人，如何把这个方法放入String对象上面，例如：

    'hello world'.spacify();

问这个问题可以让我考察侯选人是否对function prototypes(方法原型)有一个基本的理解。这个问题会经常引起一些有意思的讨论：直接在对象的原型（prototypes）上添加方法是否安全，尤其是在Object对象上。最后的答案可能会像这样：

String.prototype.spacify = function(){
return this.split('').join(' ');
};

到这儿，我通常会让侯选人解释一下函数声明和函数表达式的区别。
第二部分：参数 arguments

下一步我会问一些简单的问题去考察侯选人是否理解参数（arguments）对象。我会让他们定义一个未定义的log方法作为开始。

log('hello world')

我会让侯选人去定义log，然后它可以代理console.log的方法。正确的答案是下面几行代码，其实更好的侯选人会直接使用apply.

function log(msg)　{
console.log(msg);
}

他们一旦写好了，我就会说我要改变我调用log的方式，传入多个参数。我会强调我传入参数的个数是不定的，可不止两个。这里我举了一个传两个参数的例子。

log('hello', 'world');

希望你的侯选人可以直接使用apply。有时人他们可能会把apply和call搞混了，不过你可以提醒他们让他们微调一下。传入console的上下文也非常重要。

function log(){
console.log.apply(console, arguments);
};

接下来我会让侯选人给每一个log消息添加一个"(app)"的前辍，比如：

    '(app) hello world'

现在可能有点麻烦了。好的侯选人知道arugments是一个伪数组，然后会将他转化成为标准数组。通常方法是使用Array.prototype.slice，像这样：

function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');

console.log.apply(console, args);
};

第三部分：上下文

下一组问题是考察侯选人对上下文和this的理解。我先定义了下面一个例子。注意count属性不是只读取当前下下文的。

var User = {
count: 1,

getCount: function() {
    return this.count;
}
};

我又写了下面几行，然后问侯选人log输出的会是什么。

console.log(User.getCount());

    var func = User.getCount;
    console.log(func());

这种情况下，正确的答案是1和undefined。你会很吃惊，因为有很多人被这种最基础的上下文问题绊倒。func是在winodw的上下文中被执行的，所以会访问不到count属性。我向侯选人解释了这点，然后问他们怎么样保证User总是能访问到func的上下文，即返回正即的值：1
正确的答案是使用Function.prototype.bind，例如：

var func = User.getCount.bind(User);
console.log(func());

js是基于对象的、事件驱动的脚本程序设计语言