前端面试题总结

本文主要是总结一些前端各方面的面试题，具有一定的参考借鉴价值，需要的朋友可以了解一下

1.div+css的布局较table布局有什么优点？

   div+css: 结构与样式分离、代码语义性好、更符合html 标准规范、SEO友好

   table布局：某种原因不方便加载外部css的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常

2.为什么利用多个域名来存储网站资源会更有效？

  CDN缓存更方便、突破浏览器并发限制、节约 cookie 宽带、节约主域名的连接数，优化页面响应速度、复制不必要的安全问题

3.开发人员优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

  dns缓存、cdn缓存、浏览器缓存、服务器缓存

4.==和===的区别

  == 比较  判断两者相等，==在比较的时候可以自动转换数据类型

  === 严格比较   判断两者严格相等  ===严格比较，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回  false

简而言之：==只要求值相等，===要求值和类型都相等 

6.vue和html的区别？

  vue是数据驱动

  html是非数据驱动

7.同步和异步的区别？

同步（阻塞模式）：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

异步（非阻塞模式）：进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态，又消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

8.为什么会有跨域的存在？如何解决跨域问题？

原因：由于跨域访问获取资源会有很大的安全隐患，所以浏览器会限制这种跨域请求，只允许ajax访问本地同源下的资源

跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

解决方法：jsonp，原理是通过script标签的src属性来进行数据请求，因为不受同源策略的影响，所以能请求数据

9.localStorage、cookie和sessionStorage的区别

  localStorage：本地存储，除非用户手动清除出，否则信息将永远存在，存在数据大小一般为5MB，而且仅在客户端（浏览器）中保存，不参与和服务器的通信

sessionStorage：会话存储，关闭页面或浏览器后被清楚，仅在客户端（浏览器）中保存，不参与和服务器的通信

cookie：存储在浏览器的信息。如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束。

10.优雅降级和渐进增强？

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。 

11.css选择器（选择器越特殊，优先级越高，也就是选择器指向的越准确，优先级就越高）

*通用选择器、 #id选择器、.类选择器、后代选择器（利用空格间隔,，如div h1）、群组选择器（利用逗号间隔，如p,div,#a）、h1+p相邻兄弟选择器

12.display:none与visiblity:hidden的区别是什么？

display：隐藏对应的元素但不挤占该元素原来的空间。（对象的宽高各种属性值都丢失）

visibility：隐藏对应的元素并且挤占该元素原来的空间。（对象仅是在视觉上看不到，完全透明，而它多占据的空间位置任然存在）

13.尝见的兼容性问题

各个浏览器兼容写法：-moz：firefox（火狐）    -ms：IE浏览器    -webkit：chrome（谷歌）、safari（苹果浏览器）    -o：opera

（1）png24位的图片在IE6浏览器上出现背景

解决方案：做成png8的

（2）浏览器默认的margin和padding不同

解决方案：加一个全局的*{margin:0;padding:0}来统一

（3）超链接访问过后hover样式就不在出现了，被点击访问过的超链接样式不再具有hover和active

解决方案：改变css属性的排列顺序 L-V-H-A （a:link a:visited a:hover a:active）

14.H5语义化标签

<header> 头部     <footer>底部    <nav>导航栏 section>（1.定义文档中的节，和div类似2.定义文章，这时一般带有标题）
<article>独立的内容区域    <aside>侧边栏内容     <time>定义时间或日期 <details>描述文档或某一部分细节
<video>视频 <audio> 音频 <canvas>画布（通过坐标在canvas上绘制图形）

15.BOM和DOM的区别

BOM（不兼容，IE、谷歌、火狐）:浏览器对象模型，用来获取或设置浏览器的属性、行为，如新建窗口、获取屏幕分辨率、浏览器版本号等

DOM（部分不兼容）：文档对象模型，用来获取或设置文档中的标签的属性，如获取或者设置input表单的value值。

BOM内容不多，主要还是DOM。由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接的关系

16. DOM方法：

（1）getElementById()  获取带有指定id的节点（元素）getElementsByTagName()  获取带有指定标签名称的所有元素的节点列表     getElementsByClassName()    获取带有指定类名的所有元素的节点列表

（2）appendChild()       插入新的子节点（元素）removeChild()       删除子节点（元素）replaceChild()   替换节点

（3）createAttribute()   创建属性节点   createElement()   创建元素节点    createTextNode()    创建文本节点

17.什么是正向代理和反向代理

正向代理：是一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并制定目标（原始服务器），然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。

反向代理：是指以代理服务区来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务。

CSS系列

1.盒模型

content-box、border-box、padding-box、margin-box

2.局中布局

水平居中：行内元素：text-align:center   块级元素：margin:0 auto    flex+justify-content:center

垂直布局：line-heiigt:height    flex+align-items:center    table

