前端面试整理

基础html+CSS

  • 行内元素有哪些?块级元素有哪些?CSS的盒模型?
  • 说一说html5和css有哪些新特性,如何区分HTML 和 HTML5?
  • HTML5存储类型有什么区别,你知道的页面存储方式?
  • meta viewport原理是什么?
  • 什么是CSS 预处理器?
  • 常用的布局方式有哪些?
  • CSS 有个content 属性?有什么作用?
    CSS 的 content 应用在 before/after 伪元素上,用来插入生成的内容。最常见是利用伪元素清除浮动 防止高度塌陷问题。 设置父元素overflow:hidden/auto; .clearfix::after{ content:" ", display:block; clear:both }
  • 为什么要清除浮动,清除浮动的几种方式,各自的优缺点
  • CSS3新增伪类有那些
  p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  p:last-of-type
  p:only-of-type
  p:only-child  
  p:nth-child(2)
  :enabled、:disabled 控制表单控件的禁用状态。
  :checked,单选框或复选框被选中。
  • rem布局字体太大怎么处理?
  • 如何让根目录字体大小随屏幕大小变化而适配,基准值设置为多少?
  • 如何让一个div上下左右居中?
(1)position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);
(2)position:absolute;left:0;top:0;bottom:0;right:0; margin:auto;
(3)width:200px;height:200px;border: 1px solid red;background:#99f;
position:absolute;left:50%;top:50%; margin-left:-100px;margin-  top:-100px;

必备技能js

