2019年前端面试题

CSS选择器有哪些？

http://www.runoob.com/cssref/css-selectors.html

CSS中px、em、rem的区别？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

PX特色

1. IE没法调整那些使用px做为单位的字体大小；

2. 国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位；

3. Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)。

em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

（任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只须要将你的原来的px数值除以10，而后换上em做为单位就好了。）

 

EM特色 

 1. em的值并非固定的；

 2. em会继承父级元素的字体大小

因此咱们在写CSS的时候，须要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，而后换上em做为单位；

3. 从新计算那些被放大的字体的em数值。避免字体大小的重复声明。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引发了普遍关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

 

addClass、removeClass、toggleClass三者的区别?

.addClass(“className”)方法是用来给指定元素增长类名，也就是说给指定的元素追加样式； 

.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式； 

.toggleClass(“className”)方法是用来给脂定的元素增长或移除类名（若是元素的类名存在就移除，若是不存在就增长），也就是说用来给指定的元素进行样式切换（若是元素存在样式则去掉，若是不存在则加上样式）。

 

JS有哪些数据类型？

1，基本类型：字符串类型（string），数字类型（number），布尔类型（boolean）
2，复杂类型：数组类型（array），对象类型（object），函数类型（function），正则类型（regexp）
3，空类型：undefine  和 null

字符串转数字类型方法：1，加减乘除取余 接字符串 隐士转换

                                 2，parseInt(字符串)  转为整数   

                                 3，parseFloat(字符串)  转为浮点数类型  

                                 4，number  （字符串）

 
数字转字符串类型方法：1，.toString() 

                                 2.string()  通常用于转换NAN和 undefine 

                                 3.链接符+号

字符串或数字转boolean类型： boolean(字符串)  除false NaN 空字符串  数字0  和undefine   其他转换后都是true

 

谈谈document.ready和window.onload的区别?

最基本的区别:

1.执行时间

　　window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。 
　　$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。

2.编写个数不一样

　　window.onload不能同时编写多个，若是有多个window.onload方法，只会执行一个 
　　$(document).ready()能够同时编写多个，而且均可以获得执行

3.简化写法

　　window.onload没有简化写法 
　　$(document).ready(function(){})能够简写成$(function(){});

jQuery中.bind() .live() .delegate() .on()区别?

http://www.javashuo.com/article/p-ratdfbyc-bn.html

 

setTimeout与setInterval的主要区别?

setTimeout()方法只运行一次，也就是说当达到设定的时间后就出发运行指定的代码，运行完后就结束了，若是还想再次执行一样的函数，能够在函数体内再次调用setTimeout()，能够达到循环调用的效果。

setInterval()是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，是真正的定时器。

 get和post的区别？

get把请求的数据放在url上，即HTTP协议头上，其格式为： 以?分割URL和传输数据，参数之间以&相连。 数据若是是英文字母/数字，原样发送， 若是是空格，转换为+， 若是是中文/其余字符，则直接把字符串用BASE64加密，及“%”加上“字符串的16进制ASCII码”。 

post把数据放在HTTP的包体内（requrest body）。

get提交的数据最大是2k（原则上url长度无限制，那么get提交的数据也没有限制咯？限制实际上取决于浏览器，(大多数)浏览器一般都会限制url长度在2K个字节，即便(大多数)服务器最多处理64K大小的url。也没有卵用。）。
post理论上没有限制。实际上IIS4中最大量为80KB，IIS5中为100KB。

GET产生一个TCP数据包，浏览器会把http header和data一并发送出去，服务器响应200(返回数据);
POST产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)。

GET在浏览器回退时是无害的，POST会再次提交请求。

GET产生的URL地址能够被Bookmark，而POST不能够。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET只接受ASCII字符的参数的数据类型，而POST没有限制

那么，post那么好为何还用get？get效率高！。

如何实现浏览器内多个标签页之间的通讯？

 

方法一：localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，经过在另外一个标签页里监听storage事件，便可获得localstorge存储的值，实现不一样标签页之间的通讯。

方法二：使用cookie+setInterval，将要传递的信息存储在cookie中，每隔必定时间读取cookie信息，便可随时获取要传递的信息。

 

 

token、session的区别？

session：session 从字面上讲，就是会话。这个就相似于你和一我的交谈，你怎么知道当前和你交谈的是张三而不是李四呢？对方确定有某种特征（长相等）代表他就是张三。

session 也是相似的道理，服务器要知道当前发请求给本身的是谁。为了作这种区分，服务器就要给每一个客户端分配不一样的“身份标识”，而后客户端每次向服务器发请求的时候，都带上这个“身份标识”，服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”，能够有不少种方式，对于浏览器客户端，你们都默认采用 cookie 的方式。

服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来讲更安全，但是session有一个缺陷：若是web服务器作了负载均衡，那么下一个操做请求到了另外一台服务器的时候session会丢失。

token：

Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并做出相应提示，在这样的背景下，Token便应运而生。

