前端面试题汇总

绝地灬酷狼 2022-01-07 05:59 527阅读 0赞

### 文章目录 ###

*   *  HTML5
     *   *  1. 新标签
         *  2. 标签语义化
         *  3. web存储
         *  4. 盒模型
         *  5. 五大浏览器及其内核
     *  CSS3
     *   *  1. 选择器
         *  2. 伪类和伪元素
         *  3. 新属性
         *  4. 动画
         *  5. 水平垂直居中
         *  6. 清除浮动
         *  7. 优雅降级、渐进增强
     *  ES5
     *   *  1. 数据类型
         *  2. 数组操作方法
         *  3. 字符串操作方法
         *  4. dom操作方法
         *  5. 跨域
         *   *  （1）跨域
             *  （2）前端实现跨域方式
             *   *  1）jsonp跨域
         *  6. 闭包
         *  7. 原型链
         *  8. 异步
         *  9. call、apply、bind
         *  10. 事件委托
         *  11. 捕获、冒泡
         *  12. 事件防抖、事件节流
         *  13. 面向对象
         *  14. 继承
         *  15. 垃圾回收
         *  16. 内存泄露
         *  17. 去重
         *  18. 查找最多字符
         *  19. 理解new原理，并手动实现new
     *  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查看分支
         *  2. git创建分支
         *  3. git切换分支
         *  4. git删除分支
         *  5. git合并分支
         *  6. git合并多次本地commit
         *  7.git同步本地代码到最新版本
         *  8. git提交
         *  9. git撤销提交
         *  10. git查看修改内容
         *  11. git查看提交记录
         *  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. 前端性能优化
         *  2. SEO优化
         *  3. 首页白屏优化
         *  4. IE兼容问题及hack
         *  5. http、https区别
         *  6. 服务器状态码
         *  7. 从地址栏输入url到页面渲染整个过程

## HTML5 ##

### 1. 新标签 ###

### 2. 标签语义化 ###

### 3. web存储 ###

1.  cookie
2.  localStorage
3.  sessionStorage

### 4. 盒模型 ###

### 5. 五大浏览器及其内核 ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>浏览器</th> 
   <th>内核</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>IE</td> 
   <td>Trident</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>Firefox</td> 
   <td>Gecko</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>Opear</td> 
   <td>Presto</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>Safari</td> 
   <td>Webkit</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>Chrome</td> 
   <td>Webkit/Blink</td> 
  </tr> 
 </tbody> 
</table>

## 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
     *  ::first-line

### 3. 新属性 ###

### 4. 动画 ###

### 5. 水平垂直居中 ###

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

1.  行内元素水平垂直居中
2.  块元素水平垂直居中
3.  已知宽高水平垂直居中
4.  未知宽高水平垂直居中

> 采用以下方法解决

1.  行高布局
2.  绝对定位布局
3.  绝对定位+translate 布局
4.  display: flex 布局
5.  display: table 布局

### 6. 清除浮动 ###

1.  简单清除浮动法

overflow: hidden;

1.  万能清除浮动法

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

### 7. 优雅降级、渐进增强 ###

1.  优雅降级

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

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

1.  渐进增强

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

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

## 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 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
 *  同源指的是：协议、域名、端口全都相同，缺一不可

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

#### （2）前端实现跨域方式 ####

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

##### 1）jsonp跨域 #####

[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. 查找最多字符 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]

## 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. 移动端适配 ###

*  px
 *  rem
 *  em
 *  vw
 *  vh
 *  rpx

## 混合开发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. 前端性能优化 ###

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

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. 从地址栏输入url到页面渲染整个过程 ###

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

持续更新中…

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

[jsonp]: https://blog.csdn.net/jiang_fulai/article/details/94023529
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]: /images/20211227/6a13c71c71064f3885a022e060f03c11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]: /images/20211227/7a67df8446c1446b94e3e1566c776957.png