水平垂直居中

flex+justify-content+align-items

3.选择器优先级（选择器从右往左解析）

!important>行内样式>#id>.class>tag>*>继承>默认

4.link与@import 的区别

（1）link功能较多，可以定义RSS、Rel，而@import只能用于加载css

（2）当解析到link时，页面会同步加载所引的css，而@import所引用的css会等到页面加载完才被被加载

（3）@import需要IE5以上才能使用

（4）link可以使用js动态引入、@import不行

JS系列

1.原型/构造函数/实例

原型：一个简单的对象，用于实现对象的属性继承（对象的爹），每个js对象中都包含一个__proto__的属性指向该对象的原型

构造函数：可以通过new来新建一个对象的函数

实例：通过构造函数和new创建出来的对象，便是实例。实例通过__proto__指向原型，通过constructor指向构造函数

2.原型链

原型链是由原型对象组成，每个对象都有__proto__属性，指向了创建该对象的构造函数的原型，__proto__将对象连接起来组成了原型链，是一个用来实现继承和共享属性的有限的对象链。

3.作用域

执行上下文中还包含作用域链。作用域可理解为该上下文中声明的变量和声明的作用范围，可分为快级作用域和函数作用域

4.作用域链

作用域链可以理解为一组对象列表，包含父级和自身的变量对象，因此我们便能通作用域链访问到父级里声明的变量或者函数

5.闭包

闭包属于一种特殊的作用域，称为静态作用域。它的定义可以理解为：父函数被销毁的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数成为闭包。

6.script引入方式

（1）html静态<script>引入

（2）js动态插入<script>

（3）<scriptdefer>异步加载，元素解析完成后执行

（4）<scriptasync>异步加载，与元素渲染并行执行

ES6系列

1.var 和 let 关键字的区别，const关键字的理解？

let是ES6提出的声明变量的关键字

区别：let 相同变量名不能在同一作用域出现

          let 声明的变量只在块作用域内有效

          不会预解析，不存在变量提升

const：一个声明常量的关键字，声明后不能改变值，其他的和let差不多

2.对箭头函数的理解？

箭头函数是ES6中新提出的一种函数的写法。也就是简化函数，一般是用在回调函数的定义中。

特点：结构简洁，灵活

注意：箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

扩展理解：箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this就是window。

3.对promise 对象的理解？

promise是ES6中提出的一个对象，主要是来辅助我们更好地进行异步编程的一个实例。

他们的出现是为了更好地解决javascript中异步编程的问题

Vue系列 

1.核心概念：数据绑定（数据驱动）

   借鉴angular的模板和数据绑定，借鉴react的组件化和虚拟dom操作

2.vue生命周期： 创建=>挂载=>更新=>销毁

  beforeCreate：组件实例刚被创建，组件属性计算之前。

  created：组件实例创建完成，属性已绑定，但Dom还未生成，$el还不存在。

  beforeMount：模板编译/挂载之前。

  mounted：模板编译/挂载之后。

  beforeUpdate：组件更新之前。

  updated:组件更新之后。

  beforeDestory：组件销毁前调用。

  destoryed：组件销毁后调用。

3.优点

体积小、运行效率高、编码简洁、PC/移动端都合适

可以轻松引入vue插件和其他第三方库开发项目

4.vue指令：

v-show、v-if、v-else、v-else-if、v-model、v-for、v-bind、v-html

Angular系列

1.四大对象：作用域、控制器、模块、服务

2.Angular的依赖注入？

依赖注入是Angular的重要特性之一，依赖注入简化了Angular 解析模块/组件之间依赖的过程，通常一个组件要获得它的依赖，有三种方式：

（1）直接创建出依赖，如使用new操作符

（2）能够查找到依赖，如引入全局变量

（3）在需要的地方传入依赖

3.angular指令：

ng-bind、ng-if、ng-show、ng-model、ng-init

MVC 和 MVVM

MVC：M-Model 数据：数据实体，用来保存页面要展示的数据

           V-View 视图：负责显示数据的，一般就是指html页面

           C-Controller 控制器：控制整个业务逻辑，负责处理数据，比如数据的获取、数据过滤

MVVM：M-Model 数据：与应用程序的业务逻辑相关的数据的封装载体

              V-View 视图：界面的显示和渲染

             VM-ViewModel 视图-数据：是view和model的结合，负责view 和 model 的交互和协作

MVVM的优点：

低耦合：view可以独立于Model变化和修改，同一个viewMode可以被多个View复用，并且可以做到view和model的变化互不影响

可重用性：可以把一些视图的逻辑放在ViewModel，让多个view复用

独立开发：开发人员可以专注于业务逻辑和数据的开发

可测试性：清晰的view分层，是的针对表现业务逻辑的测试更容易、更简单

 

本文章具有一定借鉴意义，并将持续更新