前端知识点总结

---

 花了几个晚上整理的前端知识点，收录进来以备后续查看。

1、自动化构建工具Gulp的使用方法。

考察nodejs安装，npm依赖库安装，全局安装，本地安装，--save和—save-dev 区别，gulp基本脚本编写，gulp常用功能。

2、什么是跨域问题？如何解决？表单可以跨域吗？

       考察同源策略及跨域解决方案。

浏览器同源策略：凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

常用解决方案：代理（nginx反向代理）、jsonp。

3、解释下什么是jsonp, jsonp和ajax的区别。

4、尽可能详细的解释下ajax的原理。

http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

XMLHttpRequest 是 AJAX 的基础。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

5、http和https请求区别。

6、http三次握手及每次握手的作用。

1：客户端发送了一个带有SYN的Tcp报文到服务器，这个三次握手中的开始。表示客户端想要和服务端建立连接。 
2：服务端接收到客户端的请求，返回客户端报文，这个报文带有SYN和ACK标志，询问客户端是否准备好。 
3：客户端再次响应服务端一个ACK，表示我已经准备好。

 

断开连接的4次挥手

1：TCP发送一个FIN，用来关闭客户到服务端的连接。

2：服务端收到这个FIN，他发回一个ACK，确认收到序号为收到序号+1，和SYN一样，一个FIN将占用一个序号。

3：服务端发送一个FIN到客户端，服务端关闭客户端的连接。

4：客户端发送ACK报文确认，并将确认的序号+1，这样关闭完成。

 

可能有人会有疑问，tcp我握手的时候为何ACK和SYN是一起发送。挥手的时候为什么是分开的时候发送呢，原因是TCP的全双工模式，接收到FIN意味着没有数据发送过来了，但是还可以继续发送数据

 

7、http数据报的结构，有哪些常见包头，这些包头的作用。

• 请求行（request line)
• 消息头部（header)
• 空行
• 请求正文
• Content-Type:指定请求和响应的内容类型，如果未指定即为text/html
• 　　　　　　常用的Content-Type
• 　　　　　　　　text/plain：普通文本
• 　　　　　　　　tex/html：html文本
• 　　　　　　　　application/x-javascript：js
• 　　　　　　　　application/x-www-form-urlencoded：默认形式表单发包类型
• 　　　　　　　　multipart/form-data：用在发送文件的post包中
• 　　　　　　　　application/json：通过json传输
• 　　　　　　　　application/xml：通过xml传输
• Content-Length:用于指定请求或相应的内容长度
• Accept-Encoding: gzip
• Content-Encoding: gzip

 

8、http常见的响应码及意义。

1XX——信息类（Information），表示收到http请求，正在进行下一步处理，通常是一种瞬间的响应状态

2XX——成功类（Successful），表示用户请求被正确接收、理解和处理

200（OK）：请求成功。一般用于GET与POST请求

201（Created）：已创建。成功请求并创建了新的资源

 

3XX——重定向类（Redirection），表示没有请求成功，必须采取进一步的动作

301（Moved Permanently）：资源被永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI

302（Found）：资源临时移动。资源只是临时被移动，客户端应继续使用原有URI

304：用其他策略获取资源

4XX——客户端错误（Client Error），表示客户端提交的请求包含语法错误或不能正确执行

400（Bad Requests）：客户端请求的地址不存在或者包含不支持的参数

401（Unauthorized）：未授权，或认证失败。对于需要登录的网页，服务器可能返回此响应

403（Forbidden）：没权限。服务器收到请求，但拒绝提供服务

404（Not Found）：请求的资源不存在。遇到404首先检查请求url是否正确

5XX——服务端错误（Server Error），表示服务器不能正确执行一个正确的请求（客户端请求的方法及参数是正确的，服务端不能正确执行，如网络超时、服务僵死，可以查看服务端日志再进一步解决）

500（Internal Server Error）：服务器内部错误，无法完成请求

503（Service Unavailable）

9、前端如何向后台提交数据。

       常用的：表单提交 submit方式，但是会刷新页面，和ajax提交，需要对form表单数据序列化，可以用Formdata对象。

表单submit提交是浏览器实现的，不通过js引擎。

Ajax和$http都是通过XMLHTTPRequest实现的。

10、websocket是长连接么？连接建立之后如何保证连接状态？

       主要考如何设计实现websocket的心跳机制。

11、常见的浏览器内置对象。如何获取当前页面的url？

       location、window、document、history、Navigator

12、JS的有哪些数据类型

       基本数据类型：undefined、null、boolean、number、String

       引用类型：function、object、Array

14、定义一个数组变量、赋初值、向数组头和尾插入和删除数据。

       Pop  push    shift  unshift（插入）

