前端面试知识总结二：其他相关知识

• 最熟悉的项目，用到了哪些技术，有哪些技术难点，怎么解决的？

最熟悉的项目就是公司产品，由于公司产品开发的比较早，代码写的不是很规范，主要使用了 requirejs 进行模块化封装，逐步替换原始的 dojo 框架，更换为新的表格框架。以及使用 echart 进行数据可视化展示。有一个难点是之前使用的 dojo 进行模块化开发，dojo 内置的模块化不支持非模块化库的 AMD 方式引用，比如一些 jQuery 库对 jQuery 的依赖，dojo 模块化没法处理。我来之后经过思考，以及 Google，发现了一个小众的 use-amd 这个库，可以对 dojo 的模块化进行补充。(？？？这算啥)

• JS 作用域链

当代码在一个环境中执行时，都会创建一个作用域链。 作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。整个作用域链的本质是一个指向变量对象的指针列表。作用域链的最前端，始终是当前正在执行的代码所在环境的变量对象。
如果这个环境是函数，则将其活动对象（activation object)作为变量对象。活动对象在最开始时只包含一个变量，就是函数内部的 arguments 对象。作用域链中的下一个变量对象来自该函数的包含环境，而再下一个变量对象来自再下一个包含环境。这样，一直延续到全局执行环境，全局执行环境的变量对象始终是作用域链中的最后一个对象。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将 this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当 JavaScript 需要查找变量 X 的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有 X 属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在 x 变量，并抛出一个引用错误（ReferenceError）的异常。

• 移动端有一万个数据，每个数据插入一个 li 中，如何在单页面中优化这个 dom

首先，获取 li 的高度，然后计算单屏的高度，然后获取单屏中渲染的 li 的数量,可以提前渲染上一屏和下一屏的数据，然后在滑动的过程中动态加载 li 进行渲染。对于数据也可以通过 ajax 动态获取，避免一次请求过多，另外请求到的数据可以缓存到变量中，避免重复请求浪费数据。

• jquery 和 vue 的区别

jQuery 使用选择器($)来选择 DOM 元素对其进行操作，并简化和优化了很多 DOM 方法，与原生方法相比可以更加简单的操作 DOM，但是其本质数据和 DOM 还是绑定在一起的。

Vue 是一个微型的 MVVM 库，主要处理的是 VM 方面，即 ViewModel 上，vue 通过虚拟 DOM 和对对象的取值赋值的劫持，实现了数据视图的双向绑定，开发者只需专注于对数据的操作，就可以实现对 View 的修改,实现了表现与数据分离。

• webpack 原理，使用方法

webpack 中 JS，css，HTML 片段，图片等资源都认为是模块，可以统一打包，它从一个入口，逐步分析入口文件中的依赖关系，逐层寻找依赖，最终把所有的依赖打包进一个最终的文件

• HTTP 相关知识

HTTP 请求由三部分组成：请求行，消息报文和请求正文。

HTTP（超文本传输协议）是基于请求与响应模式的、无状态、应用层的协议，常基于 TCP 的连接方式。

GET 和 POST 的区别：

get 重在获取资源，post 常用于提交资源；get 传输数据是通过 url，数据对用户是可见的，post 采用 post 方式传递数据，数据包含在请求体中，对用户是不可见的；get 传输数据量少，受 URL 长度限制，post 传输量大，上传文件只能使用 post 方法；get 安全性低，会泄露隐私数据，post 安全性更高；get 只能传 ASCII 码数据，中文会有乱码；post 支持标准字符集。

状态码：
1XX：标识信息——信息已被接收，继续处理。
2XX：成功——已被成功理解、接收。
3XX：重定向——要完成请求必须进行进一步的操作。
4XX：客户端错误——请求有语法错误或者无法实现。
5XX：服务器端错误——服务器无法实现合法请求。

• web 网络安全

  1. 跨站点脚本攻击
     标准的 HTML 转码，对页面输出参数进行强化检查，在客户端判断的数据在服务端进行进一步的判断，提供全局的转码和过滤函数。

  2. SQL 注入攻击
     常见的就是将 SQL 语句添加到用户请求参数中，处理方法：优化 SQL 请求参数传输，过滤危险字符。

  3. 网站后台通过不安全的链接访问
     网站没有通过 SSL 支持，添加对 HTTPS 的支持。

• 首尾固定，中间栏自适应

采用弹性盒模型，首尾固定高度，中间伸缩填满剩余部分，并且超出部分出现滑动条

header,
footer {
  min-height: 60px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow: auto;
}

.wrap {
  flex: 1;
}

<div class="content">
    <header>header</header>
    <div class="wrap">
        <div class="main">main</div>
    </div>
    <footer>footer</footer>
</div>