**数据前端开发工程师(初级)招聘试题
第一部分: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
第四部分:综合
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();