15、数组的遍历方法。（要求多种）

       For     foreach    for（x in y）

16、什么是类数组。如何遍历。

• 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
• 不具有数组所具有的方法

 

var myArray = {length: 4,"0": "first","1": "second","2": "third"};var temp = Array.prototype.slice.call(myArray);

 

17、eval作用。如何通过一个字符串调用函数名和这个字符串一样的函数。（类似于java的反射）

       Eval作用是进行表达式运算并返回值。比如eval（3+5) ==8

eval('test').call(this);

调用test的方法。

18、获取当前时间戳

       new Date().getTime();

19、四舍五入保留两位小数

       var num =2.446242342;num = num.toFixed(2);

20、取整

  var aa = parseInt('1.22');

21、encodeURI()和encodeURIComponent() 区别

       使用encodeURI()编码后的结果是除了空格之外的其他字符都原封不动，只有空格被替换成了%20。而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个URI使用encodeURI()，而只能对附加在现有URI后面的字符串使用encodeURIComponent()的原因所在。一般来说,我们使用encodeURIComponent()方法的时候要比使用encodeURI()更多,因为在实践中更常见的是对查询字符串参数而不是对基础URL进行编码

22、html5 drag涉及的几个事件及时间的触发时机

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

23、Web Worker是什么，怎么使用，怎么回传消息。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（IE不支持）

使用的关键几步：

1. 监测浏览器是否支持。
2. 穿件web worker文件。即要异步执行的代码。（如何想要回调，可以使用postMessage方法）
3. 创建worker对象。
4. worker对象添加事件回调监听。

24、Cookie如何防范XSS攻击。什么是XSS攻击。

       跨站脚本攻击。通常做法就是在网页中嵌入客户端脚本（JS），当客户端加载网页时，通过JS脚本获取用户的cookie，导航到恶意网站等。

       将cookie标记为httponly 就可以防止通过js获取客户端cookie。

25、Cookie和session的区别与联系。

       Cookie是一种存储方式。

       Session是服务端用来标记客户端的一些信息。

       表达成用cookie可以在客户端用来记录session信息。Session一般是由后台生成并保存的。

26、JavaScript中如何检测一个变量是一个String类型？请写出函数实现

typeof(obj) === "string"  obj.constructor === String

27、typeof 和 instanceof  区别

       Typeof的运算数可以是任何类型，返回值为：number,boolean,string,function,object,undefined这些基础类型。

instanceof  主要是用来判断变量是不是一个对象的实例。比如：

cat instanceof Cat  判断cat这个实例是不是Cat类的一个实例。

28、数组去重。算法考察。

第一种写法：利用了类数组临时变量。

var src = [0,2,3,4,4,0,2];var temp = {};var dest = [];for(var i = 0 ;i< src.length;i++){if( !temp[src[i]] ){temp[src[i]] = 1;dest.push(src[i]);}}console.log(dest);

第二种写法：利用了Array的indexof方法。

for(var i = 0;i< src.length;i++){if(dest.indexOf(src[i]) < 0){dest.push(src[i]);}}

29、$(document).ready()方法和window.onload 区别

       ready方法是dom元素加载完成。Onload方法是资源加载完成，包括图片。

30、jquery绑定事件方法，最好用哪一种。

       最好用on方法，去除绑定用off。

31、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

       行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

       块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

32、使用正则表达式的写法。（例子）

var reg = /pattern/flags // 字面量创建方式 var reg = new RegExp(pattern,flags); //实例创建方式 pattern:正则表达式

flags:标识(修饰符) 标识主要包括： 1. i 忽略大小写匹配 2. m 多行匹配，即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项 3. g 全局匹配 模式应用于所有字符串，而非在找到第一个匹配项时停止

正则表达式有4个常用方法test、exec、match和replace

test：字符串中是否存在符合正则的内容。

exec：捕获符合正则的字符串。

Match：匹配成功的字符串数组。

Replace：替换匹配正则的部分。

33、优化页面加载，都有哪些方式。

       1、压缩css和js文件

       2、合并js和css文件减少http请求。

       3、合理设计业务逻辑，减少http请求。

       4、优化图片，设计合适大小的图片源文件。

5、图片标明宽高可以减少布局调整。

6、CSS样式放在头部、js放在尾部。

7、服务器开启gzip压缩。

8、尽量减少DOM元素数量。

34、浏览器加载页面的流程

       1、解析html 创建dom数。

2、按照顺序加载link、style、script文件。并执行script，阻塞式。

3、解析css。 浏览器默认<外部样式<内联样式（内联样式和外部样式后加载的生效）<行内元素。

4、CSS和dom合并，渲染

5、布局重拍和重绘。

