【JS的的变量提升】

提到变量提升 ， 就跟作用域离不开。

所以可以从 作用域为切入点：

全局变量 ， 任何位置都能访问。

局部变量 ， 只能在当前作用域被访问。

然后再说 提升：

全局变量  ， 会被提升到全局作用域的开始位置（最前面）

局部变量 ，如果是在函数内部，会被提升到函数体内部的开始位置

分析变量提升现象：

要使用变量 ，先看变量处于什么作用域 ，如果是局部作用域 ，看是不是在当前要使用的作域声明的。如果是，直接用，如果不是，寻找上一级作用域 ， 直到一直寻找到全局作用域为止。还找不到，这个变量就是undefined。其实就是作用域。

最后提一嘴：

ES6新增的两个关键字

let 创建变量 ， 没有变量提升 ，有块级作用域限制。

const 创建常亮 ， 没有 提升 ，不允许修改 ，定义及初始化。

这样提及的就已经比较完整了，算是比较浅的回答，可以根据自己掌握的情况作适当删减和细化。

【图片的懒加载】

可以先说一下主线程加载的弊端是什么

然后引出 懒加载这种方式 ，现象是什么样 ， 好处是什么 ，前端后端两个角度。

再讲实现原理 ，最后说出几个 工具插件。

外围补充：懒加载 和 预加载

弊端 ：响应时间长 ，数据量大 ，交互不友好

懒加载：又可以称为按需加载，是很好的优化网页的方式，通过特定的交互行为触发加载行为，实现类逻辑断点，加快了初始加载速度，减轻体积。可以举栗子，微博，电商商品展示页等。实现过程中用到异步，原生JS中的XMLHttpRequest对象，open指定请求方式，send发送请求，onload/onreadystatuechange监听状态，根据readyState状态码做判断获取回调数据 ，做JSON/XML等类型的复杂数据解析。通过（art-template）模版引擎技术实现页面渲染，提高交互体验。

工具：jqueryLazyload、echo.js

【promise】

Promise  ES6 中提出的，用于异步*作。

JS执行环境时单线程的。

Promise 支持多重链式调用。可以避免层层嵌套。

待续..

【重绘(repaint)和回流(reflow)】

页面渲染首先构建DOM树，根据节点关系渲染树（render树）

重绘：就是重新绘制。当元素的外观，风格样式变化，不影响布局的，这时候重新渲染 ，就是重绘。

回流：当渲染树的一部分或全部因尺寸，布局位置，隐藏显示等需要重绘，就是回流，也就是说， 回流之后会进行重绘。

重绘的代价要比回流小 ， 因为不涉及布局.

常见的 出现回流的场景：

1、第一次页面渲染 ， 也叫初始化

2、添加、删除等*作可见的DOM元素

3、元素尺寸、位置发生变化

4、窗口的resize

从性能优化的角度讲：

修改样式和动态*作DOM做批量处理，

将程序中获取到的属性值，储存到变量，提高复用，减少重复取值

外围补充：浏览器的flush队列 ， 可以了解一下

【LocalStorage和sessionStorage的区别】

localStorage（长期存储）：储存到本地 ，只要不手动删除，浏览器关闭后数据依然存在。

sessionStorage（临时存储）：将数据源维持在一个存储区域， 生命周期跟随浏览器，浏览器打开期间 ，页面重新加载，就可以使用，随着浏览器关闭而释放掉。