前端面试(第二波)

原创 zxsclq 随笔 前端基础 92阅读 7 天前 举报

跟第一次发的一样,很多知识点,重新去百度了一下

1,什么是WebSocket?

WebSocket是基于TCP的一种新的网络协议,支持客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信。
单工通信:一个只能发,一个只能收
半双工通信:能发能收,但是不能同时进行
全双工通信:能发能收,能同时进行

2,cookie,sessionStorage,localeStorage的区别

cookie - 存储在用户本地终端上的数据。
sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。
localeStorage - 没有时间限制的数据存储,不手动清除,一直会存在

共同点:都是保存在浏览器端,且同源的。
区别 : cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递,只有4K的空间;sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大

3 从url到界面显示发生了什么?

  1. DNS解析:先找本地缓存,未找到,本地域名服务器会向根域名服务器发送一个请求,如果根域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求
  2. TCP连接(三次握手)
    • 主机向服务器发送建立链接请求
    • 服务器接到请求后,发送同意链接信号
    • 主机接到信号好,再次请求确认
  3. 发送HTTP请求 HTTP报文是包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。(理解的一脸懵逼)
  4. 服务器处理请求并返回HTTP报文 :发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
  5. 浏览器解析渲染页面 首先浏览器解析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准则

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复