`
vvvvbbbb
  • 浏览: 21224 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论
阅读更多
1.1     网络接入

浏览器是用来上网的,这个很好理解,除了离线浏览,大部分的行为就是用来跟各种服务器做交互,而交互的第一个前提就是网络接入。一个简单的例子就是PC通过modem拨号上网,当你拨号成功以后,你就会获得一个ip地址,可以同网络上的其它ip进行通讯,这就是接入了,当你不上网的时候,你会挂断。

因为用户需要接入,就诞生了ISP(Internet Service Provider),来为用户提供互联网接入服务,在上面的例子中,拨号我们可能拨163,或者263,这就是一个ISP。大部分用户通过以太网网卡和网线和PC连接在一起,可能用的是电信、网通、铁通,他们都是ISP。

中国移动通过GPRS和EDGE为用户提供互联网接入,他也是ISP。

在大陆,大的ISP有:中国电信,中国网通、中国铁通、中国移动、中国联通。

在手机等无线终端里面,我们更多的听到的是“承载方式”这个词,主要是根据终端接入ISP的网络方式来区分的,常见的承载方式有GSM,GPRS、EDGE、CDMA,WIFI等等,不通的承载方式网络速度的差别比较大。
1.2     数据传输

接入互联网仅仅相当于我们的物理链路打通了,我们需要找到我们要通讯的对象,以及要确保在不可靠的物理链路上实现可靠地传输,需要流量控制来提高我们的链路传输性能,这就需要IP,TCP,UDP等协议来协助我们。

简单地说,IP是互联网协议,主要负责的是寻址和选路,同时适应我们的承载,做一些简单的分片工作。TCP协议则帮助我们实现的可靠传输、流量控制和多路复用等功能。UDP则主要是多路复用和不可靠的数据传输。如果采用UDP,一般应用层要自己保证数据的可靠性。

在无线网络中,wdp+wtp用来实现同tcp类似的功能。

在系统级别上,比较常见的是将TCP/IP,UDP封装成套接字的接口,供浏览器内核调用。

因此,我们从浏览器的角度看,接触到的主要是如下几个过程:

1)  解析dns,由于访问的时候,键入的大部分是域名,而套接字的通讯是以ip地址为标识之一的。有的系统会在本地有域名表供查询,如果查不到,再给dns server发送dns query数据包。有的系统,则将dns查询和套接字的连接(connect)封装在一起。

2)  连接服务器,这就是我们经常提到的tcp的三次握手

3)  查询套接字,如bsd socket的select,就是要检测套接字的可读,可写,关闭等消息。

4)  发送数据

5)  接收数据

6)  关闭连接
1.3     超文本传输协议(HTTP)

HTTP协议建立了请求—响应模型,用来帮助服务器和终端之间传输超文本。一个简单的HTTP过程如下:

1)  客户端向服务器发送一个请求

GET http://www.google.cn:80/somedata.exe

  Host: www.google.cn

  Accept: */*

  Cache-Control: no-cache

User-Agent: dillo

2)  服务器响应以资源内容

HTTP/1.0200OK

  Date:Mon,31Dec200104:25:57GMT

  Server:Apache/1.3.14(Unix)

  Content-type:text/html

  Last-modified:Tue,17Apr200106:46:28GMT

  Etag:"a030f020ac7c01:1e9f"

Content-length:397



<html>……………………..</html>



由于是一个简单的request—response响应,所以http会话本身是没有状态的,后来为了实现有状态,提出了cookie的概念,现在cookie在网络上很经常用来携带账号相关的信息,因此cookie的使用时有一定风险的,大部分浏览器都提供禁用cookie的开关。

另外,为了避免同服务器之间反复的交互,减小网络负载,http还引入了cache的机制。对于像baidu首页这样的页面,是很少做改变的,因此客户端访问过一次以后,可以将它缓存下来,下次再访问,只要缓存没有过期,就可以直接从本地取,不需要再从baidu的服务器取到页面数据。

在无线网络中,收到带宽的限制,还经常对http的体部做内容编码,常见的编码方式就是gzip,这样客户端在受到数据以后,必须对数据进行解码。

http协议对浏览器的理解非常重要,有兴趣的同志建议看rfc2616。
1.4     数据的安全传输(SSL/TLS)

由于http协议是以明文传送的,因此用来传递账号相关的信息是不合适的。

Netscape公司设计了SSL,用来实现数据在网络上的安全传输。ietf将SSL标准化后叫TLS,两者并没有特别大的区别。

SSL在协议架构上的位置如下:

---------
|    HTTP      |
---------
|    SSL       |
---------
|    TCP       |
---------
|    IP        |
---------

在tcp连接成功后,用户代理首先同服务器进行安全协商,也就是ssl的handshake,在握手成功后,才发起HTTP请求,所发的HTTP请求会由商定的加密算法进行加密,所以看到的不再是GET www.baidu.com /HTTP1.1这样的明文,而是SSL里面的applicationdata,服务器收到请求后进行解密,将响应加密后传给用户代理,用户代理调用解密算法对ssl的applicationdata解密得到HTTP的响应,协议比较简单,关键在于加密算法上。

有兴趣的同志可以参阅http://www.ietf.org/rfc/rfc2246.txt,另外,绿盟的文章SSL/TLS/WTLS原理(http://www.nsfocus.net/index.php?act=magazine&do=view&mid=841)讲解非常通俗易懂,可以学习下。
1.5     标记语言解析

html/xhtml/wml是网页常用的标记语言。也是用户代理通过HTTP获得的网页的内容,通过标记语言,网页编写者将网站的内容有效地组织在一起,并为用户提供导航。为了方便地操作网页中的个体元素以及数据,实现与浏览器、平台、语言的无关性,W3C提出了文档对象模型的概念(DOM:Document Object Model)。

一般来说,浏览器的解析工作就是解析标记语言,分析出标记语言的结构,用于后面要进行的网页排版和渲染工作中。支持DOM的浏览器还会在这个过程形成DOM树状结构。

另外,网页中还会嵌入图片资源,背景音,外部CSS和其他对象资源,解析过程还要将这些嵌入资源找出来,以便对嵌入资源进行HTTP请求。
1.6     网页排版和渲染

在标记语言解析完毕以后,浏览器需要对页面的各个组件进行排版,计算他们在页面中的位置坐标和大小,然后在显示设备上将对应的组件渲染出来。网页排版和渲染是浏览器的核心技术,好的浏览器会有很好的显示效果和渲染性能。渲染的时候,会调用到平台上的图形库。比如GTK,QT之类的。浏览器的移植工作很大部分就在于图形库的移植。
1.7     CSS(层叠样式表)

CSS用来对页面的布局、字体、颜色、背景等进行控制,它会引起网页的重新排版,让网页看起来像一个个容器的概念。CSS让页面的内容和表现分离开来,而且能够让网站保持风格的一致性,是当前页面设计的主流。

一个简单的例子,可能你也遇到过,访问一个网页的时候,有时候网速比较慢,会发现网页下来以后,页面排版乱七八糟的,跟平时表现不一样,这时候,很有可能就是CSS还没有下载下来。
1.8     JAVASCRIPT

JAVASCIPT是一个面向对象的客户端脚本。由于能够调用客户端的CPU来做事情,所以JAVASCIPT的潜力是巨大的。他的设计初衷是让客户端自己来进行一些数据的验证,做一些交互,减少客户端同服务器的交互,现在得到了大量的运用,主流网站都会在自己的网页上嵌入javascript。当然,javascript对浏览器的性能的挑战也是巨大的,恶意的递归可能让浏览器crash。

Google为什么要开发chrome?就是想在服务器上提供更多的类似在线office这样的软件,即时髦的云计算,这些又是怎么做到了呢?在客户端来说,就是强大的javascript处理能力。Chrome用的是webkit的内核,最大的改进就在于Javascript V8引擎。Google专门请了天才拉斯巴克来写V8引擎,还允许拉斯巴克在自己的农舍上班,而不是到google的办公室。

在嵌入式终端中,还有wmlscript脚本,他是一个轻量级的javascript,主要用来验证用户输入,生成消息框,简单计算。同javascript不同的是,他不嵌入网页,要通过url访问,由于功能非常有限,现在已经很少得到使用。下面是javascript和wmlscript的例子:

<html>

<head>

  <script language="LiveScript">

     function pushbutton() {

       alert("嗨! 你好");

  }

</script>

</head>

<body>

<form>

  <input type="button" name="Button1" value="Push me" onclick="pushbutton()">

  </form>

</body>

</html>



wml script例子

wml文件中

<card id="no1" title="Go to URL">

<do type="options" label="Go">

<go href="check.wmls#go_url('W3School')"/>

</do>

</card>

check.wmls文件中,定义了go_url

extern function go_url(the_url)

{

if (the_url=="W3School")

{                                                                                                                                   

WMLBrowser.go("http://www.w3school.com.cn/wmlscript/wap.wml")

}

}
1.9     浏览器简单流程

下面以tcp连接为例简单介绍浏览器的流程。

1)  接入互联网,很多情况下,终端都是一直在线了,所以这部可以省略。但是像GPRS这样的承载,都是在进入浏览器的时候才打开gprs通道。

2)  用户输入url

3)  浏览器对url进行dns解析,由于dns解析可能涉及到网络或者文件操作,所以dns解析式异步的。

4)  dns解析到ip地址后,浏览器调用socket去连接远端服务器(如果是使用了HTTP Proxy,则这个时候连接的是Proxy地址),因为是tcp连接,需要做三次握手,所以也是异步的。

5)  浏览器在调用连接的接口后,会轮询套接字,如果套接字收到了连接成功的消息(或者,在某些套接字设计中,是可写消息),就调用套接字的发送接口来发送HTTP请求数据。

6)  发送请求的过程也是一个异步的过程,而且非常有可能不能一次性发完,这个时候会不停地轮询套接字,检测可写消息。

7)  发送完请求数据后,就等待响应。知道套接字有了可读消息,HTTP就去收数据,数据一般多次才能收齐。HTTP1.1通过content-length头部或者chunked机制来判断什么时候收起数据,而1.0则通过对端关闭来判断。

8)  收齐数据后,HTTP解析响应,有选择性地对体部数据进行解码(如果存在编码),将解码后的数据传给解析模块进行解析。当然,好的浏览器,能够做到边收数据边解析。

9)  解析标记语言,形成解析数据结构和DOM树。如果页面中含有嵌入子媒体对象(如图片,外部CSS,背景音,其它对象),则发起HTTP请求,请求对应数据。

10)              对网页进行排版(如果有CSS,要根据CSS规则进行排版)

11)              渲染网页
分享到:
评论

相关推荐

    浏览器内核知识你知多少.docx

    ### 浏览器内核知识详解 #### 一、引言 随着互联网技术的发展与普及,浏览器已成为人们日常生活中不可或缺的工具。然而,对于大多数用户而言,“浏览器内核”这一概念可能较为陌生。实际上,浏览器内核对于浏览器的...

    将B站视频设为浏览器网页背景

    为了实现将B站视频设为浏览器背景的功能,可能涉及以下技术知识点: 1. **Chrome插件开发**:首先,需要了解Chrome插件的开发环境,包括HTML、CSS、JavaScript以及manifest.json文件的编写。manifest.json文件是...

    第一章 背景知识简介

    【Ajax背景知识简介】 Ajax(Asynchronous JavaScript and XML)是一种创建交互式Web应用程序的技术,它允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这提高了用户体验,使得页面响应更快...

    Swift-图片浏览器 Swift-图片浏览器 Swift-图片浏览器

    13. **夜间模式**: 为了提供更好的用户体验,图片浏览器可以添加夜间模式,调整背景色和字体颜色。 14. **图片元数据**: 如果图片带有元数据,如拍摄日期、地理位置等,可以考虑在图片浏览器中展示这些信息。 15. ...

    HTML中使背景图片自适应浏览器大小.docx

    在HTML中,背景图片的自适应浏览器大小是一个非常重要的知识点,特别是在响应式网页设计中。这篇文章将详细介绍如何使背景图片自适应浏览器大小,并提供了两个解决方案。 一、背景图片自适应浏览器大小的重要性 在...

    区别不同浏览器CSS hack

    ### 区别不同浏览器CSS Hack知识点详解 #### CSS Hack简介 在Web开发过程中,由于不同浏览器对CSS的支持程度不一,导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示...

    javascript获取浏览器临时目录

    #### 二、背景知识 1. **浏览器安全模型**:现代浏览器为了保护用户隐私和数据安全,采用了严格的沙箱机制和同源策略,限制了网页脚本对本地文件系统的访问权限。 2. **ActiveXObject**:这是一个在Internet ...

    iframe自适应高度兼容各主流浏览器

    知识点3:浏览器的差异性 不同浏览器对iFrame的支持和行为存在差异,因此需要对不同的浏览器进行特殊处理。例如,IE浏览器需要特殊处理其边框和滚动条的高度,而Firefox浏览器需要对其高度进行特殊计算。 知识点4...

    java web 浏览器

    在Java中创建一个Web浏览器涉及到多个关键知识点,包括但不限于Java Swing或JavaFX图形用户界面库、URL处理、HTML解析以及可能的JavaScript交互。 1. **Java Swing与JavaFX**: Java提供两种主要的GUI库,Swing和...

    紫狐浏览器2.02

    在浏览器市场竞争激烈的今天,紫狐浏览器2.02版具有以下几个关键知识点: 1. **技术基础**:紫狐浏览器采用了Firefox(火狐)的开源代码,这意味着它拥有Mozilla的先进浏览器引擎,支持HTML5、CSS3等现代网络标准,...

    ie6浏览器下载

    1. **历史背景**:IE6是微软在2001年9月发布的,作为Windows XP的一部分。它在那个时代具有重要意义,因为那时浏览器市场竞争激烈,但IE6凭借其与操作系统紧密集成的优势占据了主导地位。 2. **市场份额**:在发布...

    浏览器兼容代码大全

    ### 浏览器兼容代码大全 #### 概述 本文档提供了一系列的代码示例,旨在帮助初学者解决不同浏览器间的兼容性问题。通过本文档的学习,你可以掌握如何编写能够跨...希望这些知识能够帮助你更好地进行前端开发工作。

    css3编写浏览器背景渐变背景色的方法

    本文介绍了css3编写浏览器背景渐变背景色的方法,分享给大家,具体如下: 效果如下: 知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。 ...

    菜鸟浏览器

    "菜鸟浏览器"是一款专为搜索QQ空间背景音乐设计...通过以上分析,我们可以看出"菜鸟浏览器"在实现上融合了网络爬虫技术、前端交互、数据解析等多个IT领域的知识,为用户提供了一个高效且方便的QQ空间背景音乐搜索工具。

    微信判断浏览器自动弹出遮罩层代码

    标题"微信判断浏览器自动弹出遮罩层代码"涉及到的核心知识点包括: 1. **浏览器检测**:首先,我们需要通过JavaScript来检测当前的浏览器环境。常见的方法是检查UserAgent字符串,微信内置浏览器的UserAgent通常...

    浏览器开发

    7. **扩展机制**:浏览器允许安装插件和扩展,这涉及到浏览器的扩展API,如Chrome的Manifest文件、背景脚本、内容脚本等。 8. **性能优化**:浏览器开发者需要关注加载速度、内存占用和CPU使用率。这可能涉及到HTTP...

    电子书浏览器

    在当今数字化的时代,电子书已经成为了获取知识和娱乐的重要方式,而电子书浏览器则是连接读者与电子内容的关键桥梁。本文将详细讨论支持PDF、PDB、TLPDG和SSREADER等格式的电子书浏览器的功能特性、应用场景以及...

    qtwebkit核心浏览器实例

    QTWebKit核心浏览器实例是基于Qt框架的一个重要应用,它利用了WebKit引擎来提供网页渲染和...通过这些知识点,开发者可以构建出具有完整功能的浏览器应用,满足各种需求,无论是简单的网页展示还是复杂的Web应用集成。

    浏览器兼容性汇总

    ### 浏览器兼容性汇总知识点 #### 一、JavaScript兼容性问题 ##### 1. HTML对象获取问题 - **火狐(Firefox)**: 使用 `document.getElementById("idName")` 获取DOM元素。 - **IE**: 支持 `document.idname` 和 ...

    浏览器 图标总汇 ico + png

    在商业项目中使用这些图标前,应确保已经获得了必要的授权,避免侵犯他人的知识产权。 此外,对于Web开发者来说,了解如何将这些图标集成到网页中也是必要的。在HTML中,可以通过`&lt;link&gt;`标签来设置favicon,如下所...

Global site tag (gtag.js) - Google Analytics