前端面试题汇总

HTML5

1. 新标签

2. 标签语义化

3. web存储

1. cookie
2. localStorage
3. sessionStorage

4. 盒模型

5. 五大浏览器及其内核

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

CSS3

1. 选择器

2. 伪类和伪元素

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

3. 新属性

4. 动画

5. 水平垂直居中

6. 清除浮动

1. 简单清除浮动法

overflow: hidden;

2. 万能清除浮动法

.clear{
	zoom: 1;
}
.clear:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

7. 优雅降级、渐进增强

ES5

1. 数据类型

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

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

2. 数组操作方法

1. push()
2. pop()
3. unshift()
4. shift()
5. concat()
6. reverse()
7. sort()
8. join()

3. 字符串操作方法

1. splice()
2. splite()
3. substring()
4. substr()

4. dom操作方法

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

1. 增加
   • appendChild()
   • insertBefore()
2. 删除
   • removeChild
3. 修改
   • innerHTML
   • innerText
4. 查询
   • getElementById()
   • getElementsByClassName()
   • getElementsByTagNmae()
   • getElementsByName()
   • querySelect()
   • querySelectAll()
5. 复制
   • 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. 面向对象

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

14. 继承

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

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

15. 垃圾回收

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

16. 内存泄露

17. 去重

18. 查找最多字符串

ES6

1. promise

2. 继承

3. 数组新增方法

4. 字符串新增方法

5. 模块开发

6. async、await

7.解构

8.模板字符串

9.includes

库（Jq）、框架（Vue）

1. 生命周期

2. v-html、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. 函数

混合开发Hybird App

1. 安卓、iso调取h5

2. h5调取安卓、ios

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和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. 前端性能优化

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

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

2. SEO优化

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

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

3. 首页白屏优化

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

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

4. IE兼容问题及hack

5. http、https区别

6. 服务器状态码

• 200
• 400
• 401
• 403
• 404
• 500
• 502
• 503
• 504

7. 移动端适配

• px
• rem
• em
• vw
• vh
• rpx

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

持续更新中…