头图

前言

前端面试题解析主要内容包括HTML、CSS、JS、ES6、Vue、生命周期相关、Vue-router、Vuex、React、React Native、微信小程序、IOS/Andriod浏览器适配问题整理、Pc端兼容性问题、webpack的原理、项目类问题等等。(本文资料适合 0-2年)

解析百度、阿里、腾讯大厂面试被问到的题目,也涵盖了初中级前端技术点。文章所列出来的是主要大纲部分,详细内容可以自行获取!

HTML

  • Doctype的作用?
  • 标准模式和怪异模式的区别:
  • 行内元素/块级元素/空元素有哪些?
  • 介绍一下你对浏览器内核的理解?
  • 常用浏览器的内核有哪些?
  • 浏览器是怎么对HTML5的离线储存资源进行管理和加载的?
  • .描述一下cookies/sessionStorage和localStorage的区别?
  • HTML5新特性有哪些?如何处理HTML5新标签的兼容性问题?如何区分HTML和HTML5?
  • 简述一下你对HTML语义化的理解?
  • HTML5离线缓存怎么使用,工作原理能不能解释一下?
  • 页面导入样式时,使用link和@import有什么区别?
  • Iframe有哪些缺点?
  • Label的作用是什么?怎么用?
  • HTML5的form如何关闭自动完成功能?
  • 如何实现浏览器内多个标签之间的通信?
  • 页面可见性有哪些用途?(visibility API)

