前端面试题汇总

文章目录综合前端性能优化SEO优化首页白屏优化IE兼容问题及hackhttp、https区别服务器状态码移动端适配HTML5新标签标签语义化CSS3选择器伪类和伪元素新属性动画水平垂直居中清除浮动ES5基本数据类型数组操作方法字符串操作方法跨域闭包原型链面向对象继承垃圾回收内存泄露ES6promise继承数组新增方法字符串新增方法模块开发async、await库、框架（Vue）生命周期v-html

jiang_fulai

4527人浏览 · 2019-06-25 14:44:55

jiang_fulai · 2019-06-25 14:44:55 发布

文章目录

HTML5

1. 新标签

2. 标签语义化

3. web存储

cookie
localStorage
sessionStorage

4. 盒模型

5. 五大浏览器及其内核

	浏览器	内核
1	IE	Trident
2	Firefox	Gecko
3	Opear	Presto
4	Safari	Webkit
5	Chrome	Webkit/Blink

CSS3

1. 选择器

2. 伪类和伪元素

伪类单引号（:）
用来向选择器添加特殊的效果，或者查找不存在DOM树中的信息
- :active
- :link
- :visited
- :hover
- :focus
- :nth-child
- :fist-child
- :last-child
- :disabled
- :checked 等等
伪元素双引号（::）
为DOM树定义虚拟元素，这个虚拟元素不包含任何DOM元素，但是可以包含内容
- ::before
- ::after
- ::first-letter
- ::first-line

3. 新属性

4. 动画

5. 水平垂直居中

内容水平垂直居中有一下几种类型

行内元素水平垂直居中
块元素水平垂直居中
已知宽高水平垂直居中
未知宽高水平垂直居中

采用以下方法解决

行高布局
绝对定位布局
绝对定位+translate 布局
display: flex 布局
display: table 布局

6. 清除浮动

简单清除浮动法

overflow: hidden;

万能清除浮动法

.clear{
	zoom: 1;
}
.clear:after{
	content: "";
	display: block;
	height: 0;
	clear: both; /* 核心属性 */
	visibility: hidden;
}

7. 优雅降级、渐进增强

优雅降级

先完成高版本浏览器功能，再针对低版本浏览器进行兼容

