烂笔头

面经

2018/03/10 javascript 转发

前端安全

XSS：跨站脚本攻击

  • 它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。

  • XSS的防御措施： 过滤转义输入输出 避免使用eval、new Function等执行字符串的方法，除非确定字符串和用户输入无关 使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的 使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对象关键字符进行过滤与转义

CSRF：跨站请求伪造

  • 其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上

  • CSRF防御措施： 检测http referer是否是同域名 避免登录的session长时间存储在客户端中 关键请求使用验证码或者token机制 其他的一些攻击方法还有HTTP劫持、界面操作劫持

ES6

let

let声明的变量拥有块级作用域,let声明仍然保留了提升的特性，但不会盲目提升。 let声明的全局变量不是全局对象的属性。不可以通过window.变量名的方式访问 形如for (let x…)的循环在每次迭代时都为x创建新的绑定 let声明的变量直到控制流到达该变量被定义的代码行时才会被装载，所以在到达之前使用该变量会触发错误。

JS实现继承的几种方式

  • 构造函数实现继承 
    function Parent1(){
  this.name = "parent1"
}
function Child1(){
  Parent1.call(this);
  this.type = "child1";
}

  • 借用原型链实现继承

  • 组合式继承 
    function Parent3(){
  this.name = "parent3";
  this.play = [1,2,3];
}
function Child3(){
  Parent3.call(this);
  this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

性能优化

雪碧图，移动端响应式图片，静态资源CDN，减少Dom操作（事件代理、fragment），压缩JS和CSS、HTML等，DNS预解析

浏览器渲染原理

图片

  • HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
  • 把DOM Tree和CSS Rule Tree经过整合生成Render Tree（布局阶段）
  • 元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上

前端路由的原理

  • 在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。
  • HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。
  • Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

script标签的defer、async的区别

  • defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
  • async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关

同源与跨域

什么是同源策略？

限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 一个源指的是主机名、协议和端口号的组合，必须相同

  • 跨域通信的几种方式

    JSONP Hash postMessage WebSocket CORS

什么是闭包？

有权访问另一个函数作用域中的变量的函数。

闭包的作用，就是保存自己私有的变量，通过提供的接口(方法)给外部使用，但外部不能直接访问该变量。

当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会“污染”全局的变量时，就可以用闭包来定义这个模块。

闭包的缺点：闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

函数套函数就是闭包吗？：不是！，当一个内部函数被其外部函数之外的变量引用时，才会形成了一个闭包。

沙箱模式 沙箱模式就是一个自调用函数，代码写到函数中一样会执行，但是不会与外界有任何的影响，比如jQuery

(function () {
   var jQuery = function () { // 所有的算法 }
   // .... // .... jQuery.each = function () {}
   window.jQuery = window.$ = jQuery;
})();
$.each( ... )

查看原型

以前一般使用对象的__proto__属性，ES6推出后，推荐用Object.getPrototypeOf()方法来获取对象的原型

BFC相关问题

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC的渲染特点

  1. BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
  2. BFC的区域不会与浮动元素的box重叠（清除浮动原理）
  3. 计算BFC的高度的时候，浮动元素也会参与计算

哪些元素会生成 BFC

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  • 根元素
  • overflow不为visible
  • float不为none
  • position为absolute或fixed
  • display为inline-block、table-cell、table-caption、flex、inline-flex

Search

    Post Directory