1 用户输入 url , 到显示页面的过程, 发生了什么
1 用户输入 url
2 访问 DNS服务器, 返回域名对应IP地址, 给浏览器
3 向 IP地址发起, TCP连接
4 发起 http请求, 把请求内容发送给服务器
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 当页面布局以及几何属性改变时, 就会触发回流, 一些外观改变并不会触发回流