前端性能优化

页面DOM节点太多，会出现什么问题？如何优化？

DOM太多会造成页面加载卡顿，

• 操作DOM节点

1. 在外部更新节点然后与原始节点互换
   使用cloneNode在外部更新节点然后在通过replace替换

var orig = document.getElementById('cont');
var clone = orig.cloneNode(true)
var list = ['a','b'];
var content;
for(var i = 0;i<list.length;i++){
    content = document.createTextNode(list[i]);
    clone.appendChild(content);
}
orig.parentNode.replaceChild(clone,orig)

2. 在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除，设置元素display: none
3. DOM的多个读写操作，应该放在一起，并且不要在两个读操作之间加入一个写操作

• 新增DOM节点

1. 在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。优化的方法是创建DocumentFragment，在其中插入节点后再添加到页面。如JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的

2. 添加结构外的元素尽量设置他们的位置为fixed或absolute

3. 不要一条条的改变样式，而要通过改变class或者csstext属性，一次性改变样式

4. 减少DOM元素数量，正面页面应小于1000

document.getElementsByTagName( '*' ).length

5. 避免表格布局，重绘重排成本要高于div
6. 把获取的DOM数据缓存起来

el.className += "theclassname";
el.style.cssText += ";left:" + left + "px;top:" + top + "px"

如何做性能监测

SEO和语义化

这个没被问过

微信小程序

微信小程序和h5差异，如果有开发weex的经验，可能会加上weex

git

一些基本命令

打包工具webpack

1、打包原理
2、打包插件
3、webpack热更新原理
4、优化构建速度