今天完成的事：

复习css和js深度思考，准备复盘评审

明天计划的事：

继续复习知识点

遇到的问题：

暂无

收获：

闭包

闭包指有权访问另一个函数内部变量的函数，当在函数内部定义了其他函数，也就创建了闭包

谈谈你对闭包的理解

使用闭包可以模仿块级作用域

优点：可以避免全局变量的污染，实现封装和缓存；

缺点：闭包会常驻内存，增大内存使用量，使用不当很容易造成内存泄漏。解决方法：在退出函数之前，将不适用的局部变量设为null。

闭包最大的两个用处：1.可以读取函数内部的变量；2.使这些变量始终保存在内存中；3.封装对象的私有属性和私有方法

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能享受访问，访问到window对象即被终止。

简单来说，作用域就是变量和函数的可访问范围

如何创建块级作用域

• ES6 使用let和const
• 闭包

BOM

BOM对象有哪些？

• window        JS最顶层对象
• location      浏览器当前URL信息
• navigator     浏览器本身信息
• screen        客户端屏幕信息
• history       浏览器访问历史信息

window对象的方法

alert(),prompt(),confirm(),open(),close(),print(),focus(),blur(),moveBy(),moveTo(),resizeBy(),resizeTo(),scrollBy(),scrollTo(),setInterval(),setTimeout(),clearInterval(),clearTimeout()

history对象

history.go(-1);     // 后退一页 history.go(1);      // 前进一页 history.back();     // 后退一页 history.forward();  // 前进一页 复制代码

窗口位置

• 跨浏览器取得窗口左边和上边的位置

var leftPos=(typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX; var topPos=(typeof window.screenTop == 'number') ? window.screenTop : window.screenY; 复制代码

• 将窗口移动到指定位置

moveTo():接收新位置的x,y坐标值

moveBy():接收在水平垂直方向上移动的像素数

窗口大小

outerWidth和outerHeight返回浏览器窗口本身的尺寸，innerWidth和innerHeight返回容器视图区的大小

• 调整窗口大小 resizeTo()和resizeBy()

如何检测浏览器的类型

使用navigator.userAgent

var ua = navigator.userAgent; var isChrome = ua.indexOf('Chrome') 复制代码

拆解url的各部分

使用location的属性

• href          完整url地址
• protocol      协议
• host          主机名+端口号
• hostname      主机名
• port          端口号
• pathname      相对路径
• hash          #锚点
• search        ?查询字符串

history.go(1) 复制代码

DOM

为什么操作DOM慢？

因为DOM属于渲染引擎的东西，JS又是JS引擎的东西，当我们通过JS操作DOM的时候，涉及到两个线程间的通信，而且操作DOM可能会带来重绘回流的情况，所以就导致了性能问题。

插入几万个DOM，如何实现页面不卡顿？

• 1.分批次部分渲染DOM，通过requestAnimationFrame去循环插入DOM
• 2.虚拟滚动，只渲染可视区域内的内容

什么情况阻塞渲染

• 1.HTML和CSS都会阻塞渲染，如果想渲染快就应该降低一开始渲染的文件大小，扁平层级，优化选择器
• 2.浏览器解析到script标签时会暂停构建DOM，

解决方法：

• ①将script标签放到body底部
• ②给script标签加上defer属性，该JS文件会并行下载但等到HTML解析完后顺序执行
• ③script标签加上async属性，表示JS文件下载和解析不会阻塞渲染

重绘Repaint和回流Reflow

重绘是当节点改变样式而不影响布局，回流是当布局或几何属性需要改变

回流必定会发生重绘，回流的成本比重绘高

性能问题：1.改变window大小 2.改变字体 3.添加或删除样式 4.文字改变 5.定位或浮动 6.盒模型

减少重绘和回流

• 1.使用transform替代top
• 2.使用visibility换成display:none，前者只引起重绘，后者引发回流
• 3.不要把节点的属性值放在一个循环里当成循环里的变量
• 4.不要使用table布局
• 5.动画实现的动画速度越快，回流次数越多，也可使用requestAnimationFrame
• 6.CSS选择符从右往左匹配，避免节点层级过多
• 7.将频繁重绘或回流的节点设置为图层 ①will-change属性 ②video, iframe标签

创建节点

• createElement 创建一个元素
• createTextNode 创建一个文本节点
• createDocumentFragment 创建一个文档片段
• cloneNode 返回调用该方法的节点的一个副本

注意事项：

• 以上只是创建一个孤立的节点，需要通过appendChild添加到文档中
• cloneNode要注意被复制的节点是否包含子节点以及事件绑定等问题
• 使用createDocumentFragment来解决添加大量节点时的性能问题

页面修改API

• appendChild() 添加子节点
• insertBefore() 添加节点到参考节点之前 parentNode.insertBefore(newNode, refNode) parentNode表示父节点，newNode表示要添加的节点，refNode表示参照节点
• removeChild() 删除子节点
• replaceChild() 替换 parent.replaceChild(newChild,oldChild)

节点查询API

• document.getElementById
• document.getElementsByTagName
• document.getElementsByName
• document.getElementsByClassName
• document.querySelector // 返回第一个匹配的元素
• document.querySelectorAll

节点关系型API

• parentNode // 父节点
• parentElement // 父节点，必须是element
• childNodes  // 子元素列表，包含文本，注释节点
• children    // 子元素列表
• firstChild  // 第一个子节点
• lastChild   // 最后一个子节点
• hasChildNodes   // 判断当前节点是否有子节点
• previousSibling // 前一个兄弟节点
• previousElementSibling  // 前一个兄弟元素节点
• nextSibling     // 后一个兄弟节点
• nextElementSibling      // 后一个兄弟元素节点

元素属性API

• setAttribute 设置属性 element.setAttribute(name, value)
• getAttribute 返回属性值
• removeAttribute 删除属性

元素样式API

• window.getComputedStyle 返回元素计算后的样式
• getBoundingClientRect 返回元素大小以及相对于浏览器可视窗口的位置
• 直接修改元素的样式

ele.style.color = 'red' ele.style.setProperty('font-size', '16px') ele.style.removeProperty('color') 复制代码

• 动态添加样式规则

var style = document.createElement('style'); style.innerHTML='body{color:red;} #top{color:white;}'; document.head.appendChild(style); 复制代码

attribute和property的区别是什么？

attribute是dom元素在文档中作为HTML标签拥有的属性

prototype是dom元素在JS中作为对象拥有的属性

JS如何设置获取盒模型对于的宽和高？

• 获取内联元素的宽高 dom.style.width/height
• 只适用在IE中获取元素宽高 dom.currentStyle.width/height
• 获取元素宽高，兼容性较好 window.getCompontedStyle(dom).width/height
• 根据元素在视窗中的绝对位置获取宽高 dom.getBoundingClientRect().width/height
• 最常用，兼容性最好 dom.offsetWidth/offsetHeight

offsetWidth/offsetHeight,clientWidth/clientHeight与srcollWidth/scrollHeight的区别

• offsetWidth/offsetHeight返回包含content+padding+border，效果与e.getBoundingClientRect()相同
• clientWidth/clientHeight返回包含content+padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight返回包含content+paddin+溢出内容的尺寸

document.write和innerHTML的区别

• document.write只能重绘整个页面
• innerHTML可以重绘页面的一部分