原文:前端面试“http全过程”将所有HTTP相关知识抛出来了...

来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍

http全过程

输入域名(url)-->DNS映射为IP-->TCP三次握手-->HTTP请求-->HTTP响应-->(浏览器跟踪重定向地址)-->服务器处理请求-->服务器返回一个html响应-->(视情况决定释放TCP连接)-->客户端解析HTML-->获取嵌入在HTML中的对象重新发起http请求

输入域名(url)

在域名这里有很多可以聊的:

域名级数判别

域名服务器及域名 这里有详细解释,即“计算机网络技术”的第九章Domain Name System

一个点分隔一级(域名由分量组成,一级为一个分量),通俗易懂如下:

...三级域名.二级域名.顶级域名
WWW.baidu.com com为顶级域名(通常依据组织和地理分为两类),baidu为二级域名,WWW网站
www.pic.baidu.com pic为三级域名
所谓降域,如pic.baidu.com/a.txt baidu.com/b.txt中a和b在不同的域下面,都降域为baidu.com..如下详细解释

同源策略

同源需满足的条件:

  • 协议相同

  • 域名相同:a.b.c.com a.b.d.com域名相同吗

  • 端口相同

非同源受限制的行为:

  • cookie localStorage indexDB无法获取

  • DOM无法获得

  • ajax请求不能发送

    跨域方法:

双向跨域

1.降域(二级和以上有共同部分)

所谓降域就是寻找到最后面的域名相同的部分留下
a.b.c.com
d.b.c.com
降域后统统改为b.c.com或者c.com
  • 存在的问题:

    • 安全性,当一个站点被攻击,相同域名的站点也会被攻击

    • 重复性,所有需要跨域的都要修改document.domain=""

    • ajax不受降域影响,还是需要iframe在一个页面引入另一页面的形式

    • 不可更改性,一旦降域就无法回去

2.location.hash(FIM---fragment itentitier messaging)

a向b传送数据
baidu.com/a.html中的iframe的src="google.com/b.html#paco",b.html监听到 url发生变化触发相应操作
b向a传送数据
google.com/b.html中隐藏一个iframe,设置src="baidu.com/proxy.html#data" data为要传输的数据,proxy.html是和a.html同域名下的,是a b之间的代理,负责监听utl变化就修改a的url,a监听到url变化了就做出相应操作

b.html:

try {
parent.location.hash = 'data';
} catch (e) {
// ie、chrome的安全机制无法修改parent.location.hash,
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = "http://www.baidu.com/proxy.html#data";
document.body.appendChild(ifrproxy);
}

proxy.html:

//因为parent.parent(即baidu.com/a.html)和baidu.com/proxy.html属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
问题:数据暴露在URL中,数据大小格式受限

3.HTML5的postMessage方法

a向b发送数据

baidu.com/a.html

window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = "http://www.google.com";
ifr.contentWindow.postMessage('hello world!', targetOrigin);
};

google.com/b.html

