前端面试（简答）_addeventlistener storage 无效-CSDN博客

本文链接：https://blog.csdn.net/hcy48/article/details/65629330

1 IE盒子模型
ie盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
box-sizing：content-box（标准盒模型），border-box（ie盒子）

2 JS闭包
作用：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
匿名函数本身也是一个闭包

3 动态创建的节点如何保证绑定事件成功
如果事件绑定在append之前时，会出现绑定事件失效。

$("动态子元素").on("事件",function(){
执行函数;
});
$("父元素").append("动态子元素")；

解决方法：使用on绑定事件，给此动态节点的父元素(非动态节点)绑定。
即：

$("父元素").on("事件",“动态子元素”,function(){
执行函数;
});
$("父元素").append("动态子元素")；

4 混杂模式与标准模式
在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

5 HTML5 为什么只需要写 <!DOCTYPE HTML>
HTML5不基于 SGML(Standard Generalized Markup Language标准通用标记语言)，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6 导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

7 浏览器内核
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
1）Trident: IE 以Trident 作为内核引擎；
2）Gecko: Firefox 是基于 Gecko 开发；
3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；
4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

8 HTML语义化
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

9
shift:从集合中把第一个元素删除，并返回这个元素的值。
unshift: 在集合开头添加一个或更多元素，并返回新的长度
push:在集合中添加元素，并返回新的长度
pop:从集合中把最后一个元素删除，并返回这个元素的值。

10 eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(‘(‘+ str +’)’);

11 call() 和 apply() 的区别和作用？
可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。
apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3]);
call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3);
用法实例：
用的比较多的，通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过：var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));这样domNodes就可以应用Array下的所有方法了。

12 React特点
优点：
（1）React速度很快。它引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。
（2）跨浏览器兼容。虚拟DOM帮助我们解决了跨浏览器问题
（3）模块化。编写独立的模块化UI组件，每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
（4）能够实现服务器端的渲染，便于搜索引擎优化。
（5）JSX存在。可以直接写XML（不知算不算优点）
（6）单向数据流
（7）同构的JavaScript。单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
缺点：
（1）React本身只是一个V而已。
（2）太新，API很少，也不知道未来会有哪些坑

13 性能优化的方法？
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

14 原生ajax要会写，记得兼容性

15 display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。会触发reflow。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。只会触发repaint。

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

16 click()和onclick()的区别：
（1）onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么
click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。
（2）click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外，如果在click括号内定义了其他可执行语句，则click方法会在执行完onclick事件之后执行括号内部的语句。

onclick是事件，而click是方法，两者是不同的概念。

17 ES6新特性
（1）箭头操作符
（2）类的支持，引入了class关键字
（3）增强的对象字面量
（4）字符串模板
（5）解构
（6）let与const 关键字
（7）for of 值遍历
（8）模块module
（9）Map，Set 和 WeakMap，WeakSet
（10）Symbols基本类型
（11）Math，Number，String，Object 的新API
（12）Promises异步处理模式

18 JS右键事件

               if(e.button ==2){
                   alert("你点了右键");
               }else if(e.button ==0){
                   alert("你点了左键");
               }else if(e.button ==1){
                   alert("你点了滚轮");
               }

或者 contextmenu 事件（jQuery里的）

19 键盘事件与鼠标事件应区分开

21 js继承
javascript语言实现继承机制的核心就是prototype，而不是Java语言那样的类式继承。Javascript 解析引擎在读取一个Object的属性的值时，会沿着原型链向上寻找，如果最终没有找到，则该属性值为 undefined；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。

原型链继承
借用构造函数继承
组合继承(原型+借用构造)
原型式继承
寄生式继承
寄生组合式继承

22
DOM中的事件对象：（符合W3C标准）
preventDefault() 取消事件默认行为
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
stopPropagation() 取消事件冒泡对当前节点无影响。
IE中的事件对象：
cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为

23
for in可以获取object的所有属性,包括自定义属性以及原型链属性。
hasOwnProperty()只能获取自定义属性，无法获取原型链属性。

24 异步加载和延迟加载

异步加载的方案：动态插入 script 标签
通过 ajax 去获取 js 代码，然后通过 eval 执行
script 标签上添加 defer 或者 async 属性。defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
创建并插入 iframe，让它异步执行 js
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的

25 什么是网站重构
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。
对于传统的网站来说重构通常是：

表格(table)布局改为 DIV + CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)
对于移动平台的优化
针对于 SEO 进行优化
深层次的网站重构应该考虑的方面
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中
压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

26 三次握手和四次挥手

27 CSS3新特性
CSS3实现圆角（border-radius），阴影（box-shadow）；
@Font-face 特性，加载字体；
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）；
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜；
增加了更多的CSS选择器多背景 rgba ；
在CSS3中唯一引入的伪元素是::selection；
媒体查询，多栏布局；
border-image

28 js异步方法
回调函数
事件监听
发布/订阅
Promises对象

29 jQuery获取宽度
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。注意，不是width
innerWidth() 方法和offsetWidth属性返回元素的宽度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

30
js七种数据类型：Sting Object null undefined Array Boolean Number
js五种基本类型：String Boolean Number null undefined
typeof六种返回格式：’string’ ‘number’ ‘object’ ‘function’ ‘boolean’ ‘undefined’
js内置对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error

31
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts函数会在被调用的时候才执行。
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定义（undefined）。

32 typeof和instanceof
JS里面String的初始化有两种方式：直接赋值和String对象的实例化

var str = "abc";
var str = new String("abc");

