前端 | 实习面试速成题库

9月 06 2022

Github

git 常用命令

~~\1. git clone~~

~~\2. git add .~~

~~\3. git commit -m~~

~~\4. git push~~

~~\5. git pull~~

\6. git branch 查看本地分支

\7. git branch -a 查看远程分支

\8. git branch -d xxx 删除分支

\9. git checkout xxx 切换分支

\10. git checkout -b xxx 新建分支并且切换到改分支

\11. git branch -m 旧分支名新分支名分支重命名

\12. git status 查看修改的文件

\13. git merge 合并分支

\14. git checkout -b xxx origin/xxx 拉去远程分支

\15. git log 查看提交记录

计网

TCP与UDP的区别

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的
UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
5、TCP首部开销20字节;UDP的首部开销小，只有8个字节

GET和POST区别（高频）

~~1.GET在浏览器回退不会再次请求，POST会再次提交请求~~

**2.GET请求会被浏览器主动缓存，POST不会，要手动设置**

3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会

4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制

5.GET参数通过URL传递，POST放在Request body中

6.GET参数暴露在地址栏不安全，POST放在报文内部更安全

7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作

8.GET产生一个TCP数据包；POST产生两个TCP数据包

HTTP和HTTPS

http 和 https 的基本概念

http: 是一个客户端和服务器端/请求和应答的标准（TCP），用于从 WWW 服务器/传输超文本到本地浏览器的超文本传输协议。

https:是以安全为目标的 HTTP 通道，即 HTTP 下加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

http 和 https 的区别（高频）SSL?

1.HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头

2.HTTP 是不安全的，而 HTTPS 是安全的

3.HTTP 标准端口是80 ，而 HTTPS 的标准端口是443

4.在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层

5.HTTP 无法加密，而HTTPS 对传输的数据进行加密

6.HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

http状态码（高频）

~~\1. 200响应成功~~

\2. 301永久重定向

\3. 302临时重定向

\4. 304资源缓存

\5. 403服务器禁止访问

~~\6. 404服务器资源未找到~~

\7. 500 502服务器内部错误 504 服务器繁忙

输入一个URL到页面过程中发生了什么

首先在浏览器中输入URL
查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。
建立TCP连接：解析出IP地址后，根据IP地址和默认80端口https443，和服务器建立TCP连接
发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器
服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器
关闭TCP连接：通过四次挥手释放TCP连接
浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为

浏览器渲染机制、重绘、重排

构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
构建CSS规则树：生成CSS规则树（CSS Rule Tree）
构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
布局（Layout）：计算出每个节点在屏幕中的位置
绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

HTML

各类标签的名字

Head标签：其中可以对网页进行整体设置

Body标签：是HTML的正文标签,我们在网页上能看到的内容都写在该标签中

标题标签hn

字体标签 font

段落标签（p）

换行标签(br)

超链接标签(a)

Css

盒模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

盒模型的组成部分=content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

position属性

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。

Js

基本类型：

Number、String、Boolean、Null、undefined、Symbol

string
””和”都是字符串。JavaScript 中没有单个字符。
number
数字类型。
null
空，一个占位符。
undefined
未定义类型，该类型只有-一个固定值，即undefined,表示变量声明却未定义具体的值
注:因为undefined是从null中派生出来的，所以undefined==null

JavaScript区别于java，是弱类型语言，（java是强类型，编译阶段就会错）所以一个变量声明好之后，是可以赋予任意类型的值。

弱类型语言 变量可以根据环境变化自动进行转换，不需要经过显性强制转换。

复杂类型：

Object、Array、Function

引用数据类型

没有编译，所以不是类

1 2	var str= new String(); var str = new String;//js独有

JS的类型检测（高频）

typeof 监测基本数据类型

null会显示object是一个bug

instanceof 二元操作符对象是否是这个特定类或者是它的子类的一个实例

o instanceof C;

Object.prototype.toString.call() 会判断出 object function array等