var onmessage = function (event) {
var data = event.data;//消息
var origin = event.origin;//消息来源地址
var source = event.source;//源Window对象
if(origin=="http://www.baidu.com"){
console.log(data);//hello world!
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
同理可以b向a postMessage

单向跨域

1.jsonp

先看两种用法
<script>
function foo(data){
console.log(data);
}
</script>
<script type="http://www.google.com/getUsers.js?callback=foo"></script>
回调函数
<script src="http://www.google.com/getUsers.php?flag=do&time=1"></script>
参数
问题:只支持get请求

2.服务器代理

服务器没有同源策略,在数据提供方没有jsonp,window.name协议的支持下,使用服务器代理。
在baidu.com下配置一个代理proxy即baidu.com/proxy/将ajax绑定到代理下发送http请求,此时http请求是在服务端进行的,无同源限制

3.CORS

var url = 'http://api.alice.com/cors';
var xhr = createCORSRequest('GET', url);
xhr.send();
//非简单请求
var url = 'http://api.alice.com/cors';
var xhr = createCORSRequest('PUT', url);
xhr.setRequestHeader(
'X-Custom-Header', 'value');
xhr.send();
另外:对于CORS的支持需要服务器和客户端之间的协调

4.window.name

5.webSocket

需要服务器的支持,源在白名单

6.Access-Controll-Allow-Origin

http和https协议有什么区别,重点解释https

http+加密+认证+完整性保护=https
  • http:应用层的无状态,超文本传输协议。端口为80

  • HTTPS:只是http通信接口部分用SSL和TLS协议替代。http直接和TCP通信,而HTTPS使用SSL所以是先和SSL通信,再由SSL和TCP通信。端口为443

cookie sessionStorage localStorage有什么不同

  • cookie存储在客户端,可以发送给服务器,数据大小限制为4K

  • sessionStorage,localStorage存储在本地,不可以发送给服务器,数据大小为5M

  • localStorage只能手动清除数据

  • sessionStorage关闭会话窗,数据就被清除了

HTML5本地存储分为

  • webStorage(localStorage,sessionStorage)

  • indexDB

DNS解析域名为IP

  • 浏览器缓存中找

  • 系统缓存中找

  • 路由器缓存中找

  • ISP DNS缓存中找

TCP三次握手

  • client----->server:SYN(发起一个TCP连接,同步报文)

  • server----->client:SYN+ACK(应答报文,表示已创建连接)

  • client----->server:ACK(应答报文,表示收到已连接)

四次挥手:
由客户端发起的关闭连接
* client----->server:FIN(请求关闭连接)
* server----->client:ACK(收到了连接,但不会立即关闭,等到报文都发送完再回复一个FIN)
* server----->client:FIN
* client----->server:ACK(收到关闭) 由服务端发起的关闭连接
* 当http设置了keepalive定时关闭,服务端会在结束数据传送后关闭TCP连接

http请求

  • 请求行

  • 请求头

  • 空行

  • 请求包体(只有POST请求有包体)

get/post区别

  • 请求参数:get参数附在URL后面?隔开,POST参数放在包体中

  • 大小限制:GET限制为2048字符,post无限制

  • 安全问题:GET参数暴露在URL中,不如POST安全

  • 浏览器历史记录:GET可以记录,POST无记录

  • 缓存:GET可被缓存,post无

  • 书签:GET可被收藏为书签,post不可

  • 数据类型:GET只能ASCII码,post无限制

http响应

  • 状态行

  • 响应头

  • 响应包体

http状态码

1XX:表示可续发请求

2XX:表示成功

* 202成功
* 204成功 不返回实体主体
* 206成功 执行了一个范围请求

3XX:表示重定向

* 301永久重定向,增加SEO排名
* 302临时重定向 禁止POST变为GET
* 303另外一个URI
* 304判断是否要更新缓存 请求头部携带if-modified-since自从上次更新距这次多久
* 307临时重定向

4XX:表示客户端错误

* 400客户端语法错误
* 401请求未经授权
* 403服务器拒绝服务
* 404请求资源不存在

5XX:服务端错误

* 500不可预期的错误
* 503此时不能提供服务 稍后恢复正常

释放TCP连接

  • header中的connecton:close

    服务器主动关闭TCP连接,客户端被动关闭连接
  • header中的connecton:keepalive

    连接保持一段时间,可以连续发送http请求

客户端解析HTML

onload ready区别:

  • ready表示文档加载完毕,不包括图片

  • onload表示都加载完毕

【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...的更多相关文章

  1. 【经验之谈】前端面试知识点总结03(JavaScript相关)——附答案

    目录 三.JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) 2.说说你对延迟对象deferred的理解? 3.什么是跨域,如何实现跨域访问? 4.为什么要使用模板引擎? 5. ...

  2. 面试4——java进程和线程相关知识

    1.线程和进程的概念.并行和并发的概念

  3. 我的游戏蜗牛web前端面试经历

    蜗牛在江苏苏州地区应该算是比较大的互联网公司了,可以称得上中国游戏的鼻祖,之前一直很想进蜗牛,但作为一个应届毕业生却没有看到蜗牛发布任何关于招聘实习生的职位,无奈之下于是就毛遂自荐了,主动以邮件的形式 ...

  4. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

  5. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  6. Web前端面试宝典(最新)

    第一部分:HTML问答题   1.简述一下你对HTML语义化的理解? 用正确的标签做正确的事情. html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析;即使在没有样式CSS情况下也 ...

  7. 前端面试:Http协议与浏览器

    Http与Https的区别 Http是明文传输的,Https协议是在Http协议上添加了SSL的加密协议,可以进行加密传输和身份验证. 其实就是说Http对网络传输完全是裸奔状态,也就没办法防范中间人 ...

  8. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  9. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

随机推荐

  1. js同步访问后台资源

    $.ajax( {  type : 'post',  url : url,  data : data,  async : false,//false代表只有在等待ajax执行完毕后才执行window. ...

  2. 3. 星际争霸之php设计模式--简单工厂模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  3. 对Alexia(minmin)网友代码的评论及对“求比指定数大且最小的‘不重复数’问题”代码的改进

    应Alexia(minmin)网友之邀,到她的博客上看了一下她的关于“求比指定数大且最小的‘不重复数’问题”的代码(百度2014研发类校园招聘笔试题解答),并在评论中粗略地发表了点意见. 由于感觉有些 ...

  4. co css规范

    CSS 编码规范 1. 文件组织 (建议试试LESS) 1.1 CSS 与 HTML CSS 一律写在 CSS 文件中,原则上不写内联样式. CSS 文件命名由小写字母.下划线(_)组成. CSS 文 ...

  5. umask setuid setgid

    cat /etc/bashrc if [ $UID -gt 199 ] && [ "`id -gn`" = "`id -un`" ];#用户UI ...

  6. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  7. Linux系统调用--mmap/munmap函数详解【转】

    转自:http://www.cnblogs.com/leaven/archive/2011/01/14/1935199.html http://linux.chinaunix.net/techdoc/ ...

  8. MFC中的CDC,CClientDC,CPaintDC,CWindowDC的区别

    转自 http://blog.csdn.net/guoquan2003/article/details/4534716 CDC是Windows绘图设备的基类. CClientDC:(1)(客户区设备上 ...

  9. Python 日期和时间

    Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...

  10. 杭电1019-Least Common Multiple

    #include<stdio.h>int gcd(int a,int b);int main(){    int n,m,a,b,i,sum;//sum是最小公倍数    scanf(&q ...