35、变量为undefined和null的区别。

 var ccc;typeof(ccc);ccc = null;typeof(ccc);

       第一个typeof为undefined，第二个为object。

36、box-sizing都有哪些值都代表什么意思，哪些场景使用。

content-box: 在宽度和高度之外绘制元素的内边距和边框

border-box: 在宽度和高度内绘制元素的内边距和边框

inherit:从父元素继承。

37、display inline和inline-block的区别。

       只有inline-block有盒子模型相关的属性。

38、什么是伪数组，如何遍历。如何把它变为一个真Array。

1，具有length属性2，按索引方式存储数据3，不具有数组的push,pop等方法

var fakeArray = {

   length: 4,

   "aa": "first",

   "bb": "second",

     "cc": "third"

 };

Array.prototype.slice.call(fakeArray)

39、cookie和localStorage sessionStorage区别和用法。

               1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

                2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

                3、数据有效期不同，sessionStorage仅仅在当前浏览器窗口关闭之前有效；localStorage始终有效，窗口或者浏览器关闭之后也一直保存，因此作用持久数据；cookie，只在设置cookie过期时间之前有效，即使窗口关闭或者浏览器关闭。

                4、作用域不同：sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面，localStorage在所有的同源窗口中是共享的，cookie也是在所有同源的窗口中共享的。

40、什么是序列化和反序列化，为什么要用到这个，如何实现。

           复杂对象无法在http中传输，所以要序列化。使用JSON

41、上下固定，中间滚动布局如何实现

42、call和apply的区别。举例使用。

43、为什么要清除浮动，怎么清除。

           浮动对文档流产生了影响，下边增加一个div，然后设置clear:both

44、介绍position属性。

           absolute、fixed、relative、static、inherit

45、垂直水平居中的方法。

46、什么是深拷贝、什么是浅拷贝，如何实现深拷贝。

47、前端实现文件断点续传的思路

           主要是文件分割。File对象的slice方法分割文件+ajax上传

48、介绍flex布局

• flex-direction属性决定主轴的方向（即项目的排列方向）
• flex-wrap 属性定义，如果一条轴线 排不下，如何换行
• flex-flow flex-direction属性和flex-wrap属性的简写形式
• justify-content定义了项目在主轴上的对齐方式
• align-items定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

 

49、Promise 和 async/await

function sleep(time){return new Promise(function (resolve,reject) {setTimeout(function () {resolve();},time);});}(async function() {debugger;sleep(5000);debugger;await sleep(2000);debugger;})();(function(){debugger;})()

 

50、利用Promise实现异步。举例。这个是原生的，有很多种promise的实现。 Jquery中是用的deferred