Token的定义：Token是服务端生成的一串字符串，以做客户端进行请求的一个令牌，当第一次登陆后，服务器生成一个Token便将此Token返回给客户端，之后客户端只需带上这个Token前来请求数据便可，无需再次带上用户名和密码。最简单的token组成:uid(用户惟一的身份标识)、time(当前时间的时间戳)、sign(签名，由token的前几位+盐以哈希算法压缩成必定长的十六进制字符串，能够防止恶意第三方拼接token请求服务器)。

使用Token的目的：Token的目的是为了减轻服务器的压力，减小频繁的查询数据库，使服务器更加健壮。

 

 cookie,localStorage和sessionStorage的区别?

共同点：都是保存在浏览器端、且同源的 
区别： 
一、cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下 
二、存储大小限制也不一样，cookie数据不能超过4K，同时由于每次http请求都会携带cookie、因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大 
三、数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭以前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie：只在设置的cookie过时时间以前有效，即便窗口关闭或浏览器关闭 
四、做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localstorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的 
五、web Storage支持事件通知机制，能够将数据更新的通知发送给监听者 
六、web Storage的api接口使用更方便

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别?

一、HTTP的历史

早在 HTTP 创建之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来讲，咱们所写的HTML页面将要放在咱们的 web 服务器上，用户端经过浏览器访问url地址来获取网页的显示内容，可是到了 WEB2.0 以来，咱们的页面变得复杂，不只仅单纯的是一些简单的文字和图片，同时咱们的 HTML 页面有了 CSS，Javascript，来丰富咱们的页面展现，当 ajax 的出现，咱们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP 协议的。一样到了移动互联网时代，咱们页面能够跑在手机端浏览器里面，可是和 PC 相比，手机端的网络状况更加复杂，这使得咱们开始了不起不对 HTTP 进行深刻理解并不断优化过程当中

详细介绍：https://mp.weixin.qq.com/s/GICbiyJpINrHZ41u_4zT-A

 

http和https的区别？https的原理？

http://www.javashuo.com/article/p-vcsaiego-be.html

WebSerivce与WebAPI的区别？

http://www.javashuo.com/article/p-uezhapqn-bb.html

 

前端性能优化方案有哪些？

http://www.javashuo.com/article/p-vhrqdgxj-bx.html

1. 减小 HTTP请求数

(1). 从设计实现层面简化页面

(2). 合理设置 HTTP缓存

(3). 资源合并与压缩

(4). CSS Sprites

(5). Inline Images-->使用 data:  URL scheme的方式将图片嵌入到页面或 CSS中，若是不考虑资源管理上的问题的话，不失为一个好办法。若是是嵌入页面的话换来的是增大了页面的体积，并且没法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。

(6). Lazy Load Images（本身对这一块的内容仍是不了解）

2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

3. 异步执行 inline脚本(其实原理和上面是同样，保证脚本在页面内容后面加载。)

4. Lazy Load Javascript（只有在须要加载的时候加载，在通常状况下并不加载信息内容。）

5. 将 CSS放在 HEAD中

6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

7. 减小没必要要的 HTTP跳转

8. 避免重复的资源请求--> 这种状况主要是因为疏忽或页面由多个模块拼接而成，而后每一个模块中请求了一样的资源时，会致使资源的重复请求

9. Javascript代码块优化

10.CSS选择符

11. HTML优化

12. Image压缩

 

各浏览器兼容性问题？

https://blog.csdn.net/xustart7720/article/details/73604651/

http://www.javashuo.com/article/p-yrseomyp-z.html

 

HTML5和传统HTML的区别？

http://www.javashuo.com/article/p-tjjvidzx-y.html

 

CSS3新特性有哪些？

http://www.javashuo.com/article/p-gsngimyd-g.html

 

ES6新特性有哪些？

ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言能够用来编写复杂的大型应用程序，成为企业级开发语言。 

ECMAScript 和 JavaScript 的关系：前者是后者的语法规格，后者是前者的一种实现

• 1. let、const
• 2. import、export
• 3. class、extends、super
• 4. arrow functions （箭头函数）
• 5. template string （模板字符串）
• 6. destructuring （解构）
• 7. default 函数默认参数
• 8. rest arguments （rest参数）
• 9. Spread Operator （展开运算符）
• 10. 对象
• 11. Promise
• 12. Generators

ES七、ES8新特性？

ES7在ES6的基础上主要添加了两项内容：

• Array.prototype.includes()方法
• 求幂运算符（**）

ES8特性：

主要新功能：

• 异步函数 Async Functions（Brian Terlson）
• 共享内存和Atomics（Lars T. Hansen）

次要新功能：

• Object.values / Object.entries（Jordan Harband）
• String padding（Jordan Harband，Rick Waldron）
• Object.getOwnPropertyDescriptors() （Jordan Harband，Andrea Giammarchi）
• 函数参数列表和调用中的尾逗号（Jeff Morrison）

 

对HTML5 websocket的了解？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，容许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。

如今，不少网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器须要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费不少的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，而且可以更实时地进行通信。

浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。

当你获取 Web Socket 链接后，你能够经过 send() 方法来向服务器发送数据，并经过 onmessage 事件来接收服务器返回的数据。

http://www.runoob.com/html/html5-websocket.html

 

React_Flux入门

https://blog.csdn.net/i10630226/article/details/54984299