跟第一次发的一样, 很多知识点, 重新去百度了一下
1, 什么是 webSocket?
WebSocket 是基于 TCP 的一种新的网络协议, 支持客户端与 (选择加入该代码的通信的) 远程主机之间进行全双工通信.
单工通信: 一个只能发, 一个只能收
半双工通信: 能发能收, 但是不能同时进行
全双工通信: 能发能收, 能同时进行
2,cookie,sessionStorage,localeStorage 的区别
cookie - 存储在用户本地终端上的数据.
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后, 数据会被删除.
localeStorage - 没有时间限制的数据存储, 不手动清除, 一直会存在
共同点: 都是保存在浏览器端, 且同源的.
区别 : cookie 数据始终在同源的 http 请求中携带, 即 cookie 在浏览器和服务器间来回传递, 只有 4K 的空间; sessionStorage 和 localStorage 不会自动把数据发给服务器, 仅在本地保存. sessionStorage 和 localStorage 虽然也有存储大小的限制, 但比 cookie 大得多, 可以达到 5M 或更大
3 从 url 到界面显示发生了什么?
DNS 解析: 先找本地缓存, 未找到, 本地域名服务器会向根域名服务器发送一个请求, 如果根域名服务器也不存在该域名时, 本地域名会向 com 顶级域名服务器发送一个请求
TCP 连接(三次握手)
主机向服务器发送建立链接请求
服务器接到请求后, 发送同意链接信号
主机接到信号好, 再次请求确认
发送 HTTP 请求 HTTP 报文是包裹在 TCP 报文中发送的, 服务器端收到 TCP 报文时会解包提取出 HTTP 报文.(理解的一脸懵逼)
服务器处理请求并返回 HTTP 报文 : 发送 HTTP 请求的过程就是构建 HTTP 请求报文并通过 TCP 协议中发送到服务器指定端口(HTTP 协议 80/8080, HTTPS 协议 443).HTTP 请求报文是由三部分组成: 请求行, 请求报头和请求正文.
浏览器解析渲染页面 首先浏览器解析 html 文件构建 DOM 树, 然后解析 CSS 文件构建渲染树, 等到渲染树构建完成后, 浏览器开始布局渲染树并将其绘制到屏幕上. 这个过程比较复杂, 涉及到两个概念: reflow(回流)和 repain(重绘).(啊哈哈上篇文章有这个)
4,osi 七层模型
物理层, 数据连接层, 网络层, 传输层, 会话层, 表示层, 应用层(Tcp,ucp 属于传输层, HTTP 属于应用层)
5,MVC 和 MVVC 的区别
MVC: 用户操作> View (负责接受用户的输入操作)>Controller(业务逻辑处理)>Model(数据持久化)>View(将结果通过 View 反馈给用户
MVVM : 是将 "数据模型数据双向绑定" 的思想作为核心, 因此在 View 和 Model 之间没有联系, 通过 ViewModel 进行交互, 而且 Model 和 ViewModel 之间的交互是双喜那个的, 因此试图的数据的变化会同事修改数据源, 而数据源数据的变化也会立即反应到 View 上.
6,vue 和 anjular 双向绑定原理
vue: 通过数据属性劫持, observe 完成劫持, compile 完成渲染, watcher 进行而这桥接
anjular: 会将 UI 事件做延迟, 当数据发生变化时, 进行数据更新, 视图渲染
7,Web 性能的几个常见瓶颈
缓存, 压缩, HTTP 响应, 多重 JS 阻挡(使用多重 JavaScript 框架)
8, 前端相关的网络安全
浏览器禁止页面的 JS 带有属性的 cookie
前后两端进行格式检查
采用 token 机制
操作限制, 给验证码
请求来源限制
9,JavaScript oop 和 JavaScript 事件模型
opp: 面向对象编程(Object-Oriented Programming)
OOP 的三大要素:
1. 封装
2. 继承
3. 多态
原始事件模型, 捕获型事件模型, 冒泡事件模型,
原始事件模型 就是 ele.onclick=function(){}这种类型的事件模型
冒泡事件模型 是指事件从事件的发生地(目标元素), 一直向上传递, 直到 document
捕获型事件模型恰好相反, 事件是从 document 向下传递, 直到事件的发生地(目标元素)
10, 前端优化,
1, 减少 HTTP 的 Request 请求,(大图代替多个小图, 合并 CSS 和 JS)
2, 使用缓存, 使用 cdn, 减小服务器负担, 减少 DNS 查询
3, 图片懒加载, 预加载 CSS,JS 文件
4, 避免 dom 结构的深层次嵌套, 给 DOM 元素添加样式时, 把样式放到类中, 直接给元素添加类, 减少重构, 回流
5, 压缩 JS,CSS 文件, 减小文件体积, 避免 CSS 中使用条件判断
6, 配置实体标签, 添加周期头, 移除重复脚本
7,Ajax 准则
来源: http://www.qdfuns.com/article/47152/a2688c9c183855102ead2d392d3ca768.html