var p = new Promise(function (resolve,reject) {//reject('222');//resolve('111');});p.then(function (param) {debugger;},function (param) {debugger;});

 

51、什么是订阅-发布模式，如何实现。

52、浏览器事件流向是怎样的，DOM事件流是哪两种模式。如何阻止事件冒泡，如何捕获事件。

53、如何进行cookie劫持，如何防止被劫持。

       XSS（跨站点脚本攻击）

1. 给Cookie添加HttpOnly属性，这种属性设置后，只能在http请求中传递，在脚本中，document。cookie无法获取到该Cookie值。对XSS的攻击，有一定的防御值。但是对网络拦截，还是泄露了
2. 在cookie中添加校验信息，这个校验信息和当前用户外置环境有些关系，比如ip，useragent等有关。这样当cookie被人劫持了，并冒用，但是在服务器端校验的时候，发现校验值发生了变化，因此要求重新登录，这样也是种很好的思路，去规避cookie劫持
3. cookie中sessionid的定时更换，让sessionid按一定频率变换，同时对用户而言，该操作是透明的，这样保证了服务体验的一致性

54、介绍下原型链、原型的概念。

55、如何用js实现继承。

原型链继承

构造继承

实例继承

拷贝继承

寄生组合继承

 

56、防抖和节流的区别。如何进行防抖和节流设计。

57、什么是闭包，有什么特点，什么场景下要使用闭包。

什么时候使用闭包。1、不想变量污染。 2、想要变量常驻内存，以进行共享

闭包具备以下几个特点：1、函数中套函数，且内部函数作为return值返回。2、内部函数使用外部函数中的变量

 

58、JS实现异步的方案。（非真正的异步，只是相对于与顺序调用函数而言）

       1、回调函数。

       2、发布/订阅模式

       3、promise

59、如何判断一个变量是不是数组。

function isArrayFn(value){if (typeof Array.isArray === "function") {return Array.isArray(value);}else{return Object.prototype.toString.call(value) === "[object Array]";}

60、JS是单线程的么？为什么ajax请求为什么可以异步执行。

61、let、const以及var的区别

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

const声明一个只读的常量。一旦声明，常量的值就不能改变。

62、介绍下内存回收机制，有哪些场景会造成内存泄露。

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束

1. 意外的全局变量。未使用var声明。
2. 闭包引起的内存泄露。
3. 没有清理的dom元素引用。
4. 被遗忘的定时器或者回调。

 

63、this 和原型的区别

       this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。

1.如果是call、apply，指定的this是谁，就是谁。

2.普通的函数调用，函数被谁调用，this就是谁。

64、单页面应用和多页面应用的区别，如何选择

       多页面SEO较好。

65、堆和栈的区别。

堆和栈都是运行时内存中分配的一个数据区，因此也被称为堆区和栈区，但二者存储的数据类型和处理速度不同。堆（heap）用于复杂数据类型（引用类型）分配空间，例如数组对象、object对象；它是运行时动态分配内存的，因此存取速度较慢。栈（stack）中主要存放一些基本类型的变量和对象的引用，其优势是存取速度比堆要快，并且栈内的数据可以共享，但缺点是存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。

JavaScript堆不需要程序代码来显示地释放，因为堆是由自动的垃圾回收来负责的，每种浏览器中的JavaScript解释引擎有不同的自动回收方式，但一个最基本的原则是：如果栈中不存在对堆中某个对象的引用，那么就认为该对象已经不再需要，在垃圾回收时就会清除该对象占用的内存空间。因此，在不需要时应该将对对象的引用释放掉，以利于垃圾回收，这样就可以提高程序的性能。释放对对象的引用最常用的方法就是为其赋值为null，例如下面代码将newArray赋值为null：

66、什么是高阶函数。举例

编写高阶函数，就是让函数的参数能够接收别的函数。

setInterval,setTimeout,sort

67、display none visibility hidden区别

        display none 不生成dom元素。visibility hidden只是不显示，但是占位。

68、data-属性的作用是什么

69、请解释一下inline和inline-block的区别，块级元素和行内元素区别。

       主要是盒子模型的区别。

70、谈一下JS模块化编程。如何实现。

https://www.cnblogs.com/lishuxue/p/6000205.html

CommonJS, AMD, CMD都是JS模块化的规范。

CommonJS是服务器端js模块化的规范，NodeJS是这种规范的实现。

AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD，SeaJS 遵循的是 CMD。

 

requirejs 加载模块的核心思想是利用了动态加载脚本的异步性以及 onload 事件以毒攻毒，关于脚本的加载，我们需要注意一下几点：

• 　　在 HTML 中引入 <script> 标签是同步加载；
• 　　在脚本中动态加载是异步加载，且由于被加载的脚本在事件队列的后端，因此总是会在当前脚本之后执行；
• 　　使用 onload 和 onerror 事件可以监听脚本加载完成，以异步的事件来处理异步的事件

 

 

71、匿名自执行函数写法，什么场景下用这种写法。

//使用匿名自执行函数实现单例模式var obj = (function () {var obj = new Object();obj.kick = function () {console.log('kick');}return obj;})();

 

72、请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

       JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

73、讲一下作用域  作用域链。并举例说明。

变量提升、函数提升。----先使用后定义。

作用域链相关知识的总结：

1.执行环境决定了变量的生命周期，以及哪部分代码可以访问其中变量

2，执行环境有全局执行环境（全局环境）和局部执行环境之分。

3.每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链

4.函数的局部环境可以访问函数作用域中的变量和函数，也可以访问其父环境，乃至全局环境中的变量和环境。

5.全局环境只能访问全局环境中定义的变量和函数，不能直接访问局部环境中的任何数据。

6.变量的执行环境有助于确定应该合适释放内存。

 

每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境就被推入一个环境栈中，当函数执行完毕后，栈将其环境弹出，把控制权返回给之前的执行环境（这句话有助于理解闭包）

 

74、==和===有什么不同？一个字符串一个number类型可能==么

==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。

75、什么是"use strict";?使用它的好处和坏处分别是什么？

在代码中出现表达式-"use strict"; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

坏处：

同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

76、Angular自定义指令的写法

77、Angular监听变量变化的方法

78、Angular如何手动触发页面和模型的同步

79、Angular数据绑定写法，span可以用ng-model么

80、Angular如何实现多级路由。如何设置默认路由

81、Angular中如何对$http请求进行统一的拦截。

82、Angular依赖注入的写法

83、Angular自定义服务的的几种写法

84、Angular如何定义全局变量

85、Angular中 $emit 和$broastcast的区别。 如何阻止事件冒泡。

86、$interval开启的定时循环任务，如何在$scope销毁的时候清除。

87、ng-if ng-show的区别。