/*优雅降级写法*/
div{
	/*先完成高版本浏览器功能*/
	transition: all 1s;
	
	/*再针对具体浏览器进行兼容*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
}

渐进增强

先完成低版本浏览器基本功能，再针对高版本浏览器进行优化

/*渐进增强写法*/
div{
	/*先完成基本功能*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	
	/*再针对高版本浏览器进行优化*/
	transition: all 1s;
}

ES5

1. 数据类型

js数据类型分为基本数据类型和引用数据类型

基本数据类型
- String
- Number
- Null
- Undefined
- Boolean
- Symbol（ES6新增）
引用数据类型
- Object
- Array
- Function

2. 数组操作方法

push()
pop()
unshift()
shift()
concat()
reverse()
sort()
join()

3. 字符串操作方法

splice()
splite()
substring()
substr()

4. dom操作方法

dom操作是前端经常面对的事情，具体分为增删改查

增加
- appendChild()
- insertBefore()
删除
- removeChild
修改
- innerHTML
- innerText
查询
- getElementById()
- getElementsByClassName()
- getElementsByTagNmae()
- getElementsByName()
- querySelect()
- querySelectAll()
复制
- cloneNode()

5. 跨域

（1）跨域

跨域一直是前端无法回避的问题，提到跨域就要提一下浏览器的同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
同源指的是：协议、域名、端口全都相同，缺一不可

当前页面url	请求的url	是否跨域	原因
http://www.baidu.com	http://www.baidu.com/index.html	否	同源
http://www.baidu.com	https://www.baidu.com/index.html	是	协议不同
http://www.baidu.com	http://www.daibu.com/index.html	是	域名不同
http://www.baidu.com	http://www.baidu.com:8888/index.html	是	端口不同

（2）前端实现跨域方式

jsonp
cors
反向代理
websocket
window.domain
postMessage
iframe

1）jsonp跨域

jsonp跨域及其原理

6. 闭包

7. 原型链

8. 异步

9. call、apply、bind

10. 事件委托

11. 捕获、冒泡

12. 事件防抖、事件节流

防抖和节流能有效减少浏览器性能的损耗，防止出现页面堵塞卡顿现象

事件防抖，
顾名思义，防止频繁执行某个方法导致页面抖动卡顿，最终只会执行一次方法。
比如监听页面滚动加载更多，只有不滚动页面了，才会执行方法，如果继续滚动，就不执行。
页面滚动到底部加载更多
事件节流
顾名思义，节约流量，节约浏览器性能，固定间隔时间执行某个方法
比如input框监听用户输入内容，固定1秒或者2秒执行一次获取输入框内容的方法。

13. 面向对象

与面向过程的区别
特点（封装、继承、多态）

14. 继承

继承是面向对象模式的核心，通过继承，各个实例可以实现自己的属性和方法

原型继承
构造继承
组合继承（经典继承方法，也是目前最常用的继承方法）

15. 垃圾回收

Javascript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。
所需内存的分配及无用内存的回收实现了自动化管理。
原理：找出不再继续使用的变量，释放其内存。垃圾收集器会按照固定时间间隔，周期性执行这一操作。

16. 内存泄露

17. 去重

18. 查找最多字符

19. 理解new原理，并手动实现new

function Person(name, age){
	this.name = name;
	this.age = age;
}
Person.prototype.sayName = function(){
	console.log(this.name);
}

//日常使用方式
var ming = new Person('xiaoming', 26);
console.log(ming.age);  //26
ming.sayName();			//xiaoming

//手动实现new
function createNew(name, age){
	//新建一个空对象
	var obj = {};
	//改变Person方法的this指向，指向新建的obj，并传入参数
	Person.call(obj, name, age);
	//新建对象的原型，指向Person的原型
	obj.__proto__ = Person.prototype;
	//返回该对象
	return obj;
}

var hong = createNew('xiaohong', 18);
console.log(hong.age);		//18
hong.sayName();				//xiaohong

在这里插入图片描述

ES6

1. promise

2. 继承

3. 数组新增方法

4. 字符串新增方法

5. 模块开发

6. async、await

7.解构

8.模板字符串

9.includes

库（Jq）、框架（Vue）

1. 生命周期

2. v-html、v-text、v-if、v-show区别

3. v-for里面的key作用

4. 虚拟dom原理

5. 数据视图双向绑定原理

6. mixins混合

7. vuex使用

8. 组件传值

9. 中央事件总线

10. 自定义指令

11. 自定义事件

12. 自定义全局变量

SCSS

1. 变量

2. 计算

3. 嵌套

4. 继承

5. 混合

6. 函数

移动端兼容性问题

1. 移动端1像素问题

2. 安卓手机行高问题

3. 安卓手机文字加粗问题

4. 苹果手机iphonex及以上，底部安全区域问题

5. 移动端适配

混合开发Hybird App

1. 安卓、iso调取h5

2. h5调取安卓、ios

3. 低版本手机兼容ES6问题

UI库

GIT、SVN

1. git查看分支

	//查看本地分支
	git branch
	//查看远程分支
	git branch -a

2. git创建分支

	git branch fenzhi

3. git切换分支

	git checkout fenzhi
	
	//新建并且切换分支
	git checkout -b fenzhi

4. git删除分支

	git branch -d fenzhi

5. git合并分支

	//需要提前切换到其他分支 比如 git checkout master
	git merge fenzhi

6. git合并多次本地commit

	//合并分支次数，此处为4次
	git rebase -i HEAD~4

7.git同步本地代码到最新版本

	git pull origin master

8. git提交

	git push origin fenzhi

9. git撤销提交

	git reset HEAD <file>  //撤销文件
	git checkout -- <file> //回退到撤销文件之前的版本

10. git查看修改内容

1. git diff  				//尚未add前，查看修改的内容
2. git diff fileName 		//尚未add前，查看修改的某个文件
3. git diff HEAD~X  		//查看已经提交到版本库的修改内容，x代表几个版本
4. git diff 版本1 版本2 文件 	//查看两个版本间，某个文件的修改内容

11. git查看提交记录

	git log    //查看所有提交记录
	git log -3 //查看最近3次提交记录

12. git和svn的区别

Webpack

1. 构建方法

2. loaders、plugins区别

Node.js

1. express

Websocket

公众号开发（第三方页面）

1. 转发、分享

2. 调取摄像头

3. 上传图片

4. 获取图片

5. 支付

小程序

1. 生命周期

2. rpx

3. 登录

4. 获取地理位置

5. onhide区别（页面、app.js）

6. 组件使用

（1）. 组件传值

其他

1. 前端性能优化

性能优化意味着能提升页面流畅度，减少用户等待时间，提升用户体验

HTTP性能优化
- http请求均采用异步，防止因为同步导致页面假死状态
- http请求尽量使用GET方式，POST请求把数据作为请求的主体，消耗的资源会更多一些
- 减少http请求，尽量合并http请求
HTML代码优化
- 使用语义化标签
- 禁止使用无意义标签进行布局
- css文件放在head标签里，script标签放在body最后面位置
- 结构与样式分离，采用外联样式
JS代码优化
- 减少dom操作，dom操作是影响浏览器性能的最大原因
- 减少使用 getElementsByTagName()，getElementsByClassName(),这些语句都会导致遍历dom元素，影响性能，可以使用querySelect()，querySelectAll()来替代
- 使用变量保存获取dom元素的信息，而不是每次需要都获取一遍。
- 减少使用全局变量
- 减少使用闭包，因为闭包在运行完毕后并不会释放内存，会导致内存泄漏
- 尽量使用事件委托（采用事件流里面的冒泡原理）
- 事件处理程序在使用过后，都将其设为null
- 压缩代码

2. SEO优化

搜索引擎优化，目的是让网络爬虫可以更好地爬到自己的页面，提高搜索排名

html标签使用语义化标签，采用h5新标签（IE浏览器酌情考虑）
页面标题使用h1-h6，一个页面只出现一个h1标签
a标签、img标签，合理使用 alt、title属性
页面增加友情链接，指向其他兄弟网站
增加meta标签，keywords、description
目录层级最多不超过三级
最有效的方法，花钱买排名?

3. 首页白屏优化

首页加载大量的内容，导致等待时间过长，以至于影响用户体验

增加加载动画，提示用户正在加载中
减少首页资源请求，优化首页代码
首页采用服务器渲染直接返回

4. IE兼容问题及hack

5. http、https区别

6. 服务器状态码

7. 从地址栏输入url到页面渲染整个过程

DNS解析
三次握手
向服务器发送请求
服务器返回请求
四次挥手
浏览器渲染
浏览器回流和重绘

持续更新中…

如果这篇文章对你的面试有些许的帮助，不要忘了点个赞哦！！！(￣︶￣) 在这里插入图片描述 **

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^