`
xiaolanglang123
  • 浏览: 26221 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
文章分类
社区版块
存档分类

URL 加载到页面的完整过程

阅读更多

(本图为:URL 加载到页面的完整过程)

 
(本图为:URL 加载到页面的完整过程)
 
今天小编带来这篇文章主要关于“从输入 URL 到页面加载完的过程中都发生了什么事情”这个主题来进行探讨下。
 
一个HTTP请求的过程
 
为了简化我们先从一个HTTP请求开始,简要介绍一下一个HTTP求情的网络传输过程,也就是所谓的“从输入 URL 到页面下载完的过程中都发生了什么事情”
 
DNS Lookup 先获得URL对应的IP地址
 
Socket Connect 浏览器和服务器建立TCP连接
 
Send Request 发送HTTP请求
 
Content Download 服务器发送响应
 
如果下到物理层去讲就有点耍流氓了,如果这些你还认可这几个步骤的话,我们就来讲一下这里面存在的性能问题。
 
如果你对DNS的查询还有印象的话现在反思一下,DNS Lookup就是为了获取一串IP地址要和无数个DNS服务器进行通信,这要消耗多少时间?别忘了你查询完了的时候你还没和那边的服务器通信呢。
 
TCP连接要三次握手,如果服务器很远的话这三次握手要花多少时间?别忘了建立连接之后你还没发请求呢。(通常到这里0.5秒就出去了)
发送HTTP请求的时候你要知道一点就是我们的网络带宽上行和下行通常是不一样的,通常上行的带宽会小一些,一个的话还好,但是现在的网页通常都会后续请求很多资源,带宽小的时候上行拥塞怎么办?别忘了已经到第三步了,服务器还没给你发响应呢,现在你的浏览器还什么都画不出来。
 
终于到了服务器发响应了,不巧你访问的这个服务器比较忙,好几万个人都要这个资源,服务器的上行带宽也是有限的,怎么办?
 
我觉得我出了几道还不错的面试题。顺便提一下,前两步的延迟和网络带宽的影响不大;后两步加带宽是能一定程度缓解,不过你要有钱,而且很贵。虽说博主做过Webkit本地渲染的优化,但是深知网页加载的主要时间还是浪费在网络通信上,所以在这些步骤上的优化会比你在浏览器内核的优化省力且效果明显。
 
网络方面的主要优化手段,博主总结一下不外乎缓存,预取,压缩,并行。以后如果再有面试问性能优化之类的问题,大家都可以照着这个思路去考虑,下面就分阶段介绍一下现有的优化手段。
 
DNS 优化
 
对于DNS优化,缓存无疑是最简单粗暴且效果明显的了。说到缓存就一定要提到缓存层级:
 
浏览器DNS缓存,chrome可以看 chrome://net-internals/#dns
系统DNS缓存
 
hosts文件,墙里的小伙伴们应该有印象
 
各个DNS服务器上的缓存
 
当然DNS缓存失效期通常都比较短,很多情况下都要再去查找,为了降低用户体验到的延迟(注意这里不是网络延时)预取是一个不错的方法。比如说你敲网址的时候还没有敲完,但是浏览器根据你的历史发现你很有可能去访问哪个网站就提前给你做dns预取了,比如你打了一个“w”的时候,chrome已经帮你去找weibo.com的ip地址了。chrome用户可以看一下 chrome://predictors/ 你就知道了。
 
此外浏览器还会记录你过去的历史知道每个域名下通常还会有哪些其他的链接建立起网站的拓扑结构,当你访问这个域名下的网站他就会预先对其他链接的域名进行DNS解析可以参照 chrome://dns/。
 
TCP 优化
 
看到前面的DNS的具体优化这么繁杂,知道这简单的一步没那么简单了吧。结果到TCP这一步优化反而简单了,因为刚才dns已经把ip都预先弄到了那么我们顺着刚才的步骤再建立连接就好了。所以在你敲第一个字母的时候dns解析完了就去建立连接了,这时候你可能网址还没敲完。当你刚访问一个网站的时候浏览器刷刷刷的帮你把到别的服务器的TCP连接给你建好。
 
HTTP传输优化
 
写到这里可能有人会想,既然已经把TCP连接建立好了,那我干脆预取更进一步,把所有的链接内容直接预取下来不就好了,这样我网址还没敲完网页就已经加载完成了。这个想法是好的,但现实却是残酷的。因为要记住我们的带宽是有限的,DNS和TCP连接量级都比较轻,对网络带宽不会占据太多,但是HTTP传输就不一样了如果你所有链接都去预取的话你的带宽很快就被占满了,这样你正常的请求无法得到满足,性能反而会严重下降。
 
缓存就又出现了,提缓存必提层次结构。
 
PageCache 这个是最快的了,直接在内存中缓存了现有网页的dom结构和渲染结果,这就是你为什么在点前进后退的时候会这么快。
 
HTTP Cache 文件级别的Cache存在本地的文件系统上按照RFC2616实现。
 
代理Cache 如果是通过代理服务器上网的话,代理服务器通常也会按照缓存标准
 
CDN 一个地理上离你很近的内容服务器,比如说你在北京请求杭州淘宝的一个图片,结果在北京的一个CDN上有这个图片,那么就不用去杭州了。
 
DMOC(distributed memory object caching system)CDN主要存放的是静态数据,但是网页中通常有很多动态的数据需要查数据库,流量多了压力就会很大,通常服务器外围还会有一层内存缓存服务器,专门缓存这些数据库中的对象,据《淘宝技术这10年》称可以减少99.5%的数据库访问。
 
Server 其实真正落在服务器上的请求已经不多了。
 
大家看到这里有没有想到能在什么地方再加一层缓存呢?其实可以在2和3之间加,也就是在路由器上加缓存。小米的路由器和搜狗合作的预取引擎其实就相当于是在路由器上加一层缓存款顺便智能预取一下。博主为什么在这里另起一段专门谈小米呢,难不成是小米的水军?才不是呢,是因为博主看到这个消息的时候心都凉了,和博主的毕设撞车了有木有。去年在360刚出随身WiFi的时候博主想到了这么个点子,还想着把这个东西做出来之后用这个创业和360谈合作。结果最近刚做完,论文也投出去了,幻想着开启人生巅峰,颠覆行业结果就发现小米和搜狗出了这么个一样的东西还都商业化了。说好的人生巅峰就这样没有了,早知道去年就先申请个专利了。
 
另一个HTTP常用的优化就是压缩了,网络传输时间 = 消息大小/网速 既然网速比较贵那么就压缩一下吧,大部分服务器都会对HTTP消息进行gzip压缩。可以在Http Header中看到,具体的就不细说了。
 
未来协议 SPDY
 
上面的都是传统做法,下面讲一个未来的技术。由于HTTP协议是上个世纪制定的协议了,已经不能很好的适应现在Web的发展,所以Google提出了SPDY协议目前是指定中的HTTP2.0标准的一个底版。SPDY主要有下面的特点:
 
一个TCP连接上并行多个HTTP连接,减少连接的建立时间
 
请求优先级(目前还没看到具体实现)
 
HTTP头部压缩,上文提到的HTTP压缩是对HTTP body的压缩,并没有对头部压缩。对于小的HTTP消息,头部的比重还是很大的,而现在的web中存在大量小消息。
 
Server push/hint 服务器主动推送对象(可以想象成服务器帮客户端预取)
 
业界目前对SPDY是有赞有弹,博主也持谨慎的态度。主要在1和4上,4其实和之前提到的HTTP直接预取的矛盾点一样,万一推送的不需要又占据了带宽怎么办,hint到底该如何实现都有困难。第一条潜在的风险就是TCP连接中途断开,那么所有的连接就全部停掉了,PC互联网这种情况可能会少一些,但是移动互联网中TCP连接断开的情况还是比较常见的。不过作为一个未来的技术还是有必要关注一下。
 
以上就是小编为大家带来的这个话题的相关问题,不知道跟小伙伴们所理解的,所了解的信息是否是一致的呢,很高兴为大家分享文章。

 

文章来源于:http://www.alqsoft.com/xinwenzixun/qitaruanjiankaifazixun/2015/0104/177.html

分享到:
评论

相关推荐

    概述一个页面从输入URL到页面加载完的过程

    【页面加载过程】是从用户在浏览器中输入URL到最终页面完全加载完毕的一系列复杂网络活动。这个过程可以分为几个关键步骤: 1. **域名解析**:首先,浏览器需要将输入的URL转换为服务器的IP地址。这涉及到DNS...

    flash中加载网页

    6. **优化与性能**:加载网页内容可能会消耗一定的时间和资源,因此优化加载过程至关重要。可以考虑预加载、分块加载、异步加载等策略来提高用户体验。 7. **调试与测试**:在开发过程中,使用Flash的内置调试器或...

    jquery 实现的等待加载页面

    总的来说,这个压缩包提供了一个完整的jQuery实现的等待加载页面的实例。开发者可以通过研究这些文件来了解如何使用jQuery创建动态的加载效果,提升网页的用户体验。这涉及到理解jQuery的选择器、事件处理、CSS动画...

    从给定的 URL 加载. Vue 文件,并将其直接编译到 Browser.zip 中的组件

    本话题涉及的核心知识点是将Vue组件从远程URL加载并直接在浏览器中进行编译,这通常涉及到以下几个关键步骤和技术: 1. **Vue组件**:Vue组件是Vue.js中的核心概念,它是一种可复用的代码块,可以封装不同的UI部分...

    替换WebView加载网页失败

    如果URL无效或者网络连接有问题,WebView将无法加载页面。 3. **权限问题**:Android 6.0(API级别23)及以上版本需要运行时权限,包括INTERNET权限。确保在Manifest.xml文件中声明并请求了相应的权限。 ```xml `...

    Android中的webview监听每次URL变化实例

    在onLoadResource中,可以获取到即将加载的URL,并进行日志记录或其它处理。代码示例是这样的: ```java webView.setWebViewClient(new WebViewClient() { @Override public void onLoadResource(WebView view, ...

    JQ 自动加载页面

    由于无法直接访问该链接,我将提供一个通用的jQuery自动加载页面的实现过程。 1. **HTML结构**: - 页面通常包含一个主要容器,用于显示加载的内容。 - 有一个触发加载的元素,如一个“加载更多”按钮或一个滚动...

    WebKit加载网页的流程.pdf

    WebKit加载网页的过程涉及到多个关键步骤和组件,其中WebCore是WebKit中负责网页内容加载和渲染的核心框架。WebKit是一个开源的网页浏览器引擎,广泛用于Safari、Chrome、以及其他一些浏览器中。WebCore作为WebKit的...

    网页按顺序加载 最后加载js广告

    网页的加载过程是一个复杂而有序的过程,涉及到许多技术细节。在这个过程中,浏览器会按照HTML、CSS、JavaScript的顺序逐行解析资源,最后加载JS广告。这样的加载策略有助于优化用户体验,因为主要内容可以更快地...

    页面加载时的验证

    当用户在浏览器中输入URL或点击链接后,浏览器开始执行一系列复杂的步骤来获取并展示网页内容,这一过程就是页面加载。本资源针对这个主题提供了实用且易理解的代码示例,适合直接应用到项目中。 首先,页面加载...

    Jquery网页部分内容加载

    "Jquery网页部分内容加载"这个主题就涉及到了如何利用jQuery库实现网页内容的按需加载,即延迟加载(Lazy Loading)或局部加载(Partial Loading)。这种方法可以显著提高页面加载速度,减少用户等待时间,同时节约...

    ios-网页加载.zip

    - 错误处理:如果网页加载失败,`TOWebViewController`会显示一个错误页面,允许用户重新加载或者返回。 - 自定义行为:你可以通过代理方法(如`webView(_:decidePolicyFor:decisionHandler:)`)来控制`WKWebView`的...

    用android框架加载网页

    WebViewClient主要处理页面加载的开始、结束、错误等事件,而WebChromeClient则关注更复杂的交互,如处理对话框、进度条和网页标题等。 3. **JavaScript交互**:通过Webview,我们可以启用JavaScript,并与...

    js加载页面

    首先,了解JavaScript加载页面的基本过程至关重要。当用户访问一个网页时,浏览器会解析HTML文件,并遇到`<script>`标签。这些标签可以内联包含JavaScript代码或指向外部JS文件的URL。对于外部文件,浏览器会发起...

    WebView加载URL

    在Android开发中,WebView是一个非常...综上所述,"WebView加载URL"项目涉及到了Android WebView的多个核心功能和最佳实践,是一个很好的学习和参考示例,帮助开发者理解如何在Android应用中集成和控制网页内容的显示。

    知乎的关于页面加载过程1

    页面加载的整个流程涉及前端开发的方方面面,从浏览器获取URL开始,到页面最终呈现在用户面前,其中包含了许多技术细节。初级前端开发者可能仅能描述出浏览器请求、服务器响应和前端解析的基本流程,而对其中涉及的...

    ios-界面中一部分加载网页.zip

    上述代码中,我们通过`load(URLRequest:)`方法加载了一个指定URL的网页。 为了处理网页加载状态,我们可以监听`WKWebView`的代理方法。例如,`webView(_:didFinish:)`会在网页加载完成时被调用,`webView(_:didFail...

    Android 加载网页进度条.zip

    这个方法会在网页加载过程中被多次调用,每次调用都会传递当前的加载进度(0-100)。 ```java webView.setWebChromeClient(new WebChromeClient() { @Override public void onProgressChanged(WebView view, ...

    页面加载的Loading效果

    在网页设计中,"页面加载的Loading效果"是一种常见的用户体验优化策略,旨在提供一个视觉反馈,让用户知道网站正在加载内容。这种效果通常出现在页面内容完全加载之前,为用户展示一个动态图标或进度条,减少用户的...

    Android WebKit HTML主资源加载过程

    `clearHelpers()` 方法的作用是清理当前页面的对话框(dialog)、输入法等组件,以确保加载新页面时不会受到旧页面元素的影响。 ```java // BrowserFrame.java public void loadUrl(String url, Map, String> ...

Global site tag (gtag.js) - Google Analytics