5 - 扩展知识

1 用户输入 url , 到显示页面的过程, 发生了什么

1 用户输入 url
2 访问 DNS服务器, 返回域名对应IP地址, 给浏览器
3 向 IP地址发起, TCP连接
4 发起 http请求, 把请求内容发送给服务器  //如我要请求 xx页面
5 接收 http响应, 服务器把响应的内容返回给浏览器
6 然后浏览器解析, 并渲染请求到的文件


名词解释: 
  1 DNS 服务器: 解析域名对应的 IP地址, 并返回给浏览器
  2 TCP: 传输控制协议 (基于字节流的传输层通讯协议)
  3 TCP 连接: 
    1 TCP是因特网中的传输层协议, 使用三次握手, 前后端就会建立连接
    2 三次握手: 
      1 客户端发送报文给服务端
      2 服务端接收报文, 回应客户端一个报文
      3 客户端收到服务端的报文, 然后回应服务端一个报文  -> OK //客户端和服务端成功建立连接
    3 还有四次挥手: 是用来终止连接的

2 前端优化手段 (JS + Vue + React)

1 关于 JS 的优化手段  //也就是通用优化手段
  1 图片优化: 压缩图片大小 + 可用范围使用占内存小的图片格式 (png>jpg>webp) + 
  2 防抖 + 节流: 
  3 通过文档碎片来, 修改dom树
  4 精灵图优化,
  5 使用字体图标代替图片
  6 使用缓存: 说说强缓存和协商缓存  //缓存不过期的情况下, 不向服务器发送请求
  7 事件代理: 冒泡那个
  8 meta 标签实现: 搜索关键词, 网站说明等优化
  9 资源懒加载与资源预加载 (图片懒加载 + 图片预加载)

2 Vue 中的优化: 
  1 图片模块化管理
  2 列表循环加 key 值
  3 数据请求的集中管理
  4 Vuex 中的命名空间划分
  5 路由懒加载  (模块按需加载)

3 优化网络连接: 
  1 使用CDN 加速服务, 

3 强制缓存, 和协商缓存

1 什么是浏览器缓存: 
  1 是浏览器在本地磁盘对用户最近请求过的文档进行存储
  2 当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档
  3 那么浏览器是如何判断是否使用缓存的???

2 浏览器缓存的优点: 
  1 减少了服务器的负担, 大大提升了网站的性能
  2 加快了客户端加载网页的速度

3 浏览器缓存分为俩大类: 
  1 强制缓存: 不会向服务器发送请求, 直接从缓存中读取资源
  2 协商缓存: 向服务端发起请求, 看现在的时间是否处于过期时间内, 若超出则重新请求资源

4 强制缓存和协商缓存相同点: 都是从客户端缓存中读取资源; 区别是强缓存不会发请求, 协商缓存会发请求

4 页面重构怎么操作

1 简单描述: 
  1 就是根据原有页面内容和结构的基础上, 写出符合 web 标准的页面结构, 以及优化代码
  2 代码重构要考虑到的事: 代码质量、SEO优化、页面性能、更好的语义化、浏览器兼容、CSS优化, 性能优化
  3 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

5 websocket 断链

1 简单描述: 
  1 WebSocket 是HTML5 推出的一种协议
  2 也可以理解为它是基于 HTTP协议上的一种补充
  3 相较于 HTTP来说, WebSocket 是一个持久化的协议

2 websocket 断链: 
  1 简单描述: 
  2 断链原因: 
    webSocket在同一个html文件中, 是可以保持连接的; 但是当你刷新页面的时候, websocket连接就会强制关闭
    
  3 解决方案: 不是很了解这个

6 常用的 git 命令

1 本地工作区: 
  1 git init -- 初始化本地仓库
  2 git add . -- 加入暂存区
  3 git commit -m '本次提交的注释文本' -- 提交文件到本地仓库
  4 git status -- 查看工作区状态

2 远程仓库相关: 
  1 git remote add hh "仓库地址"   //并联远程仓库
  2 git remote rm hh  //解除并联
  3 git remote -v  //查看已并联的远程仓库
  4 git push -u hh1 master  //第一次提交到远程仓库
  5 git push

3 分支操作: 
  1 查看分支: git branch    //当前分支前标识: * 和 绿色
  2 创建分支: git branch <name>      //默认拷贝当前所在分支的项目文件
  3 切换分支: git checkout <name>    //我们工作区的文件也会跟着切换
  4 合并分支: git merge <name>       //合并某分支到当前分支, 也就是让指定分支覆盖当前分支内容
  5 删除分支: git branch -d <name>

4 常用的辅助命令: 
  1 git log  //查看本地详细的操作日志
  2 git reflog  //简化的操作日志
  3 git diff 文件名  //查看工作区修改的具体内容

7 重绘回流的区别

1 简单理解: 
  1 页面加载时, 浏览器把 HTML代码解析为一个DOM树; 
  2 DOM树里包含了所有 HTML标签 (包括隐藏元素和JS添加的元素)

2 简单描述: 
  1 当页面布局, 页面尺寸等, 发生改变而需要重新构建的时候, 
  2 浏览器会使渲染树中受到影响的部分失效, 并重新构造这部分渲染树, 这个过程就是回流()
  3 完成回流后, 浏览器会重新绘制受影响的部分到屏幕中, 这个过程就是重绘()

3 知识点: 
  1 每个页面至少需要一次回流, 就是在页面第一次加载的时候
  2 一些只会影响外观, 风格, 不会布局的元素属性更新, 就称之为重绘()  //也就是上面的受影响的部分

4 重绘回流的区别: 
  1 回流必将引起重绘, 而重绘不一定会引起回流  //只有颜色改变的时候就只会发生重绘而不会引起回流
  2 当页面布局以及几何属性改变时, 就会触发回流, 一些外观改变并不会触发回流