• 浏览器同源策略，是一种安全机制。它的特点是，阻止Ajax进行跨域（非同源）下的数据请求。
• CORS只在浏览器中才起作用，在Node服务器上使用ajax工具跨域请求，是没有任何问题的。
• 总结：只有在浏览器中，CORS同源策略才会阻止ajax的跨域请求 。

如何解决CORS阻止ajax跨域请求的问题？（常用有三种）

• JSONP 只能解决GET请求的跨域请求问题
• CORS 在后端添加headers以允许被非同源访问

前端代理解决"CORS阻止ajax跨域请求"的机制是怎样的呢？

• 本地服务器做了代理，当收到前端业务请求时，进行代理转发，相当于是node服务向远程后台服务器发起请求数据。
• node服务向远程发起请求，跨域了，但是node环境中没有CORS同源策略。因此不跨域

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

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

  3：提高编译器效率，增加运行速度。

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

• JSON.parse：将一个JSON格式的字符串转换成对象。

• 作用: 以指定对象为原型创建新的对象

• 为新的对象指定新的属性, 并对属性进行描述

• get ：用来获取当前属性值得回调函数

• set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值

• 存取器属性：setter,getter一个用来存值，一个用来取值

• 作用: 将函数内的this绑定为obj, 并将函数返回

• 都能指定函数中的this

31.为什么要使用图片懒加载

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

• 将资源路径赋值到img标签的data-xx属性中，而不是src属性
• 获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-xx的值赋值到src里去

32.React如何实现图片懒加载

是一个文件大小仅4kb的图片懒加载组件（不依赖其它第三方库），组件会根据用户当前浏览的区域去自动加载对应的图片（用户还没有浏览的区域图片则不会进行加载）。

允许图片加载之前，指定一张相对较小的封面图。组件会优先加载封面图片，以优化用户浏览感受。当原图加载完成之后则会覆盖封面图片。

• Chrome每个模块及其主要功能为：

  Network ：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。

  Source ：用于查看和调试当前页面所加载的脚本的源文件。

  TimeLine ： 用于查看脚本的执行时间、页面元素渲染时间等信息。

  Profiles ：用于查看 CPU 执行时间与内存占用等信息。

  Resource ：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。

  Audits ：用于优化前端页面，加速网页加载速度等。

  Console ：用于显示脚本中所输出的调试信息，或运行测试脚本等。

• 回调地狱是：把函数A当做参数传递到函数B中，在函数B中以形参的方式进行调用；当回调函数嵌套过多时会出现回调地狱，即没有可维护性和可读性代码；
• promise：ES6中有个内置构造函数叫promise，主要用于异步计算，每个异步事件在执行时都有三个状态：执行中(pending)、成功(resolve)、失败(rejected)；是解决回调地狱的方案之一，把回调地狱写的优雅的方案之一；

• async是声明某个函数式异步的，await是等待某个操作的完成
• 语法上强制规定await只能出现在async函数中

• 原型对象Prototype:每个构造函数天生自带一个成员叫做prototype；构造函数中、公共的方法存放在原型对象上；它的作用是共享方法；
• 对象原型_proto_：每个对象天生自带一个成员叫_proto_；它指向构造函数的prototype原型对象；之所以实例对象可以使用构造函数prototype原型对象的属性和方法，就是因为有_proto_原型的存在；
• 实例对象的_proto_和构造函数的prototype指向的是同一个对象空间，是等价的；
• 原型链：访问一个对象成员时，如果自己身上没有就会去_proto_中找，如果没有就再去构造函数的prototype的_proto_里找，直到找到object、prototype里没有，返回undefine；这样一层层的往上找会形成一个链式结构、称为原型链

• mvc:由model模型、view视图、controller控制器组成。是软件架构中最常见的一种框架。它的工作原理是当用户触发事件时，view层会发送指令到controller层，controller层去通知model更新数据，model更新完数据后直接显示在view上。缺点：耦合度太高

• BSR客户端端渲染(前后端分离)：视图和数据的组装是在客户端完成的
• SSR 服务器渲染(前后端不分离)：视图和数据的组装是在服务器端完成
• BSR的优缺点：前后端分离，代码更容易维护；数据化应用，交互更加丰富；对于前端工程师而言价值更高；但是它的SEO有严重的劣势；在TOB的产品上应用更加广泛
• SSR的优缺点：前后端不分离，对后端要求更高；有利于SEO优化；对客户端压力比较小，服务器压力大；在TOC产品上应用比较广泛。
• 原理：在node环境下运行的，用的是第三方的库，把动态组件转化为HTML

• 搜索引擎优化，让更多用户找到你

• 优化的原则是：尽量减少js、css功能，尽肯能多地使用静态html。

  • 使用h1-h6标签，尽量减少使用div,使用htm5语义化标签，加上title属性，给图片加上alt属性

• 脚手架环境中：能尽量写死的就尽量写死，meta标签中添加title属性，给图片加alt属性，减少使用div

• 浅复制：浅复制一般用于基本数据类型。基本数据类型存在栈中，直接复制即可。

  ‘=’直接赋值、Object.assign()【Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。】

• 深复制：对象层级过深时，无法自动更新，需要用到深复制。就是把数据粉碎再组装。原理：对象的地址在栈里面，内容在堆里面。直接复制时只是复制它的地址，但指向的是同一个堆。深复制不仅能复制地址还能复制堆。JSON.parse(JSON.stringify(state.goodObj)) 、递归拷贝、使用Object.create()方法、