简单
  • js 数据类型有啊些,类型值的区别
    基本类型 null 布尔 undefined string number symbol 存储在栈中
    引用类型 object 存储在堆中
    *nullundefined的区别?
    null是一个表示"无"的对象,转为数值时为0;
    undefined是一个表示"无"的原始值,转为数值时为NaN。
    undefined:
    (1)变量被声明了,但没有赋值时,就等于undefined。
    (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
    (3)对象没有赋值的属性,该属性的值为undefined。
    (4)函数没有返回值时,默认返回undefined。
    null:
    (1) 作为函数的参数,表示该函数的参数不是对象。
    (2) 作为对象原型链的终点。
    *=====有什么区别?
    ===不需要进行类型转换,只有类型相同并且值相等时,才返回 true.
    == 如果两者类型不同,首先需要进行类型转换
  • if条件里面返回 false的几种情况
    false,null,0,“”,undefined,NaN
  • 如何判断一个变量是不是数组
使用 Array.isArray 判断,如果返回 true, 说明是数组
使用 instanceof Array 判断,如果返回true, 说明是数组
使用 Object.prototype.toString.call 判断,如果值是 [object Array], 说明是数组
通过 constructor 来判断,如果是数组,那么 arr.constructor === Array. (不准确,因为我们可以指定 obj.constructor = Array)
处。
  • 数组常用方法
    改变原数组:
尾部删除pop(),尾部添加push(),头部删除shift(),头部添加unshift()
排序sort(),颠倒数组元素reverse(),删除或插入元素splice();

不会改变元素组:

  合并数组concat(),拼接数组元素join(),截取元素slice()
  indexOf() , lastIndexOf(),toString()
  • 解释一下作用域链
  • this的指向
全局范围:指向window(严格模式下不存在全局变量,指向undefined);
普通函数调用:指向window;
构造函数调用:指向new出来的对象;
对象方法调用:指向最后调用它的对象;
显示设置this:call,apply方法显示将this指向第一个参数指明的对象
  • forEachfor…infor…of
    forEach,得到的是元素
var array = [1,2,3,4,5,6,7];
array.forEach(function(e){  
    console.log(e);  
});
// 结果: 1,2,3,4,5,6,7

for…in 用for in的方遍历数组,得到的是索引;也可以对enumerable对象操作,得到的是索引。

var array = [1,2,3,4,5,6,7];  
for(let index in array) {  
    console.log(index,array[index]);  
}; 
// 结果:  0 1,1 2,2 3,3 4, 4 5, 5 6 ,6 7
var table = {
    a : 10,
    b : true,
    c : "haha"
};  

for(let index in table) {  
    console.log(index, table[index]);  
} 
//结果:  a 10 ,b true,c haha

for…of(ES6中新增加的语法)for of不能对象用, 用于遍历一个迭代器,如数组,得到的是元素:

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c
进阶
  • 谈一下你对js面向对象的理解(开放问题,可以从封装、继承、多态,能够解释到有多少种实现方式、优缺点是什么。能说出近几年流行的解决方案是什么,这就是加分。再介绍下 extends 或者 mixin 的实现甚至可以衍生到JavaScript 的模块化发展甚至到为什么现在 TS 如此流行,那么可以说到这一环节解答的就非常棒了。)
  • javascript 面向对象实现继承的几种方式?
  • prototype和 __ proto__ 的关系是什么(原型链)?
  • 什么闭包,解释一下为什么会产生闭包(谈到作用域、作用域链)
    闭包可以解决什么问题
闭包就是能够读取其他函数内部变量的函数。
要理解闭包,首先必须理解Javascript特殊的变量作用域。
闭包的用途:
1、可以读取函数内部的变量
2、让这些变量的值始终保持在内存中

使用闭包的注意点:
1、由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2、闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

1、原型链继承
核心: 将父类的实例作为子类的原型
缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

2、构造继承
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3、组合继承
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用
缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

4、寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
缺点:堪称完美,但实现较为复杂

  • 同步和异步(简要阐述)

同步:由于js单线程,同步任务都在主线程上排队执行,前面任务没执行完成,后面的任务会一直等待;
异步:不进入主线程,进入任务队列,等待主线程任务执行完成,开始执行。最基础的异步操作setTimeout和setInterval,等待主线程任务执行完,在开始执行里面的函数;

  • 如何实现一个promisepromise的原理,以及它的两个参数是什么?
    Promise的几种状态、如何实现的、什么情况下catch不到错误?
  • mapset有没有用过,如何实现一个数组去重,map数据结构有什么优点?
  • 实现一个深克隆
  • call, apply, bind区别

callapply 都是为了解决改变this的指向。作用都是相同的,只是传参的方式不同。
除了第一个参数外,call 可以接收一个参数列表,apply只接受一个参数数组。
bind和其他两个方法作用也是一致的,只是该方法会返回一个函数。并且我们可以通过bind实现柯里化。

框架、项目构建、插件、库

  • 简单阐述一下vue的生命周期

beforeCreate、created(此时需说明可以在created中首次拿到data中定义的数据)、beforeMount、mounted(此时需说明dom树渲染结束,可访问dom结构)、beforeUpdate、updated、beforeDestroy、destroyed

  • 父子组件如何通信的?

  • vue slot是做用与使用?

  • 有没有封装过axios?

  • 如何在axios中添加登陆验证?

  • vue-router如何做历史返回提示?

  • computed 和 watch 的区别和运用的场景?

computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;
运用场景:

  • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
  • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
  • vue-router 路由模式有几种?

vue-router 有 3 种路由模式:hash、history、abstract
hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;
abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.

  • 小程序的App()生命周期中三个事件可以监听:onLaunch,onShow,onHide。

onLaunch:小程序加载完成之后调用,全局只触发一次
onShow: 小程序启动,或者从后台到前台会触发一次
onHide:小程序从前台到后台会触发一次

  • vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较

  • vuex有哪几种属性?
    有五种,分别是 State、 Getter、Mutation 、Action、 Module

  • jq中事件冒泡、事件捕获是什么

  • jquery的 jquery.extend() 、jquery.fn和 jquery.fn.extend()分别是做什么的?

团队协同、环境搭建、部署、git/svn/github/postman/抓包工具、补充

  • 自己亲手构建的项目流程,用到哪些东西?
  • 工程化怎么管理的?
  • 常用git、svn命令,区别
  • 常用的linux命令
  • 项目上线流程是怎样的
  • 怎么处理跨域,具体怎么做?
  • 用过Nginx吗?都用过哪些?
  • 多页面入口打包, webpack如何抽离公共部分
  • 简述Node.js的适用场景?
  • Node.js单线程、其应用场景,如何实现高并发,讲讲异步I/O、事件循环以及其优先级
  • 是否了解公钥加密和私钥加密。
  • 前后端常见的几种鉴权方式。

鉴权是指验证用户访问系统的权力
常用的鉴权有四种:
1.HTTP Basic Authentication
2. session-cookie
3.Token 验证
4.OAuth(开放授权)

数据结构&算法

简单

  • 写出你知道的所有数组去重的方法:
    const arr = ['a','b','22','a',undefined,'bc','haha','22',true,undefined];
  • ["1", "2", "3"].map(parseInt) 答案是多少
    [1, NaN, NaN]

进阶

  • 写一个函数mulify, 使得mul(2)(3)(4) === 24
function mul(x) {
    const result = (y) => mul(x * y); 
    result.valueOf = () => x;
    return result;
}
console.log(mul(3)(2)(4))
-> 24

项目优化、安全

  • 不想让别人盗用你的图片,访问你的服务器资源该怎么处理?

  • 网络、数据、渲染和DOM操作方面优化项目

  • 网络方面
    1.减少http请求(合并js、css文件、使用雪碧图、使用base64表示简单的图片)
    2.减小资源体积(gzip压缩,js混淆,css、img压缩,)
    3.缓存(DNS缓存、CDN部署与缓存、http缓存)
    4.移动端优化
    - 使用长cache,减少重定向
    - 首屏优化,保证首屏加载数据小于14kb
    - 不滥用web字体
  • 渲染和DOM操作方面
    1.优化网页渲染
    - css的文件放在头部
    - js文件放在尾部或者异步
    - 尽量避免內联样式
    2.DOM操作优化
    - 避免在document上直接进行频繁的DOM操作
    - 使用classname代替大量的内联样式修改
    - 尽量使用css动画
    - 适当使用canvas
    - 尽量减少css表达式的使用
    - 使用事件代理
    3.操作细节注意
    - 正确的css前缀的使用
    - 缩短css选择器,多使用伪元素等帮助定位
    4.移动端优化
    - 长列表滚动优化
    - 函数防抖和函数节流
    - 使用touchstart、touchend代替click
    - HTML的viewport设置
    - 开启GPU渲染加速
  • 数据方面
    1.图片加载处理:
    - 图片预加载
    - 图片懒加载
    - 首屏加载时进度条的显示
    2.异步请求的优化:
    - 使用正常的json数据格式进行交互
    - 部分常用数据的缓存
    - 数据埋点和统计

计算机网络

  • 为什么会有同源策略?
    这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。
    指一段脚本只能读取来自同一来源的窗口和文档的属性。
  • http、https、以及websocket的区别
  • tcp建立连接、释放连接的过程
  • 关于http协议
  1. 主要特点
  2. URI和URL的区别
  3. 请求消息Request组成部分(请求行、请求头部、空行、请求数据也叫主体)
  4. 响应消息Response组成部分(状态行、消息报头、空行和响应正文。)
  5. HTTP之状态码
    1xx:指示信息--表示请求已接收,继续处理
    2xx:成功--表示请求已被成功接收、理解、接受
    3xx:重定向--要完成请求必须进行更进一步的操作
    4xx:客户端错误--请求有语法错误或请求无法实现
    5xx:服务器端错误--服务器未能实现合法的请求
  6. HTTP请求方法( GET, POST 和 HEAD,OPTIONS, PUT, DELETE, TRACE 和CONNECT方法),有什么区别?

学习习惯

  • 源码提交的网站,提交频率
  • 写博客的习惯
  • 说说最近最流行的一些东西,学习的网站
  • 你认为作为一个优秀的前端开发,哪些方面的技术知识很重要

推荐阅读更多精彩内容

  • 前端面试题的简单整理,都只是大概回答,具体某些问题的具体理解后续会补上。 前端页面有哪三层构成,分别是什么?作用是...
    李欢li阅读 119评论 0 2
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 3,632评论 1 102
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 807评论 0 23
  • 【转载】CSDN - 张林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牍阅读 1,200评论 1 10
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    WhaleFall_丶阅读 876评论 0 5