¶git 分支规范
- 主分支 - master：稳定的分支；
- 开发分支 - develop：主要开发都在这个分支；
- 功能分支 - feature-xxx : 独立的功能开发，开发好后合并到 develop 分支；
- 补丁分支 - hotfix-xxx：建立 hotfix 分支针对某个 bug 进行开发，然后合并到 develop 分支；
¶VSCODE 插件
插件名: Prettier
- 自动格式化 html/js 代码
插件名: Auto rename tag
- 自动重命 html 标签
插件名: CSS peek
- 提示 CSS 代码,跳转到 CSS 代码块
¶页面生成过程(浏览器渲染过程)
- HTML 代码转化为 DOM
- CSS 代码转化成 CSSOM
- 结合 DOM 和 CSSOM，生成一棵渲染树
- 生成布局（layout），即将所有渲染树的所有节点进行平面合成
- 将布局绘制（paint）在屏幕上
¶在浏览器地址栏键入 URL，按下回车之后会经历以下流程
- 解析 url 到 dns 服务器
- dns 服务器返回 ip 地址到浏览器
- 跟随协议将 ip 发送到网络中
- 经过局域网到达服务器
- 进入服务器的 MVC 架构 Controller
- 经过逻辑处理，请求分发，调用 Model 层
- Model 和数据进行交互，读取数据库，将最终结果通过 view 层返回到网络回到浏览器
- 浏览器根据请求回来的 html 和关联的 css, js 进行渲染
- 在渲染的过程中，浏览器根据 html 生成 dom 树，根据 css 生成 css 树
- 将 dom 树和 css 树进行整合，最终知道 dom 节点的样式，在页面上进行样式渲染
- 浏览器去执行 js 脚本
- 最终展现页面
¶浏览器缓存
- 当浏览器再次访问一个已经访问过的资源时，它会这样做
- 看看是否命中强缓存，如果命中，就直接使用缓存了。
- 如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
- 如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
- 否则，请求网络返回最新的资源。
¶前后端分离的原理及意义?
- 前后端解耦，分工明确，提高工作效率
- 前后台代码互不干扰(例如 JSP 页面中嵌入后台代码)
- 局部性能提升，通过 Ajax 进行按需加载
- 降低维护成本
- 减少服务端压力
¶如何进行页面优化？
- 减少 HTTP 请求(合并 CSS/JS,小于 10K 的图片转 base64 码)
- 对用户的一些操作进行防抖
- 避免不必要的重绘和重排
- 优化 CSS 选择器？
- CSS/JS minify，减少文件体积
- 开启 gzip 压缩
- 将 CSS 放到顶部，JavaScript 放到底部(原因: JavaScript 会阻塞页面)
- 压缩图片以及使用 CSS Sprite
- 使用 CDN 加速，适当进行文件缓存
- 合理控制 cookie 大小(每次请求都会包含 cookie)
- 合理安排请求顺序
性能优化关键点
- 首屏
- 用户交互时也会出现性能瓶颈: 大量 dom 更新(react 性能优势在这，vdom 可以减少不必要的 dom 更新)，频繁的页面重排，动画写的不好会影响性能
其他优化
- 后端进行适当的缓存数据以减少 HTTP 响应时间
¶Docker 整理
¶GitLab 整理
¶Jenkins 整理
¶Docker/GitLab 实现 DevOps
¶DevOps 实施
¶小程序框架
- 小程序开发建议
- 追求性能，非跨多端小程序，使用原生开发
- 需要跨多端小程序，使用 uni-app 等框架开发
- 原生坑少，跨多端坑多
- MINA 微信官方提供的小程序框架
- 性能出色。Tina.js 基于 mina 开发，引入了包管理，有状态管理，路由增强，可以自定义插件
- mpvue 美团开源的小程序框架，基于 vue.js 开发，实现了组件化，利于维护
- wepy 支持 es2015+的特性，通过预编译，让开发者能更灵活的配置开发
- taro 京东开源的小程序框架，多端统一框架，支持一键生成多个平台小程序
- uni-app dcloud 公司开发的，基于 vue.js 的多平台框架，支持 app，h5，小程序的一键生成
- chameleon 滴滴开源的多端框架，基于 react 开发的，也是可以生成多个平台小程序和 h5 应用
- WMPF 微信开发的小程序框架，可以实现小程序脱离微信环境运行