运算符

比较运算

== 值得比较

=== 值和类型比较

逻辑运算

&& 、||、！

& | 是位运算

正则

直接方式创建

要求严格 &&

适用于表单校验

var reg = new RegEx("表达式");
var reg = /^表达式$/;直接量(开发中常用)。
//直接量中存在边界，即^代表开始，$代表结束
reg.test("string")//返回正误

正则是对象

普通方式创建

只要有一个符合，就判断对 ||

适用于查找替换

var reg =/regex/

DOM&BOM

ECMAScript (核心): 规定了JS的语法和基本对象。
DOM document object model文档对象模型:处理网页内容的方法和接口。
BOM Bowser object model 浏览器对象模型:与浏览器交互的方法和接口。

BOM

BOM Bowser object model 浏览器对象模型:与浏览器交互的方法和接口。

window

消息框

alert 警告

confirm()返回正否

定时器

循环定时器

setInterval(调用方法，毫秒值)

每隔这么多时间就调用一下该方法

取消

clearInterval(定时器id)

一次性定时器

setTimeout(调用方法，毫秒值)

location

location.href 设置或者返回当前url

DOM

DOM document object model文档对象模型:处理网页内容的方法和接口。

DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象，

获取元素对象

getElementByld(); 通过元素 ID获取对应元素对象

getElementsByName(); 通过元素的name属性获取符合要求的所有元素

返回数组

getElementsByTagName(); 通过元素的标签名属性获取符台要求的所有元素

getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素

元素对象属性

value 值

className class属性 css

checked 勾选框是否选择

innnerHTML内容体

数组

JS数组可以看做Java中的ArrayList 集合

数组中的每一个成员没有类型限制，及可以存放任意类型
数组的长度可以自动修改。

创建

var arr= [1,2,3,”a”,true]); //元素随便放
var arr = new Array() ; //数组长度默认为0
var arr = new Array(4);
数组长度是4,相当于开辟了长度为4的空间，元素默认undefined. (仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined)。
var arr = new Array(1,2); //数组元素是1,2

常用属性

length

join（）将元素拼接为字符串，根据分割符拼接。

pop() 删除+返回

push(‘a’,’b’,’c’) 追加一个或多个返回新长度

reverse() 将下标进行互换返回新的数组，更改原先数组

函数

全局函数

global.undifined使用这些不需要加global

eval

计算字符串，字符串作为脚本执行

可以扩展程序功能，动态加入

不能传入字符串对象，只能是基本数据类型的string

1 2	eval("var x =10") alert(x)

编码解码

1 2	encodeURI(string)//返回编码结果 decodeURI()

中文&特殊符号进行URI编码 %16

URI 和URL的区别。

URI是统一资源标识符。标识资源详细名称。
URL是统一资源定位器。定位资源的网络位置。

URI标识资源的详细名称，包含资源名。
URL定位资源的网络位置。包含http://

例如:http://www.itcast.cn/ 是URL
/a.html 是URI
http://www.itcast.cn/a.html 既是URL，也是URI

字符串转数字

1
2
3

parseInt（string）//小数点后面不关注
parseFloat（string）
//转换到不合法字符停止

函数

1
2
3

function add(x,y){
	return a+b;
}

空函数返回undefined

同名函数

最后一个覆盖之前的，不存在函数重载

自定义对象

function构造函数

function Person（n,a）{
    this.name=n;
    this.age=a
}
var p = new Person（ws,20）
p.sex =1 //动态添加

对象直接量

1	var person = {name :"ws",age:"20"}

JS事件

onclick 属性 = 某个方法

ES

var/let/const

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let定义的变量，但是所声明的变量，只在let命令所在的代码块内有效。不能跨块访问，也不能跨函数访问。 const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，且不能修改。
var可以先使用，后声明，因为存在变量提升；let必须先声明后使用。
var是允许在相同作用域内重复声明同一个变量的，而let与const不允许这一现象