前端面试手册-白红宇

前端面试手册

阅读量：5223 次

发布时间：2019-06-14

本文共 2583 字，大约阅读时间需要 8 分钟。

分别从HTML、CSS、JavaScript、综合四个方面总结，后续持续更新

HTML部分

Doctype的作用？

文档声明，不存在或格式不正确会导致文档以兼容模式呈现
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行
兼容模式页面以宽松的向后兼容的方式显示
HTML5不基于SGML，因此不需要对DTD进行引用

行内、块级、空(void)元素

行内：a b span img input select strong
块级：div ul ol li dl dt dd h1-6 p
空: br hr img input link meta

导入样式link和@import的区别

作用范围、加载时机、兼容性三方面不同

CSS和JS的放置位置

CSS放在head防止页面回流和重绘，JS放body末尾防止页面阻塞

标签语义化

用正确的标签做正确的事情，便于对浏览器、搜索引擎解析

HTML5的离线储存

localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 数据在浏览器关闭后自动删除
cookie在浏览器和服务器间来回传递，大小有限制

CSS部分

盒模型

内容(content)、填充(padding)、边界(margin)、边框(border)
两种：标准|IE（宽高含边框），box-sizing：content-box|border-box

选择符

ID、类、标签、属性、伪类、后代、子类、相邻、通配
important 》ID》Class》Tag

浮动和定位

浮动脱离标准文档流，造成父元素塌陷
清除浮动：overflow，clear，height
定位：relation，absolute，fixed，static（inherit）

垂直居中布局

表格法table-cell，弹性布局flex，绝对定位margin，相对定位translate

渐进增强和优雅降级

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

CSS3新特性

圆角、阴影、文字特效、线性渐变、变换、高级选择器、多背景、RGBA

JS部分

Undefined和null的区别

Undefined未赋值，Null尚未存在的对象
用typeof来判断五种原始类型：String、Number、Boolean、Undefined、Null，用instanceof来判断继承关系

相等和全等的区别

相等默认进行隐式转换，全等不会

字符串的常用方法

charAt 返回指定位置
concat 连接
indexOf 检索
replace 替换
slice 提取
split 分割
substr 提取
toLowerCase 转小写
toUpperCase 转大写

数组的常用方法

concat 连接
join 拼接
pop 删除尾
push 添加尾
shift 删除头
unshift 添加头
reverse倒叙
sort 排序
slice 截取
splice 替换

数组去重

基础循环法、排序相邻法、对象属性法、下标查询法（indexOf）

排序算法

冒泡：相邻比较后，逐个冒泡
选择：查找最小值后，逐个交换
插入：逐个对比后，再插入

new操作符

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this

作用域、闭包和this

全局作用域和函数作用域，内部可访问外部，外部不能访问内部
在函数A内部定义函数B并作为返回值，当B在A之外被执行时就会形成闭包
this一般情况下指全局对象。当作为方法调用，那么this就是指这个对象

apply和call

在特定的作用域中调用，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域
接收参数的方式不同

JS框架和原理

React单向数据，Vue结合angular和react的优点，组件化、指令、双向绑定
vue采用数据劫持结合发布订阅模式，通过Object.defineProperty()劫持各个属性的setter
、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
VUE生命周期：Created创建，Mounted编译，Update更新，Destory销毁

AJAX原理

通过XmlHttpRequest对象向服务器发异步请求，获得数据后操作DOM更新页面
Open》onreadystatechange》send

跨域和JsonP原理

浏览器同源策略，同协议|域名|端口，解决方案：后端代理|设置CORS头|Jsonp等
JSONP是通过动态创建script实现的，本质不属于AJAX技术。

DOM操作

创建：createElement，增删改：innerHTML,
查找：getElementById/getElementsByName/getElementsByTagName

CMD、AMD和模块化

AMD 是提前执行，CMD 是延迟执行
模块化是通过立即执行函数来进行的

VUE组件通信

路由参数、storage、父传子props&子传父emit、vuex

综合

前端性能优化

加载：合并请求、缓存资源、外部文件、文件压缩、按需加载
图片：压缩、代替（css3、SVG、Iconfont）、webp、png8、base64
样式：头部引入、避免内联、避免重设图片大小、优化选择符
脚本：减少重绘和回流、缓存dom和length、事件代理、ID选择
渲染：优化DOM结构、CSS3动画触发GPU