**前端开发工程师（初级）试题总结

**数据前端开发工程师（初级）招聘试题

第一部分：HTML+CSS
1.行内元素有哪些？块级元素有哪些？CSS 的盒模型？
行内元素: a b br i span input select
块级元素：div p h1 h2 h3 h4 form ul
Css盒模型:内容（content），边框（border） ,外边距（margin），填充（padding）
2.你如何对网站的文件和资源进行优化？期待的解决方案包括哪些？
文件合并（目的是减少http请求）、文件压缩、使用 CDN （内容分发网络）来托管资源、缓存的使用（并且多个域名来提供缓存）。
3.清除浮动的几种方式，各自优缺点?
①给父元素单独定义高度
　　优点：简单快速、代码少。
　　缺点：无法进行响应式布局。
②在标签结尾处加空div标签

　　优点：简单快速、代码少，兼容性较高。
　　缺点：增加空标签，不利于页面优化。
③父级定义overflow:hidden
　　优点：简单快速、代码少，兼容性较高。
　　缺点：超出部分被隐藏了，在布局的时候要注意。
④父级定义class=“clearfix”，使用after伪类和zoom
　　.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
　　.clearfix{zoom:1;}
　　优点：写法固定，没有多余结构，兼容性高。
　　缺点：代码多。
4.flex常见的属性有哪些？
Flex 是用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。
justify-content
align-items
align-content

第二部分：JAVASCRIPT
1.例举 3 种强制类型转换和 2 种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
2.写出call 和 apply 的区别例子代码？
这两个都是函数的方法，可以改变this的指向。
fn.call(obj,param1,param2,…)——call传入单个参数
fn.apply(obj,[param1,param2,…])——apply传入一个数组

3.b 继承 a 的方法。（能写几种写几种）
1、call()方法方式2、apply()方法方式3、原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承。

4.写出事件委托的例子？
事件委托（也叫事件代理），例如，在列表中，事件能从子元素(li)冒泡的父元素(ul)身上，那么我们就可以给ul自己加一个click事件，把所有li的事件都委托给了我们的父级(ul)身上。

• 点击1
• 点击2
• 点击3
• 点击4
• 点击5

我们以上代码把事件委托给了ul，只给ul增加点击事件，在浏览器中运行点击对应的li会弹出li对应的innerHTML，这个function(e){};中的e这个参数实际上就是当前我们点击li时，系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li，在这里我们每次弹出的都是当前点击对象的innerHTML，这就是一个简单的事件委托的案例。 5.手写闭包例子？ 6.编写一个数组去重的方法。 var arr = this, i, j, len = arr.length; for(i = 0; i < len; i++){ for(j = i + 1; j < len; j++){ if(arr[i] == arr[j]){ arr.splice(j,1); len--; j--; } } } return arr; }; var a = [1,2,3,4,5,6,5,3,2,*,**,*,*,*,*,*,1,1,1,1,]; var b = a.distinct(); console.log(b.toString()); //1,2,3,4,5,6,56 第三部分：选择题 1、 let promise = new Promise(function(resolve, reject) { console.log('Promise'); resolve(); }); promise.then(function() { console.log('resolved.'); }); console.log('Hi!'); 运行以上代码，以下正确输出的的是：（C） A：// resolved// Hi!// Promise B：// Promise// resolved// Hi! C：// Hi!// Promise// resolved D：// Promise// Hi!// resolved 写出以上所选答案的运行原理： 答：参数resolve和reject的作用是将Promise中函数要传递的值，作为参数传给后面的then中函数。resolve（值1）把值1传给promise，然后再由promise把值1传给then（function（值1）），而console.log('Hi!')这个语句无需调用，运行速度快，因此它第一个输出，所以最终的顺序为：C：// Hi!// Promise// resolved 2、 function boo (a) {return a * 3} function foo (b) {return boo(4) * 2} console.log(foo(3)) 运行以上代码，以下正确输出的的是：（B） A：36 B：24 C：6 D：12 写出以上所选答案线程的运行原理： 答：想要计算foo（3）的值，就是计算boo（4）* 2的值，所以先把boo（4）* 2压到栈底，首先计算boo（4）的值，为12，接着调用boo（4）* 2 计算其值为24，出栈，最后foo（3）其值为24。

第四部分：综合
1.根据JS对象的原型原理，写出具有如下要求的代码例子
要求：1）扩展原型
2）原型链式的继承

2.写一个深度拷贝的算法

答：function isArray(value) {
return Object.prototype.toString.call(value) === ‘[object Array]’;
}
function isObject(value) {
return Object.prototype.toString.call(value) === ‘[object Object]’;
}
function deepClone(source) {
let target = null;
if (!isArray(source) && !isObject(source)) {
target = source;
}
if (isArray(source)) {
target = [];
for (let i = 0; i < source.length; i++) {
target[i] = deepClone(source[i]);
}
}
if (isObject(source)) {
target = {};
for (let key in source) {
target[key] = deepClone(source[key]);
}
}
return target;
}
3.写出用setTimeout模拟setInterval的代码
setTimeout(function(){
//这里写要执行的代码
setTimeout(arguments.callee,interval);
},interval)
4.vue里面哪儿不会用到双向绑定?

5.CSRF、XSS他们分别的攻击手段与防御手段

6.写出一段js回收机制原理的代码，体现在哪地方进行回收，回收的是什么？
JS 具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。
原理：找到那些不再继续使用的变量，然后释放其占用的内存。
如下代码中，test执行完毕后之后，a和b会被回收
function test(){
var a = 10;
var b = “hello”;
}
test();