CSS

  • 浏览器盒模型?
  • 清除浮动的方式
  • CSS选择器有哪些?哪些属性可以继承?
  • ::after/:after与::before/:before的区别?
  • CSS样式优先级计算法:
  • CSS3新特性和伪类有哪些?
  • less的一些优势。
  • 如何居中div?
  • Display有哪些哪些值?说明他们的作用
  • Position的值?
  • flex布局以及常用属性
  • 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
  • CSS打造三角形?
  • 满屏品字布局?
  • li与li之间有看不见的空白间隙是什么原因引起来的?
  • 为什么要初始化css样式?
  • CSS中的visibility属性的collapse[kə'læps]属性是干嘛的?
  • 外边距合并是指的什么意思?
  • 移动端的布局用过媒体查询吗?
  • 响应式页面?

JS

  • JS是一种什么样的语言?
  • JS数据类型有哪些?
  • 介绍JS有哪些内置对象?
  • 栈与堆的区别?
  • js中的作用域与变量声明提升
  • 如何转化类型?
  • 什么是面向对象编程及面向过程编程,他们的异同和优缺点
  • 面向对象编程思想
  • 如何解释this在js中起的作用?
  • js中this的用法(经典):
  • ☆说说JS原型和原型链
  • 如何准确判断一个变量是数组类型?
  • call和apply的区别和作用?
  • 继承的方法有哪些?
  • 什么是闭包?闭包有什么作用?
  • 事件代理(事件委托):
  • 事件的各个阶段
  • new操作符在创建实例的时候经历了哪几个阶段
  • 异步编程的实现方式
  • 对原生JS了解程度
  • js延迟加载的方法有哪些?

ES6

  • 列举常用的ES6特性:
  • 箭头函数需要注意哪些地方?
  • let、const、var
  • 拓展:var方式定义的变量有什么样的bug?
  • Set数据结构
  • 拓展:数组去重的方法
  • 箭头函数this的指向。
  • 手写ES6 class继承。
  • generator生成器函数:
  • 什么是async/await及其如何工作?
  • async函数的基本用法:
  • async与generator的区别?
  • 简单实现async/await中的async函数
  • 有用过promise吗?请写出下列代码的执行结果,并写出你的理解思路:
  • Object.is()与原来的比较操作符===,==的区别?
  • 介绍一下Set、Map、WeakSet和WeakMap的区别?

Vue

  • 什么是MVVM?
  • mvvm和mvc的区别?它和其他框架(JQuery)的区别是什么?哪些场景适合?
  • Vue的优点是什么?
  • Vue.js的两个核心是什么?
  • Vue组件之间的传值
  • Vue-cli中怎么使用自定义组件,又遇到过哪些问题吗?
  • Vue如何实现按需加载配合webpack设置
  • v-show和v-if指令的共同点和不同点
  • 如何让CSS只在当前组件中起作用
  • <keep-alive></keep-alive>的作用是什么?
  • 聊聊Keep-alive的实现原理和缓存策略
  • Vue中引入组件的步骤
  • Vue常用的修饰符?
    14.什么是Vue的计算属性?
  • Vue等单页面应用及其优缺点?
  • 指令v-el的作用是什么?
  • 在Vue中使用插件的步骤
  • active-class是哪个组件的属性?
  • 说出至少4中vue当中的指令和它的用法?

生命周期

  • 什么是vue生命周期?
  • vue生命周期的作用是什么?
  • vue生命周期总共有几个阶段?
  • 请列举出3个Vue常用的声明周期钩子函数
  • DOM渲染在那个周期中已完成?

React

  • react的优势以及特点
  • React中的props和state的用法
  • react组件之间如何通信?
  • 为什么虚拟DOM会提高性能?
  • react生命周期函数:
  • react性能优化是哪个周期函数?
  • 在生命周期中的哪一步你应该发起AJAX请求?
  • 概述一下REact中的事件处理逻辑
  • 如何告诉React它应该编译生产环境版本?
  • 调用setState之后发生了什么?
  • react的setState的原理及用法
  • setState为什么是异步的?
  • 传入setState函数的第二个参数的作用是什么?
  • shouldComponentUpdate的作用是啥以及为何它这么重要?
  • createElement与cloneElement的区别是什么?

微信小程序

  • 简单描述一下微信小程序的相关文件类型?
  • 你是怎么封装微信小程序的数据请求?
  • 有哪些参数传值的方法?
  • 你使用过哪些方法,来提高微信小程序的应用速度?
  • 小程序和原生App哪个好?
  • 简述微信小程序原理?
  • 分析微信小程序的优劣势
  • 微信小程序与H5的区别?
  • 怎么解决小程序的异步请求问题?
  • 小程序的双向绑定和vue哪里不一样
  • 小程序的wxss和css有哪些不一样的地方?
  • 小程序关联微信公众号如何确定用户的唯一性?

IOS/Andriod浏览器适配问题整理

  • 渐进增强和优雅降级:
  • IOS移动端click事件300ms的延迟响应
  • 一些情况下,对非可点击元素(如label,span)监听click事件,IOS不会触发
  • 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
  • 安卓浏览器看背景图时,有些设备会模糊
  • 当输入框在最底部,点击软键盘后输入框内被遮挡
  • 消除reansition闪屏
  • CSS3动画页面闪白,动画卡顿
  • 阻止旋转屏幕时自动调整字体大小
  • Input的placeholder会出现文本位置偏上的情况
  • 往返缓存问题:
  • calc的兼容性处理
  • 加上一个CSS3的属性后,让所关联的元素事件监听失效
  • 防止手机中网页放大和缩小
  • 上下拉动滚动条时卡顿,慢
  • 关于图片加载
  • 关于Zepto点透
  • html5调用安卓或者IOS的拨号功能

笔试编程题:

  • JS数组的顺序排序,随机排序篇
  • 编写一个九九乘法表
  • 实现一个函数,判断输入是不是回文字符串。
  • 你对重绘、重排的理解?
  • 实现效果,点击容器内的图标,图标边框变成border 1px solid red,点击空白处重置
  • 简单实现双向数据绑定mvvm
  • 为string扩展一个trim方法,取掉字符串中的所有空格
  • JS中如何检测一个变量是string类型?请写出函数实现
  • 解释一下下面代码的输出
  • 说说以下代码运行会输出什么?
  • 14.{}=={}、[]==[]的执行结果
  • [‘1’, ‘2’, ‘3’]. map( parseInt )的答案以及为什么?


由于篇幅限制,展示了部分内容截图,需要完整文档资料的小伙伴请点击这里直接领取哦

建议

  • 面试的时候不要表现出自己想创业。敲黑板。
  • 从来没有看过源码的话,建议从jQuery,zepto这之类的源码入手,后期可以了解Vue,React常见的功能的源码思路和实现。
  • 项目经验描述的时候不用太太太详细,拣重点的讲。

Tiger老师
79 声望8 粉丝