通常来说判断一个对象的类型使用typeof，但是在new String的情况下的结果会是object，此时需要通过instanceof来判断。
例如：

var str1=new String('str1');
var str2='str2';
console.log(typeof str1);//object
console.log(typeof str2);//string
console.log(str1 instanceof String);//true
console.log(str2 instanceof String);//false

33 常见网站攻击
1.XSS指cross-site-scripting, 跨站脚本攻击，指通过存在web安全漏洞的web网站注册的用户的浏览器内运行非法的html标签或者js而进行的攻击。用户通过在自己的浏览器上运行这些脚本就会被攻击。
2.SQL注入，指的是针对web应用使用的数据库，通过运行非法的SQL而产生的攻击。 3.OS命令注入攻击，指的是通过web应用，执行非法的操作系统命令达到非法攻击的目的。
4.HTTP首部注入攻击，指攻击者通过在相应首部字段内插入换行，然后添加任意响应首部过主体的攻击。邮件首部注入攻击，指攻击者通过向邮件首部to或subject内任意添加非法内容引起的攻击。
5.会话劫持，指攻击者通过某种手段拿到了用户的会话id，并非法使用此会话id伪装成用户达到攻击的目的。
6.还有DoS DDoS，一种让运行中的服务成停止状态的攻击。
7.CSRF，跨站点请求伪造攻击，指的是攻击者通过设置好的陷阱，强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新，属于被动攻击。

34 同源策略
概念：
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制：
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

35 cookie和session的区别
cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗—— 考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能——考虑到减轻服务器性能方面，应当使用COOKIE。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
——
如果web服务器端使用的是session，那么所有的数据都保存在服务器上，客户端每次请求服务器的时候会发送当前会话的sessionid，服务器根据当前sessionid判断相应的用户数据标志，以确定用户是否登录或具有某种权限。由于数据是存储在服务器上面，所以你不能伪造，但是如果你能够获取某个登录用户的 sessionid，用特殊的浏览器伪造该用户的请求也是能够成功的。sessionid是服务器和客户端链接时候随机分配的，一般来说是不会有重复，但如果有大量的并发请求，也不是没有重复的可能性.
——
所以建议是：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

36 cookies，sessionStorage 和 localStorage 的区别
cookie:是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同:
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage带来的好处：
1.减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递；
2.快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示；
3.临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
其他：
WebStorage支持事件通知机制，可以将数据更新的通知发送给监听者；
window.addEventListener('storage',function(){ //当sessionStorage或localStorage中的值发生变动时所要执行的处理 },false);

事件通知机制

WebStorage 的 api 接口使用更方便。

38 js函数重载
在js中函数没有重载！当声明了多个同名函数时，后面的函数会覆盖前面的函数。并且解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用。也就是先读取function函数的声明。
例如：

<script> 
    var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
　 } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
</script>

输出：4 4

40
JavaScript实现继承的常用方法有哪些？你推荐的是哪一种？
（可以看看《JavaScript高级程序设计》的第六章。里面详细的介绍了各种继承方法。其中，值得推荐的是组合方式。ES5的Object.create()就是使用了该方式实现继承的！）

在项目开发完成之后，根据雅虎性能优化规则，需要对html，JS，CSS，图片需要做出怎样的处理？是否可以借助构建工具实现自动化？
（减少http请求、减少带宽、提高加载速度等方面进行答题即可。对于自动化，可以使用gulp构建工具！）

我们在跟后端进行异步请求时，很容易陷入嵌套太深的陷阱？
（可以使用promise https://segmentfault.com/a/1190000002395343）

请写个正则表达式匹配所有二级域名是9game.cn和其目录下的网址，比如：http://abc.9game.cn/sname/view/
如果这个非常重要的话，怎么保护他呢？

项目测试没问题，但是放到线上就有问题了，你是怎么解决的？？

41 js常见调试方法
常用调试工具是chrome控制台或者firebug
（1）alert调试。影响网页性能，不推荐，偶尔可以简单粗暴的用一下。调试后要手动清理alert语句。
（2）Console调试。有多种形式。

console.log("abc");
console.table([[1,2,3,4],["a","b","c","d"]]);
console.error("error");
console.warn("warn");
console.log("%c测试","font-size:50px;color:red;")

（3）断点调试。即是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。
sources断点：在source中设置相应断点
debugger断点：在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。
dom断点：

42 JavaScript和Java的关系
（1）Java需要在虚拟器上运行，并且事先编译，需要多种编译器和支持文件才能运行。JavaScript是一种解释性编程语言，不需要经过编译，直接插入网页，由浏览器一边解释一边执行。
（2）JavaScript是基于对象的，他是一种脚本语言，它基于对象和事件驱动，因而它本身提供了非常丰富的内部对象供设计人员使用。而java是面向对象的，即java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。
（3）Java的语法规则比JavaScript要严格的多，功能要强大的多。

43 jQuery整体架构
这里写图片描述

44 嵌套div的垂直Margin

<div class="parent">
  <div class="child">
  </div>
</div>

若父与子都设了margin-top，以大的为准。
若父与子中只有一个设了margin-top，以这个值为准。
上面两种情况都是父和子作为一个整体移动，两者相对位置不变。
下面的情况是子盒子浮动的前提：
以父盒子值为准两者作为整体移动。然后，子盒子以自己的值为准相对父盒子移动。若未设置margin-top，则相当于margin-top=0px判断。
如何避免高度塌陷

45 href=”#”与href=”javascript:void(0)”的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在外部给链接添加事件时，要使用后者。不然事件可能会失败。