前端面试题（六）

目录

1.XSS攻击

2.浏览器如何渲染页面？

3.js继承的方法和优缺点

4.defer和async区别

5.computed和watch的区别

6.Vue中$nextTick作用与原理

---

1.XSS攻击是什么？

XSS是跨站脚本攻击(Cross Site Scripting)。攻击者可以向Web页面里面插入script代码，当用户浏览这个页面时，就会运行被插入的script代码，达到攻击者的目的。XSS的危害一般是泄露用户的登录信息cookie，攻击者可以通过cookie绕过登录步骤直接进入站点。

XSS的分类分为反射型和存储型。反射型就是临时通过url访问网站，网站服务端将恶意代码从url中取出，拼接在HTML中返回给浏览器，用户就会执行恶意代码。存储型就是将恶意代码以留言的形式保存在服务器数据库，任何访问网站的人都会受到攻击。预防XSS攻击的方案基本是对数据进行严格的输出编码，比如HTML元素的编码，JavaScript编码，css编码，url编码等等。

XSS的危害：1.获取cookie：网站中的登录一般都是用cookie作为某个用户的身份证明，这是服务器端返回的一串字符。如果cookie被攻击者拿到，那么就可以绕过密码登录。当空间、论坛如果可以被插入script代码，那么进入空间或者论坛的人的账号就可以轻易被攻击者获取。2.恶意跳转：直接在页面中插入window.location.href进行跳转。 XSS的分类：反射型XSS（非持久型XSS）：通过URL参数直接注入；存储型XSS（持久型XSS）：存储到数据库后读取时注入。

XSS的预防：1.浏览器的防御和“X-XSS-Protection”有关，默认值为1，即默认打开XSS防御，可以防御反射型的XSS，不过作用有限，只能防御注入到HTML的节点内容或属性的XSS，例如URL参数中包含script标签。不建议只依赖此防御手段。2.防御HTML节点内容，通过转义<为<以及>为>来实现防御HTML节点内容。3预防HTML属性，通过转义"->&quto来实现防御，一般不转义空格，但是这要求属性必须带引号。4.预防JavaScript代码，通过将数据进行JSON序列化。5.防御富文本是比较复杂的工程，因为富文本可以包含HTML和script，这些难以预测与防御，建议是通过白名单的方式来过滤允许的HTML标签和标签的属性来进行防御，大概的实现方式是：将HTML代码段转成树级结构的数据。遍历树的每一个节点，过滤节点的类型和属性，或进行特殊处理。处理完成后，将树级结构转化成HTML代码。开启浏览器XSS防御：Http Only cookie，禁止JavaScript读取某些敏感Cookie，攻击者完成XSS注入后也无法窃取此Cookie。

2.说一下浏览器如何渲染页面的？

浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。

分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就可以，transform，z-index等，浏览器会自动优化生成图层。

光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域。

3.说一说js继承的方法和优缺点？

原型链继承：让一个构造函数的原型是另一个类型的实例，那么这个构造函数new出来的实例就具有该实例的属性。优点：写法方便简洁，容易理解。缺点：在父类型构造函数中定义的引用类型值的实例属性，会在子类型原型上变成原型属性被所有子类型实例所共享。同时在创建子类型的实例时，不能向超类型的构造函数中传递参数。

借用构造函数继承：在子类型构造函数的内部调用父类型构造函数；使用apply()或call()方法将父对象的构造函数绑定在子对象上。优点：解决了原型链实现继承的不能传参的问题和父类的原型共享的问题。缺点：借用构造函数的缺点是方法都在构造函数中定义，因此无法实现函数复用。在父类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。

组合继承：将原型链和借用构造函数的组合到一块。使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。优点：解决了原型链继承和借用构造函数继承造成的影响。缺点：无论在什么情况下，都会调用两次超类型构造函数。一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

原型式继承：在一个函数A内部创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。本质上，函数A是对传入的对象执行了一次浅复制。ES5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时，Object.create()与这里的函数A方法效果相同。优点：不需要单独创建构造函数。缺点：属性中包含的引用值始终会在相关对象间共享

寄生式继承：寄生式继承背后的思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。优点：写法简单，不需要单独创建构造函数。缺点：通过寄生式继承给对象添加函数会导致函数难以重用。

寄生组合式继承：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。优点：高效率只调用一次父构造函数，并且因此避免了在子原型上面创建不必要，多余的属性。与此同时，原型链还能保持不变。缺点：代码复杂。

ES6 Class实现继承：ES5的继承实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。优点：语法简单易懂，操作更方便。缺点：并不是所有的浏览器都支持class关键字。

4.说一说defer和async区别？

浏览器会立即加载JS文件并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。加上async属性，加载JS文档和渲染文档可以同时进行（异步），当JS加载完成，JS代码立即执行，会阻塞HTML渲染。加上defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），当HTML渲染完成，才会执行JS代码。

渲染阻塞的原因： 由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JavaScript引擎为互斥的关系。当浏览器在执行JavaScript程序的时候，GUI渲染线程会被保存在一个队列中，直到JS程序执行完成，才会接着执行。如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

5.说一说computed和watch的区别？

computed：计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。

watch：更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用computed，利用computed的缓存特性，避免每次获取值时，都要重新计算。

watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用watch选项允许我们执行异步操作（访问一个API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

6.说一说 Vue 中 $nextTick 作用与原理？

Vue在更新DOM时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。

$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。

$nextTick的原理：$nextTick本质是返回一个Promise。

应用场景：在钩子函数created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中。

（来源：牛客网）