Web前端开发工程师笔试题（2019-3-28 整理16道，含答案）

版权声明：转载请注明出处，谢谢！ https://blog.csdn.net/dreamstone_xiaoqw/article/details/89876988

前端时间因工作需要，整理了一套笔试题。

网上有许多套题，重复的比较多。出于笔试时间考虑，本文摘取16道，包含了CSS基本使用、时间绑定、定时器、存储、ajax和框架原理等内容。

题目偏简单，覆盖知识点勉强算全面。如果有更好的题目，也欢迎补充。

放着这里，希望能给正在准备面试的朋友们带来一点点价值。

1. 一个200x200的div在不同分辨率屏幕上下左右居中，用css实现：

div居中方法很多，这里仅列举其中一种：

div {
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-left:-100px;
    height:-100px;
    z-index:1000;
} 

2. 如何用原生js给一个按钮绑定两个onclick事件？

事件绑定，建议在写代码的时候尽量注意编程规范，尤其是语义规范。
注意： 避免出现 btn1，btn2 这样的不良语义命名。

Var _btnLeft = document.getElementById('btn-left');
Var _btnRight = document.getElementById('btn-right');

_btnLeft.addEventListener("click", left);
_btnRight.addEventListener("click", right);

function left(){
    alert("left");
}

function right(){
    alert("right");
}

3. Javascript中的定时器有哪些？他们的区别及用法是什么？

有些任务或方法需要在一定时间后执行，或是间隔一定时间重复执行，这就需要定时器。

setTimeout

在预定长度的时间后执行只执行一次，如1秒（1000毫秒）后执行：

setTimeout(function(){ alert("Hello world"); }, 1000);

setInterval

以预定长度的时间为间隔重复执行，如每间隔1秒（1000毫秒）执行一次，重复执行：

setInterval(function(){ alert("Hello"); }, 1000);

4. 请描述一下 cookies sessionStorage和localstorage区别

相同点

都存储在客户端

不同点

(1) 存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

(2) 有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

(3) 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

5. 什么是ajax?

异步，不用刷新页面就能更新页面内容。

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

6. 原生JS怎样实现ajax?

很多程序员不喜欢原生，也不练习原生。但小编认为原生的编程能力一定程度上代表着造轮子的能力和对框架的理解、适应能力。

生产中为了节省开发效率和代码一致性，尽量不造轮子。但是，造轮子一时爽，一直造一直爽！

var xmlhttp;
if (window.XMLHttpRequest) {
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}
else {
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) 	{
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/api/",true);
xmlhttp.send();

7. css选择器有哪些，选择器的权重的优先级

• 1 ID #id
• 2 class .class
• 3 标签 p
• 4 通用 *
• 5 属性 [type=“text”]
• 6 伪类　:hover
• 7 伪元素 ::first-line
• 8 子选择器、相邻选择器

权重计算规则

• 1 第一等：代表内联样式，如: style=””，权值为1000。
• 2 第二等：代表ID选择器，如：#content，权值为0100。
• 3 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
• 4 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
• 5 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
• 6 继承的样式没有权值。

8. js有几种数据类型，其中基本数据类型有哪些

五种基本类型：undefined、null、Boolean、Number和String。

9. undefined 和 null 区别

• null：
  null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
• undefined：
  undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

javaScript权威指南： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

10. 如何进行网站性能优化

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

• 1 JavaScript 压缩和模块打包
• 2 按需加载资源
• 3 在使用 DOM 操作库时用上 array-ids
• 4 缓存
• 5 启用 HTTP/2
• 6 应用性能分析
• 7 使用负载均衡方案
• 8 为了更快的启动时间考虑一下同构
• 9 使用索引加速数据库查询
• 10 使用更快的转译方案
• 11 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
• 12 用于未来的一个建议：使用 service workers + 流
• 13 图片编码优化

PS：扩展下问题，gzip知道么？webpack怎么用？js怎么压缩？还有那些js压缩工具？

11. react和vue有哪些不同，说说你对这两个框架的看法

相同点

• 都支持服务器端渲染
• 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
• 数据驱动视图
• 都有支持native的方案,React的React native,Vue的weex

不同点

• React严格上只针对MVC的view层,Vue则是MVVM模式
• virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
• 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
• 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
• state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

PS：扩展下，AngularJS了解么？jQuery呢？

12. 什么是mvvm mvc是什么区别 原理

MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
MVC使用非常广泛，比如JavaEE中的SSH框架

MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

13. px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

14. JS哪些操作会造成内存泄露

• 意外的全局变量引起的内存泄露

function leak(){  
  leak="xxx";//leak成为一个全局变量，不会被回收  
}

• 闭包引起的内存泄露
• 没有清理的DOM元素引用
• 被遗忘的定时器或者回调
• 子元素存在引起的内存泄露

15. bootstrap响应式实现的原理

栅格，百分比布局+媒体查询
PS：其他类似的框架了解么？比如layui？

16. 关于JS事件冒泡与JS事件代理（事件委托）

-1事件冒泡：
通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

-2 事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。