前端面试手册
分别从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
- 构建工具和原理
gulp基于流的自动化构建工具,Webpack基于模块的自动化打包工具
- 安卓和IOS浏览器兼容
IOS定位fixed,图片加载失败
- HTTP请求
GET、POST、PUT、DELETE、HEAD、OPTIONS
- TCP和UDP
TCP稳定可靠的连接,通过三次握手四次释放,UDP不稳定的连接