🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

面试题网络相关知识

2022-10-28 09:52:16 100 💗 0 @默永

01、HTTP常见的状态码

参考答案:

1xx 服务器收到请求
2xx 请求成功
3xx 重定向
4xx 客户端错误
5xx 服务器错误

200 请求成功

301 永久重定向,浏览器下次自动取重定向地址
302 临时重定向,浏览器下次还会请求原地址

304 资源未被修改

403 没有权限
404 资源未找到

500 服务器错误
504 网关超时

02、HTTP常见的header有哪些

参考答案:

常见的 Request Header
	Accept 浏览器可接收的数据格式
	Accept-Encoding 浏览器可接收的压缩算法,gzip
	Connection:Keep-alive 一次TCP连接重复使用
	UserAgent 浏览器信息
	Content-type: application/json 

常见的 Response Header
	Content-type: application/json
	Content-length 返回数据大小,多少字节
	Content-Encoding 返回数据的压缩算法 gzip
	
缓存相关 Header
	Cache-Control(新)代替 Expires(老)  控制缓存
	Last-Modified If-Modified-Since
	Etag If-None-Match

03、什么是Restful API?

参考答案:

常见method
  get 获取数据
  post 发送数据
  patch/put 更新数据
  delete 删除数据

【传统API】
	把每个URL当做一个功能
  
【Restful API】
	把每个URL当做一个唯一的资源,用method表示操作类型
  有操作类型,有资源标识,这个API的目的就一目了然了


功能传统APIRestful API
请求列表post/api/list?pageIndex=2post /api/list/2
创建博客post/api/create-blogpost /api/blog
更新博客post/api/update-blog?id=100patch /api/blog/100
获取博客post/api/get-blog?id=20get /api/blog/100


04、描述从输入url到渲染出页面的整个过程

参考答案:

请求过程:
    DNS:域名 -> IP
    浏览器向服务器发起http请求(三次握手)
    服务器处理http请求,并返回给浏览器

渲染过程:
    根据HTML生成DOM Tree
    根据CSS生成CSSOM
    DOM Tree+CSSOM形成Render Tree
    浏览器根据 Render Tree 渲染页面
    遇到js暂停渲染,优先加载js,完成后在渲染 Render Tree

05、window.onload与DOMContentLoaded有什么区别?

参考答案:

window.onload 页面的全部资源加载完才会执行,包括图片、视频等

DOMContentLoaded DOM渲染完就执行,图片、视频可能还没加载完

06、如何预防xxs攻击?

参考答案:

场景:
	博客或其他需要用户输入内容

预防:
	替换特殊字符 < 变成 &lt;  > 变成 &gt;
	前后端都要替换特殊字符
	
	《白帽子讲web安全》 吴翰清

07、如何预防xsrf攻击?

参考答案:

场景:
	电子邮件中包含
	<img src="xxx.com/bug?id=100" >
	
预防:
	使用post接口
	增加验证,指纹、支付密码、人脸

08、let、const、var有什么区别?

let const 块级作用域,var没有

let 是变量
const 是常量,定以后不能修改

09、CSS如何实现左边固定,右边自适应?

.div1{
    width: 200px;
    height: 500px;
    background-color: aqua;
    float: left;
}
.div2{
    margin-left: 200px;
    height: 500px;
    background-color: antiquewhite;
}
.div1{
    width: 200px;
    height: 500px;
    background-color: aqua;
    position: absolute;
}
.div2{
    padding-left: 200px;
    height: 500px;
    background-color: antiquewhite;
}
.parent {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
}
.left {
    width: 200px;
    background-color: green;
}
.right {
    margin-left: 20px;
    flex: 1;
    background-color: yellow;
}

10、如何实现CSS绝对居中?

访问:http://blog.aoxuelingshuang.com/get/my/blog/details/2561768007%40qq.com/116#k04d2

11、如何实现一个bind函数?

访问:http://blog.aoxuelingshuang.com/get/my/blog/details/2561768007%40qq.com/120#bmd2a


示例:下载地址

    目录导航