面试题网络相关知识

原博客地址

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的目的就一目了然了

 

功能	传统API	Restful API
请求列表	post/api/list?pageIndex=2	post /api/list/2
创建博客	post/api/create-blog	post /api/blog
更新博客	post/api/update-blog?id=100	patch /api/blog/100
获取博客	post/api/get-blog?id=20	get /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

 

示例：下载地址