一、大致步骤
第一步:输入url:
url是什么:
url全称为资源统一定位符,url对应协议(常见的有http(明文传输),https(加密传输),file,ftp等),端口号,
url和uri的区别:
url(资源统一定位符)
uri(资源统一标识符)
url是uri的一个特例,url包含定位web资源的足够信息,其它的uri(如:mailto:xxx@.com)则不是定位符,因为根据他的标识符无法定位任何资源;
url是绝对的,他是一个结构化字符串。
urn(统一资源名称)
urn是uri的一个子类,urn命名资源,但不指定如何定位资源;
第二步:域名到ip
过程:域名(url)=>dns(domain name stystem)解析机=>IP地址
dnf会在哪里查询?
浏览器缓存:如果在之前对该url指定的主机进行过访问,浏览器会缓存该主机的ip一段时间(该时间浏览器指定),然后通过该IP地址找到对应主机;
系统缓存:若浏览器中无该缓存,那么就到系统缓存中进行查询,浏览器会进行系统调用,查询缓存;
路由器缓存:如果系统缓存中也没有,那么就到路由器缓存中进行查询;
ISP DNS 缓存:如果路由器缓存依旧未命中,那么就到ISP DNS中查询,一般的域名都能在这里查询得到;
递归搜索:如果以上都没有查询到,那么就会到顶级域名服务器的根服务器中进行递归查询,只要该域名存在就肯定能找得到;
获取浏览器属性:window.navigator.userAgent
第三部:找到ip对应的主机后,打包并发送http请求
http报文信息范例
get:http://asadasdasd.com/asdasd(请求方式和地址,同时还有:post,put,delete,head,trace,options)
user-agent:用户浏览器的类型版本信息
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp*(浏览器接收的能识别的数据类型)
accept-encoding:gzip,deflate(浏览器能识别的encoding)
accept-language:浏览器能识别的语言
cache-control:max-age=0
connection:keep-alive
cookie:XXXXXXXX(用户的cookie)
什么是cookie
cookie是一小段文本,当用户访问站点时,可以对用户的浏览器种下一个cookie用以保存用户的相关信息,然后当用户下次进行访问时,站点会先读取用户的cookie,然后呈现相应的页面(例如:登陆一次后,下次再进该网页就自动登录)
几种请求方式的用途和异同
get:索取数据(也可用于发送数据),向服务器拿一个资源,常见百度搜索,附带发送的参数有512字节的限制,附带的参数会在url地址中显示,以键值对形式并且以?进行分隔;
post:发送数据(也可用于获取数据),向服务器发送一段数据,常见有留言板,理论上附带发送的数据无大小限制,附带的数据不再url上显示;
put:用于向服务器传输一段数据,可以通过get/post达成;
delete:用于删除服务器上的一段数据,可以通过get/post达成;
head:只查询回应的头部,但是不拿response(响应内容);
trace:查询从本地网络到访问的站定之间经历了什么节点,查询路由;
option:向服务器询问支持什么传输方式;
第三步:创建TCP链接
UDP和TCP的区别
UDP不能够保证传输的可靠性,包不完整时,UDP不会重新发送请求(例如只接受到半张图片);
TCP可以保证传输的可靠性,包不完整时,TCP会重新发送请求;
为什么有时候页面残缺不全
因为有时候嵌入资源(例如:img标签的图片)未下载下来导致dom布局错乱;
相关进程处理(默认端口不会再url上显示,下面是一些默认端口)
通过端口号来处理不同的进程
http:80
https:443
ssh:22
ftp:21
服务器
物理主机
webserver
nginx
阿帕奇
微软
第四步:服务器响应请求
那些内容影响服务器生成的结果
请求方式(get/post拿到的可能不一样)
路径
请求参数(?XXX=XXX)
cookie(用户身份识别)
服务器配置
动态语言代码逻辑
服务器响应的内容
相应的head
response
第五步:浏览器拿到响应文本,然后渲染
浏览器渲染页面
浏览器渲染页面的下载是自上而下的,渲染顺序也是自上而下的,下载与渲染同时进行;
解析HTML变成DOM树;
解析CSS变成渲染树;
遇到JS时解析JS,解析完成后立即执行;
(1,2同时进行,一边解析一边生成页面,会随着页面的内容不断调整)
关联资源的处理
在渲染页面到某一部分时,其上面的所有部分(当前的HTML元素和CSS)都已下载完成;
但是相关联的的元素不一定下载完成了(例如:图片,视屏等元素会并行下载);
同一个域名下并行下载数量有限制(有些网站图片等其他资源会放在另外的服务器上);
JS和AJAX
下载解析JS时候是以阻塞的方式进行下载,下载JS时,浏览器在发送了请求后直到响应前都会阻塞其它资源的下载和渲染;
可以用HTML5的异步下载属性(async和defer)
async:遇到JS后与其他资源一起下载,下载完成后执行;
defer:遇到JS后与其他资源一起下载,等所有资源下载完成后再去执行;
JS的阻塞性下载是因为JS有可能会改变DOM结构,导致页面重绘;
遇到AJAX后执行,然后进行下面的步骤,等待AJAX拿到数据后再执行AJAX回调;
CSS
CSS下载完成后,将和原先下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(包含已经渲染过的元素)再渲染一遍;
JS、CSS如果有重定义,首先查看优先级,以优先级高的为主,若无优先级问题则浏览器以后定义的为主;
白屏和FOUC问题
白屏问题:
原因:
先加载CSS,加载完成后再对HTML进行渲染,如果CSS加载时间过长,则导致白屏;
使用@import,即使css放在link标签里,也有可能导致白屏;
在IE浏览器下:css放置在页面底部,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现;
JS放置在头部阻塞后面内容的下载;
FOUC(无样式内容闪烁)
原因:
因为浏览器渲染机制问题,再CSS加载之前,先呈现了HTML,就会出现逐步展示无样式内容,然后样式突然跳出来的问题;
总结:
如果等待CSS下载完成后才进行渲染,那么就有可能导致白屏;
如果先展示页面,等CSS下载完成后再渲染,就有可能导致FOUC问题;
解决:
CSS放置在头部(head)里,JS放置在/body之前;
常见状态码
200:OK(响应成功);
301:Moved Permanently(页面已重定向);
304:not modified(页面未修改);
403:Forbidden(无权限访问);
404:Not Found(服务器找到,但是没找到页面);
500:Internal Server Error(服务器出错);
502:bad getway(服务器未链接上)
304 Not Modified
304码是页面未改变的意思,说明当前页面已访问过,且缓存在有效期内,则服务器回应last-modified给浏览器,浏览器进行判断后若缓存未改变,页面将直接从本地缓存中提取;
cache-control:max-age=30000(该页面缓存的有效时间秒数)
expires:mon 02 nov 2015 03:02:54 GMT (该页面缓存过期时间)
若页面缓存被清理,那么就重新发送请求拿;
若缓存超过了有效期,则验证last-modified(最后修改时间)或者etag
last-modified:页面最后修改的时间;
etag:文本内容加密出来的一串字符串,若与之前相比未变则发送304;
二、以服务器为阿帕奇,php语言,动态网站访问过程图
三种情况
第一种:用户访问服务端的index.html文件
输入url,通过本机dns解析为ip地址,通过ip地址找到阿帕奇服务器;
通过http协议创建tcp链接,并连接到服务器上,默认端口号是80,请求服务器下载对应的资源;
服务器收到请求后,找到对应页面后打开,然后将内容返回给用户的浏览器;
浏览器渲染页面并呈现给用户;
第二种:用户访问服务端的index.php文件
与上面相同,经过dns解析后的ip找到服务器,服务器找到相应的php文件;
阿帕奇本身无法处理php文件,于是委托php应用服务器(需要安装php应用服务器)进行处理。并且转化为html静态代码,再返回给阿帕奇;
阿帕奇将html静态代码传输给浏览器,浏览器渲染并呈现;
第三种:用户访问服务器里面的mysql数据库里面的数据
与上面相同,经过dns解析后的ip找到服务器,服务器找到相应的php文件;
服务器委托php应用服务器解析php文件;
★3. php服务器打开php文件,在php文件中通过与数据库连接的代码链接到数据库,然后通过sql语句操作数据库中的数据。找到数据后在通过php服务器转化为html静态码,再返回给阿帕奇;
阿帕奇返回给浏览器,浏览器渲染并呈现;