• AJAX是异步的javascript和XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。
• 优点：异步模式、提升了用户体验；优化了浏览器和服务器之间的数据传输、减少不必要的数据往返；在客户端运行、减少了服务器的负载；
• 特点：动态不刷新(局部更新)
• 原生js，ajax请求步骤：
• 2.配置本次请求信息：ajax对象.open(请求方式，请求地址，是否异步)

• 0：表示创建一个ajax对象成功
• 2：响应体已经回到浏览器，但不能是使用
• 3：浏览器正在解析响应报文
• 4：浏览器把响应体分离成功，可以正常使用

• 对开发时的一些内容做了修改
• 规则：声明变量前必须有var关键字，函数的形参不可以重复，声明式函数调用时函数内部没有this，全局声明式函数调用时，函数内部的this指的是window，事件函数里面的this指向事件源。

• 每个函数的内部都有一个this关键字，this只与函数的调用方式有关。
• 对象内部this指向调用者
• 事件处理函数this指向事件源

44.数组常用的方法：

• 1、push:在数组末尾添加一个元素；返回值是数组长度

• 2、pop:删除数组末尾的一个元素；返回值是被删除的那个元素

• 3、unshift:在数组前面添加一个元素；返回值是数组的长度

• 4、shift:删除数组前面一个元素；返回值是被删除的那个元素

• 5、splice:按照索引截取数组中的某些内容；返回值是被删除的元素集合

• 6、reverse:用来翻转数组；返回值是 原 数组

• 7、sort:排序；按照字符编码排序

• 8、concat:拼接数组；不改变原数组、返回 新 数组

• 9、join:把数组里面的每一个数据拼接起来变成字符串；返回 新 数组

• 10、index of:用来找到数组中某一项的索引；返回值：索引、找不到返回-1

• 11、lastIndex of:用来找到数组中某一项的索引、从后面开始找；返回值：索引、找不到返回-1

• 13、map:遍历数组、可以对数组中某一项进行操作，返回新数组；

• 14、filter:遍历、筛选数组；把原始数组中满足条件的筛选出来，返回一个新数组；

• 冒泡排序：先遍历数组、两两进行比较、若前一个比有一个大、那就把两个数据换个位置、遍历完成一遍后、最后一个数字就是最大那个；然后进行第二遍遍历、按之前规则，第二大数字就会跑到倒数第二个位置，以此类推，最后按从小到大排序

• 选择排序：先假定数组中第0个就是最小数字索引，遍历数组、只要有一个数字比我小、就替换之前记录的索引、直到数组遍历结束后、找到最小的那个索引位置换到第0个位置；再来第二遍，假设第一个是最小数字的索引、再遍历一遍数组、找到那个比我小的索引、以此类推把数组排序好；

• 1.ES6中set方法去重；set里面的元素不允许重复；

46.字符串常用的方法

• charAt(索引)：找到字符串中指定索引位置并返回
• indexOf(字符)：按照字符找到对应的索引
• subString(起索引，终索引)：截取字符串;包前不包后；第二个参数没有表示截取到末尾
• subStr(从哪个索引开始，截取几个)
• repeat:重复字符串，返回新的字符串
• fromcharcode():根据传入的编码，变成编码对应的字符
• trim:去除首尾空格
• replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

• 阻塞：阻塞调用是指调用结果返回之前，当前线程会被挂起，一直处于等待消息通知，不能够执行其他业务。函数只有在得到结果之后才会返回
• 非阻塞：非阻塞和阻塞的概念相对应，指在不能立刻得到结果之前，该函数不会阻塞当前线程，而会立刻返回。

• window：是浏览器内置对象，包含操作浏览器的方法；可以获取浏览器的相关信息如：窗口位置、确定窗口大小、弹出对话框等等
• document对象：是浏览器内置对象，存储着用来操作元素的方法。

50.JS哪些操作会造成内存泄露

• 意外的全局变量引起的内存泄露
• 没有清理的DOM元素引用
• 被遗忘的定时器或者回调
• 子元素存在引起的内存泄露

51.从输入url到页面加载完成发生了什么？

• 1.浏览器的地址栏输入URL并按下回车
• 2.浏览器查找当前URL的DNS缓存记录
• 6.服务器处理请求，浏览器接收HTTP响应
• 7.渲染页面，构建DOM树

• ES6模块化：引入的外链式里使用了大量全局变量，可能会与自己写的变量冲突；希望可以引入，运行完了不要污染我的全局环境；import/export语法
• CommenJs:node应用由模块组成，采用CommenJs模块规范；每个文件就是一个模块，拥有自己独立的作用域、变量、以及方法等，对其他的模块不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性(module.exports)是对外的接口。加载某个模块其实是加载module.exports属性。require方法用于加载模块。
• CommonJs与ES6区别：前者支持动态导入、后者不支持；前者是同步导入、后者是异步导入；前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化

• 共同点：都可以改变this指向

• 区别：传参方式不同；除第一个参数以外(要改变的this指向)，call可以接收一个参数列表、apply只能接收一个数组；bind其他两个方法作用也是一致的，只是该方法会返回一个函数

• • 方法的含义是一样的，即方法功能是一样的；
  • 第一个参数的作用是一样的；

  call 与 apply 的不同点：两者传入的列表形式不一样

  • call可以传入多个参数；

  • apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

    存在的意义：实现（多重）继承

• 因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。