[开发工具]前端知识点整理——v-if 和 v-show / 事件冒泡和捕获 / Git的操作方式 / canvas有什么优势（canvas 和 svg） / 重排与重绘 / async和defer

v-if 和 v-show

1. v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置dom元素的display样式，block为显示，none为隐藏
2. v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
3. v-if有更高的切换消耗；v-show有更高的初始渲染消耗
4. v-if是惰性的，如果初始条件为假，则什么也不做。v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且dom元素保留

事件冒泡和捕获

转载于掘金社区

• addEventListener：监听事件的冒泡

addEventListener() 和 removeEventLinstener()接收 3 个参数：事件名、事件处理函数 和 一个 option 对象或一个布尔值 useCapture（ true 表示在捕获阶段调用事件处理程序， false（默认值）表示在冒泡阶段调用事件处理程序，因为跨浏览器兼容性好，所以事件处理程序默认会被添加到事件流的冒泡阶段（也就是默认最后一个参数为 false））。
addEventListener(type, listener, useCapture | options)

ul.addEventListener('click', fun);

function fun(event) {
    var e = event.target;
    if (e.nodeName.toLowerCase() == 'li') {
        console.log("The color is : " + x.innerHTML);
    }
}

• event.stopPropagation()：阻止事件的冒泡

var e = event || window.event;
if(e.stopPropagation){
    return e.stopPropagation(); 
}else{
    return e.cancelBubble = true;// 兼容IE
}

• event.preventDefault()：阻止默认行为

var e = event || window.event;
if(e.preventDefault()){
    return e.preventDefault();
}else{
	return e.returnValue = false; //兼容IE
}

Git的操作方式

1. 提交工作区所有文件到暂存区：git add .
2. 将暂存区中的文件提交到本地仓库中，即打上新版本：git commit -m "commit_info"
3. 创建分支：git branch <branch-name>，如git branch testing
4. 从当前所处的分支切换到其他分支：git checkout <branch-name>，如git checkout testing
5. 删除分支：git branch -d <branch-name>
6. 将当前分支与指定分支进行合并：git merge <branch-name>
7. 显示本地仓库的所有分支：git branch
8. 把远程分支合并到当前分支：git merge <remote-name>/<branch-name>，如git merge origin/serverfix
9. 在远程分支的基础上创建新的本地分支：git checkout -b <branch-name> <remote-name>/<branch-name>，如git checkout -b serverfix origin/serverfix
10. 从远程分支checkout出来的本地分支，称之为跟踪分支。在跟踪分支上向远程分支上推送内容：git push。该命令会自动判断应该向远程仓库中的哪个分支推送数据；在跟踪分支上合并远程分支：git pull
11. 将本地仓库某分支推送到远程仓库上：git push [remote-name] [branch-name]，如git push origin master；如果想将本地分支推送到远程仓库的不同名分支：git push <remote-name> <local-branch>:<remote-branch>，如git push origin serverfix:awesomebranch;如果想删除远程分支：git push [romote-name] :<remote-branch>，如git push origin :serverfix。这里省略了本地分支，也就相当于将空白内容推送给远程分支，就等于删掉了远程分支。

canvas有什么优势（canvas 和 svg）

canvas

• 特点：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
• 性能高，可以自己控制绘制过程，还能使用 WebGL
• 可控性高，像素级控制
• 内存占用恒定，就是像素点个数

svg

• 特点：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
• 不失真，放大缩小图像都很清晰
• 学习成本低，也是一种 DOM 结构
• 使用方便，设计软件可以直接导出

重排与重绘

重绘不一定导致重排，但重排一定会导致重绘

页面生成的过程

1. HTML 被 HTML 解析器解析成 DOM 树；
2. CSS 被 CSS 解析器解析成 CSSOM 树；
3. 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
4. 生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
5. 将布局绘制(paint)在屏幕上，显示出整个页面；

重排(reflow)

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置

触发重排的事件：

• 页面初始渲染，这是开销最大的一次重排
• 添加/删除可见的DOM元素
• 改变元素位置
• 改变元素尺寸，比如边距、填充、边框、宽度和高度等
• 改变元素内容，比如文字数量，图片大小等
• 改变元素字体大小

重绘(repaint)

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程

触发重绘的事件：

• color
• visibility
• background
• background-image
• background-repeat

对重排的优化

• 减少重排的范围
  • 尽可能在低层级的dom上修改样式。避免通过父元素去影响子元素
  • 少使用table布局。每次改动会造成table整体重新布局
• 减少重排次数
  • 集中样式修改：更改类名而不是修改样式
  • 读写操作分离：先获取要改变的全部元素，再统一改变
  • 将dom离线：使用display：none，修改完成后再添加到文档中
  • 使用absolute或fixed脱离文档流
  • 优化动画：把动画应用到脱离文档流的元素上或者牺牲平滑换取速度

async和defer

都是异步加载js文件，区别在于异步加载完成后合适执行加载的js文件

没有async和defer时：

<script src="script.js"></script>

async：加载完成就立即执行

<script async src="script.js"></script>

defer：加载完成后，等待当前元素解析完成后再执行，有多个文件时会按照下载顺序进行加载

<script defer src="script.js"></script>