90. webpack的构建流程
webpack启动后，从entry开始，递归解析entry依赖的所有module，找到每个module.rules里配置的loader进行相应的转换处理，对module转换后，解析其他依赖的模块，解析的结果是一个一个的chunk，最后webpack会将所有chunk转换成ouput输出。在整个构建流程中，webpack会执行plugin当中的插件，完成plugin的任务
- entry：模块入口，使得原文件加入到构建流程中
- ouput：配置如何输出到最终文件中
- module：配置各种类型的模块的处理规则
- plugin：配置扩展插件
- devServer：实现本地服务，包括http、模块热替换、source map等服务
91. git的常用命令
-
基本命令
-
设置用户签名
-
git config -gloabl user.name ‘用户名’ 设置用户名
-
git config -global user.email ‘邮箱’ 设置用户邮箱
-
注：签名的作用是区分不同的操作者身份，用户的签名信息在每一个版本的提交信息中都能够看到，用来确认提交者。Git首次安装必须设置用户签名，否则无法提交代码
-
-
初始化本地库
- git init
-
查看本地库状态
- git status
-
查看工作区文件
- ll
-
查看隐藏文件
- ll -a
-
创建、修改一个文件
- vim ‘文件名’
-
创建一个文件或文件夹
- mkdir ‘文件名’
-
复制、粘贴（文件内）
- yy–复制
- pp–粘贴
-
保存退出
- esc，：wq
-
查看文件内容
- cat ‘文件’
-
获取最后一行
- tail -n 1 ‘文件名’
-
提交到暂存区
- git add ‘文件’
-
删除暂存区指定文件
- git rm -cached ‘文件名’
-
提交到本地库
- git commit -m ‘日志信息’ ‘文件名’
-
查看版本信息
- git reflog
-
查看详细的版本信息
- git log
-
版本穿梭
- git reset --hard ‘版本号’
-
复制粘贴
- shift+insert–复制
- ctrl+insert–粘贴
-
-
分支命令
- 创建分支
- git branch ‘分支名’
- 查看分支
- git branch -v
- 切换分支
- git checkout ‘分支名’
- 合并分支
- git merge ‘分支名’
- 合并冲突：当两个分支在同一个文件的同一个位置有两套完全不同的修改，Git无法决定使用哪一个
- 解决冲突：手动删除文件中冲突部分不需要内容，保留需要的内容，然后git add '文件名’添加到暂存区，git commit -m '日志’提交到本地仓库
- 注：解决冲突后提交时不能带文件名
- 创建分支
-
远程仓库操作命令
- 查看当前所有远程地址别名
- git remote -v
- 给远程地址起别名
- git remote add ‘别名’ ‘远程地址’
- 推送本地分支上的内容到远程仓库
- git push ‘别名’ ‘分支’
- 将远程仓库的内容克隆到本地
- git clone ‘远程地址’
- 将远程仓库对应分支最新内容拉下来，与当前本地分支合并
- git pull ‘远程库地址别名’ ‘远程分支名’
- 查看当前所有远程地址别名
-
git merge和git rebase的区别
- 两者都可以用来合并分支
- merge是直接合并，rebase是变基合并
- git merge会把公共分支和自己当前分支直接合并，git rebase会改变基点（起点），把当前分支放在公共分支最后面，使得提交成线性，自己的提交信息集中在一块，清晰明了
- 注：不要再公共分支使用rebase，不安全
92. v-for和v-if一起使用问题
v-for和v-if不能一起使用，因为v-for比v-if的优先级高，所以每次先循环完数据再进行判断，造成了资源的不必要加载
解决方案：
- 可以先camputed计算出符合条件的数据，再v-for
- 也可以用v-show代替v-if
93 .webpack
-
定义
webpack是一个打包模块化的JavaScript工具，在webpack中所有文件都是模块，通过loader转换文件，通过plugins插件注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目
-
优点
- 专注于处理模块化的项目，开箱即用，一步到位
- 通过plugins插件，增强webpack功能
- 通过loaders转换，可以让webpack把所有类型的文件都可以解析打包
- 活跃的社区
94 . webpack的Loader和Plugin区别
-
Loader
Loader相当于一个翻译官，webpack只能识别JS文件，如果想要将其他文件也打包，需要Loader，Loader能够让webpack拥有加载和解析非JavaScript文件的能力
用法：Loader在module.rules配置[{},{},{}]，对象里为test匹配文件类型、use使用loader
包括：
- file-loader：把文件输出到一个文件夹中，在代码中通过相对url去引用输出的文件
- url-loader：能设置小文件以base64的方式把文件内容注入到代码，减少http请求
- image-loader：加载且压缩图片文件
- babel-loader：可以将es6转成es5
- css-loader：加载css，支持模块化、压缩、文件导入等
- style-loader：把css代码注入到JS，通过DOM操作加载css
- eslint-loader：校验JS代码规范
- source-map-loader：加载sourcemap文件，方便断点调试
-
Plugin
Plugin插件，扩展webpack功能，增强webpack灵活性，在webpack运行的生命周期中会传播很多事件，plugin插件可以监听到这些事件，在合适的时间通过webpack提供的api改变输出结果
包括：HtmlWebpackPlugin、clean-webpack-plugin、mini-cssextract-plugin、HMR（HotModuleReplacementPlugin）、babel、babel-preset-env等
用法：Plugin在plugins配置类型[]，数组里存放plugin的实例，参数通过构造函数传入
95. webpack性能优化方法
- JS代码压缩
- CSS代码压缩
- Html代码压缩
- 文件大小压缩
- 图片压缩
- Tree Shaking
- 代码分离
96. tree-shaking原理
是一种删除不需要的额外代码的优化代码体积技术，tree-shaking会在打包过程中静态分析模块之间的导入和导出，确定哪些导出值没有被使用打上标记，并将其删除，从而实现了打包产物的优化。ES6 Module引入进行静态分析，故而编译的时候能够正确判断到底加载了哪些模块。静态分析程序流，判断哪些模块和变量未被引用或者引用，进而删除对应代码
97. css隐藏元素的方法
display：none
- 会让元素特底消失在页面，元素所占位置释放，会导致浏览器的重排和重绘
width：0；height：0；overflow：hidden
- 会导致浏览器的重排和重绘
visibility：hidden
- 元素消失后，所占空间依然保留，所以只会引起浏览器的重绘
opacity：0
- 透明度为0，在视觉上也是消失的，保留位置，只会引起浏览器的重绘
transform：scale(0)
- 直接缩为0，保留位置，只会引起浏览器的重绘
利用定位，让元素不出现在可视区等
98. 减少重排重绘的方法
- 合并多次对DOM或者css样式的修改，然后一次操作修改
- 对于多次重排的元素，比如动画，使用绝对定位使其脱离文档流，不影响其他元素
- 将频繁重排或重绘的节点设置为图层，图层能够阻止该节点渲染行为影响到别的节点。例如：video标签，浏览器会自动将该节点变为图层
- 尽量不使用table布局，因为对其中一条数据的小改动就能造成整个table的重排重绘
- 避免多次读取某些属性，例如：当获取滚动条的高度时会重新计算，此时会导致重排
- 使用重绘的方式替代重排重绘的方式，例如：visibility：hidden替代display：none
- 避免设置多层内联样式，因为通过style属性改变结点样式，每一次设置都会触发一次重排
99. TCP/IP如何保证数据包传输的有序可靠
通过对字节流分段进行编号，然后通过ACK回复和超时重发两个机制来保证
- 为了保证数据包的可靠传递，发送方必须把已发送的数据包保留在缓冲区，并且为每个已发送的数据包启动一个定时器
- 若在定时器超时之前收到了对方发回的应答消息，则释放该数据包占用的缓冲区；否则，重传该数据包，直到收到应答或者重传次数超过规定的最大次数
- 接收方收到数据包后，先进行CRC校验，若正确则把数据传给上层协议，然后给发送方发送一个累计应答包，表明数据已收到，若接收方也有数据要发送给发送方，应答包也可以放在数据包中发送过去
3115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
