app建设网站公司,网站域名可以改吗,网络营销的种类有哪些,赣州吧百度贴吧刚开始写这篇文章还是挺纠结的#xff0c;因为网上搜索“从输入url到页面展示到底发生了什么”#xff0c;你可以搜到一大堆的资料。而且面试这道题基本是必考题#xff0c;二月份面试的时候#xff0c;虽然知道这个过程发生了什么#xff0c;不过当面试官一步步追问下去的… 刚开始写这篇文章还是挺纠结的因为网上搜索“从输入url到页面展示到底发生了什么”你可以搜到一大堆的资料。而且面试这道题基本是必考题二月份面试的时候虽然知道这个过程发生了什么不过当面试官一步步追问下去的很多细节就不太清楚了。 本文的目的是通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很杂。 总的过程大概如下: 1、输入地址 当我们开始在浏览器中输入网址的时候浏览器其实就已经在智能的匹配可能得 url 了他会从历史记录书签等地方找到已经输入的字符串可能对应的 url然后给出智能提示让你可以补全url地址。对于 google的chrome 的浏览器他甚至会直接从缓存中把网页展示出来就是说你还没有按下 enter页面就出来了。 2、浏览器查找域名的 IP 地址 1、请求一旦发起浏览器首先要做的事情就是解析这个域名一般来说浏览器会首先查看本地硬盘的 hosts 文件看看其中有没有和这个域名对应的规则如果有的话就直接使用 hosts 文件里面的 ip 地址。 2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供比如中国电信中国移动。 3、查询你输入的网址的DNS请求到达本地DNS服务器之后本地DNS服务器会首先查询它的缓存记录如果缓存中有此条记录就可以直接返回结果此过程是递归的方式进行查询。如果没有本地DNS服务器还要向DNS根服务器进行查询。 4、根DNS服务器没有记录具体的域名和IP地址的对应关系而是告诉本地DNS服务器你可以到域服务器上去继续查询并给出域服务器的地址。这种过程是迭代的过程。 5、本地DNS服务器继续向域服务器发出请求在这个例子中请求的对象是.com域服务器。.com域服务器收到请求之后也不会直接返回域名和IP地址的对应关系而是告诉本地DNS服务器你的域名的解析服务器的地址。 6、最后本地DNS服务器向域名的解析服务器发出请求这时就能收到一个域名和IP地址对应关系本地DNS服务器不仅要把IP地址返回给用户电脑还要把这个对应关系保存在缓存中以备下次别的用户查询时可以直接返回结果加快网络访问。 下面这张图很完美的解释了这一过程 知识扩展 1)什么是DNS DNSDomain Name System域名系统因特网上作为域名和IP地址相互映射的一个分布式数据库能够使用户更方便的访问互联网而不用去记住能够被机器直接读取的IP数串。通过主机名最终得到该主机名对应的IP地址的过程叫做域名解析或主机名解析。 通俗的讲我们更习惯于记住一个网站的名字比如www.baidu.com,而不是记住它的ip地址比如167.23.10.2。而计算机更擅长记住网站的ip地址而不是像www.baidu.com等链接。因为DNS就相当于一个电话本比如你要找www.baidu.com这个域名那我翻一翻我的电话本我就知道哦它的电话ip是167.23.10.2。 2)DNS查询的两种方式递归查询和迭代查询 1、递归解析 当局部DNS服务器自己不能回答客户机的DNS查询时它就需要向其他DNS服务器进行查询。此时有两种方式如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询一般是先向该域名的根域服务器查询再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器再由局部DNS服务器返回给客户端。 2、迭代解析 当局部DNS服务器自己不能回答客户机的DNS查询时也可以通过迭代查询的方式进行解析如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序客户端DNS程序再继续向这些DNS服务器进行查询直到得到查询结果为止。也就是说迭代解析只是帮你找到相关的服务器而已而不会帮你去查。比如说baidu.com的服务器ip地址在192.168.4.5这里你自己去查吧本人比较忙只能帮你到这里了。 3)DNS域名称空间的组织方式 我们在前面有说到根DNS服务器域DNS服务器这些都是DNS域名称空间的组织方式。按其功能命名空间中用来描述 DNS 域名称的五个类别的介绍详见下表中以及与每个名称类型的示例 4)DNS负载均衡 当一个网站有足够多的用户的时候假如每次请求的资源都位于同一台机器上面那么这台机器随时可能会蹦掉。处理办法就是用DNS负载均衡技术它的原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的例如可以根据每台机器的负载量该机器离用户地理位置的距离等等。 3、浏览器向 web 服务器发送一个 HTTP 请求 拿到域名对应的IP地址之后浏览器会以一个随机端口1024端口65535向服务器的WEB程序常用的有httpd,nginx等80端口发起TCP的连接请求。这个连接请求到达服务器端后这中间通过各种路由设备局域网内除外进入到网卡然后是进入到内核的TCP/IP协议栈用于识别该连接请求解封包一层一层的剥开还有可能要经过Netfilter防火墙属于内核的模块的过滤最终到达WEB程序最终建立了TCP/IP的连接。 TCP连接如图所示: 建立了TCP连接之后发起一个http请求。一个典型的 http request header 一般需要包括请求的方法例如 GET 或者 POST 等不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法一般的浏览器只能发起 GET 或者 POST 请求。 客户端向服务器发起http请求的时候会有一些请求信息请求信息包含三个部分 | 请求方法URI协议/版本 | 请求头(Request Header) | 请求正文 下面是一个完整的HTTP请求例子 GET/sample.jspHTTP/1.1Accept:image/gif.image/jpeg,*/*Accept-Language:zh-cn Connection:Keep-Alive Host:localhost User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0) Accept-Encoding:gzip,deflate usernamejinqiaopassword1234 注意最后一个请求头之后是一个空行发送回车符和换行符通知服务器以下不再有请求头。 1请求的第一行是“方法URL议/版本”GET/sample.jsp HTTP/1.1 2请求头(Request Header) 请求头包含许多有关的客户端环境和请求正文的有用信息。例如请求头可以声明浏览器所用的语言请求正文的长度等。 Accept:image/gif.image/jpeg.*/* Accept-Language:zh-cn Connection:Keep-Alive Host:localhost User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0) Accept-Encoding:gzip,deflate. 3请求正文 请求头和请求正文之间是一个空行这个行非常重要它表示请求头已经结束接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息 usernamejinqiaopassword1234 4、服务器的永久重定向响应 服务器给浏览器响应一个301永久重定向响应这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。 为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址就像http://www.yy.com/和http://yy.com/搜索引擎会认为它们是两个网站结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差当一个页面有好几个名字时它可能会在缓存里出现好几次。 扩展知识 1301和302的区别。 301和302状态码都表示重定向就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址这个地址可以从响应的Location首部中获取用户看到的效果就是他输入的地址A瞬间变成了另一个地址B——这是它们的共同点。 他们的不同在于。301表示旧地址A的资源已经被永久地移除了这个资源不可访问了搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址 302表示旧地址A的资源还在仍然可以访问这个重定向只是临时地从旧地址A跳转到地址B搜索引擎会抓取新的内容而保存旧的网址。 SEO302好于301 2重定向原因 1网站调整如改变网页目录结构 2网页被移到一个新地址 3网页扩展名改变(如应用需要把.php改成.Html或.shtml)。 这种情况下如果不做重定向则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息访问流量白白丧失再者某些注册了多个域名的网站也需要通过重定向让访问这些域名的用户自动跳转到主站点等。 3什么时候进行301或者302跳转呢 当一个网站或者网页24—48小时内临时移动到一个新的位置这时候就要进行302跳转而使用301跳转的场景就是之前的网站因为某种原因需要移除掉然后要到新的地址访问是永久性的。 清晰明确而言使用301跳转的大概场景如下 1、域名到期不想续费或者发现了更适合网站的域名想换个域名。 2、在搜索引擎的搜索结果中出现了不带www的域名而带www的域名却没有收录这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。 3、空间服务器不稳定换空间的时候。 5、浏览器跟踪重定向地址 现在浏览器知道了 http://www.google.com/才是要访问的正确地址所以它会发送另一个http请求。这里没有啥好说的 6、服务器处理请求 经过前面的重重步骤我们终于将我们的http请求发送到了服务器这里其实前面的重定向已经是到达服务器了那么服务器是如何处理我们的请求的呢 后端从在固定的端口接收到TCP报文开始它会对TCP连接进行处理对HTTP协议进行解析并按照报文格式进一步封装成HTTP Request对象供上层使用。 一些大一点的网站会将你的请求到反向代理服务器中因为当网站访问量非常大网站越来越慢一台服务器已经不够用了。于是将同一个应用部署在多台服务器上将大量用户的请求分配给多台机器处理。此时客户端不是直接通过HTTP协议访问某网站应用服务器而是先请求到NginxNginx再请求应用服务器然后将结果返回给客户端这里Nginx的作用是反向代理服务器。同时也带来了一个好处其中一台服务器万一挂了只要还有其他服务器正常运行就不会影响用户使用。 如图所示 通过Nginx的反向代理我们到达了web服务器服务端脚本处理我们的请求访问我们的数据库获取需要获取的内容等等当然这个过程涉及很多后端脚本的复杂操作。由于对这一块不熟所以这一块只能介绍这么多了。 7、服务器返回一个 HTTP 响应 经过前面的6个步骤服务器收到了我们的请求也处理我们的请求到这一步它会把它的处理结果返回也就是返回一个HTPP响应。 HTTP响应与HTTP请求相似HTTP响应也由3个部分构成分别是 l 状态行 l 响应头(Response Header) l 响应正文 HTTP/1.1 200 OK Date: Sat, 31 Dec 2005 23:59:59 GMT Content-Type: text/html;charsetISO-8859-1 Content-Length: 122html head titlehttp/title /headbody !-- body goes here -- /body /html 状态行 状态行由协议版本、数字形式的状态代码、及相应的状态描述各元素之间以空格分隔。 格式: HTTP-Version Status-Code Reason-Phrase CRLF 例如: HTTP/1.1 200 OK -- 协议版本是用http1.0还是其他版本 -- 状态描述状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok -- 状态代码状态代码由三位数字组成第一个数字定义了响应的类别且有五种可能取值。如下 1xx信息性状态码表示服务器已接收了客户端请求客户端可继续发送请求。 100 Continue 101 Switching Protocols 2xx成功状态码表示服务器已成功接收到请求并进行处理。 200 OK 表示客户端请求成功 204 No Content 成功但不返回任何实体的主体部分 206 Partial Content 成功执行了一个范围Range请求 3xx重定向状态码表示服务器要求客户端重定向。 301 Moved Permanently 永久性重定向响应报文的Location首部应该有该资源的新URL 302 Found 临时性重定向响应报文的Location首部给出的URL用来临时定位资源 303 See Other 请求的资源存在着另一个URI客户端应使用GET方法定向获取请求的资源 304 Not Modified 服务器内容没有更新可以直接读取浏览器缓存 307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET但实际使用时并不一定307则更多浏览器可能会遵循这一标准但也依赖于浏览器具体实现 4xx客户端错误状态码表示客户端的请求有非法内容。 400 Bad Request 表示客户端请求有语法错误不能被服务器所理解 401 Unauthonzed 表示请求未经授权该状态代码必须与 WWW-Authenticate 报头域一起使用 403 Forbidden 表示服务器收到请求但是拒绝提供服务通常会在响应正文中给出不提供服务的原因 404 Not Found 请求的资源不存在例如输入了错误的URL 5xx服务器错误状态码表示服务器未能正常处理客户端的请求而出现意外错误。 500 Internel Server Error 表示服务器发生不可预期的错误导致无法完成客户端的请求 503 Service Unavailable 表示服务器当前不能够处理客户端的请求在一段时间之后服务器可能会恢复正常 响应头 响应头部由关键字/值对组成每行一对关键字和值用英文冒号:分隔典型的响应头有 响应正文 包含着我们需要的一些具体信息比如cookiehtml,image后端返回的请求数据等等。这里需要注意响应正文和响应头之间有一行空格表示响应头的信息到空格为止下图是fiddler抓到的请求正文红色框中的响应正文 8、浏览器显示 HTML 在浏览器没有完整接受全部HTML文档时它就已经开始显示这个页面了浏览器是如何把页面呈现在屏幕上的呢不同浏览器可能解析的过程不太一样这里我们只介绍webkit的渲染过程下图对应的就是WebKit渲染的过程这个过程包括 解析html以构建dom树 - 构建render树 - 布局render树 - 绘制render树 浏览器在解析html文件时会”自上而下“加载并在加载过程中进行解析渲染。在解析过程中如果遇到请求外部资源时如图片、外链的CSS、iconfont等请求过程是异步的并不会影响html文档进行加载。 解析过程中浏览器首先会解析HTML文件构建DOM树然后解析CSS文件构建渲染树等到渲染树构建完成后浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂涉及到两个概念: reflow(回流)和repain(重绘)。 DOM节点中的各个元素都是以盒模型的形式存在这些都需要浏览器去计算其位置和大小等这个过程称为relow;当盒模型的位置,大小以及其他属性如颜色,字体,等确定下来之后浏览器便开始绘制内容这个过程称为repain。 页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的尤其是在移动设备上它会破坏用户体验有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。 当文档加载过程中遇到js文件html文档会挂起渲染加载解析渲染同步的线程不仅要等待文档中js文件加载完毕还要等待解析执行完毕才可以恢复html文档的渲染线程。因为JS有可能会修改DOM最为经典的document.write这意味着在JS执行完成前后续所有资源的下载可能是没有必要的这是js阻塞后续资源下载的根本原因。所以我明平时的代码中js是放在html文档末尾的。 JS的解析是由浏览器中的JS解析引擎完成的比如谷歌的是V8。JS是单线程运行也就是说在同一个时间内只能做一件事所有的任务都需要排队前一个任务结束后一个任务才能开始。但是又存在某些任务比较耗时如IO读写等所以需要一种机制可以先执行排在后面的任务这就是同步任务(synchronous)和异步任务(asynchronous)。 JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件脚本运行时先依次运行执行栈然后会从任务队列里提取事件运行任务队列中的任务这个过程是不断重复的所以又叫做事件循环(Event loop)。具体的过程可以看我这篇文章点击这里 9、浏览器发送请求获取嵌入在 HTML 中的资源如图片、音频、视频、CSS、JS等等 其实这个步骤可以并列在步骤8中在浏览器显示HTML时它会注意到需要获取其他地址内容的标签。这时浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片CSSJS文件等类似于下面的链接 图片http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif CSS式样表http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css JavaScript 文件http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js 这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名发送请求重定向等等... 不像动态页面静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯而从缓存中直接读取或者可以放到CDN中 至此从输入url到页面展示的过程终于整理完了。当然文笔有限有误之处欢迎指出本文参考了很多的文章不过很多文章的链接不记得了所以只列出了下面三个参考链接。 参考文献 https://segmentfault.com/a/1190000006879700 http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://zrj.me/archives/589
