Web(World Wide Web)即全球广域网,也称为万维网。
我们常说的Web端
就是网页端。
网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。
我们在浏览器上输入网址后,打开的任何一个页面,都是属于网页。
浏览器是网页运行的平台,常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。
W3C:万维网联盟组织,用来制定web标准的机构(组织)。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。
W3C 组织就类似于现实世界中的联合国。
为什么要遵循WEB标准呢?因为很多浏览器的浏览器内核不同,导致页面解析出来的效果可能会有差异,给开发者增加无谓的工作量。因此需要指定统一的标准。
Web标准:制作网页要遵循的规范。
Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。
1、Web标准包括三个方面:
结构标准(HTML):用于对网页元素进行整理和分类。
表现标准(CSS):用于设置网页元素的版式、颜色、大小等外观样式。
行为标准(JS):用于定义网页的交互和行为。
根据上面的Web标准,可以将 Web前端分为三层,如下。
2、Web前端分三层:
3、打个比方:
HTML 相当于人的身体组织结构:
CSS 相当于人的衣服和打扮:
JS 相当于人的行为:
浏览器是网页运行的平台,常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。我们重点需要学习的是 Chrome 浏览器。
浏览器分成两部分:
1、渲染引擎(即:浏览器内核)
2、JS 引擎
浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
渲染引擎是浏览器兼容性问题出现的根本原因。
渲染引擎的英文叫做 Rendering Engine。通俗来说,它的作用就是:读取网页内容,计算网页的显示方式并显示在页面上。
常见浏览器的内核如下:
浏览器 | 内核 |
---|---|
chrome | Blink |
欧鹏 | Blink |
360安全浏览器 | Blink |
360极速浏览器 | Blink |
Safari | Webkit |
Firefox 火狐 | Gecko |
IE | Trident |
备注:360的浏览器,以前使用的IE浏览器的Trident内核,但是现在已经改为使用 chrome 浏览器的 Blink内核。
四种内核的简介:
1、Trident:微软开发的引擎,其产品IE产品都是它驱动,也有很多其他浏览器也用它做内核。
2、Gecko:开源的渲染引擎,有C++编写,功能强大,功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,FireFox就是代表,对w3c标准支持很好,开发和调试都很强大,就是启动速度不太给力;
3、WebKit:苹果公司基于KHTML开发的,对网页的解析比较快,仅此于Presto,但是容错比较差,不标准的网页无法正常显示。用它做核心开发的浏览器代表是Safari,Chrome;
4、Presto:Opera Software公司开始的,是被大家公认为最快的渲染引擎。处理JS脚本等脚本语言时,会比其他的内核快3倍左右,但是快也存在一些问题,就是丢掉了一些网页兼容性;
也称为 JS 解释器。 用来解析网页中的JavaScript代码,对其处理后再运行。
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时会逐行解释每一句源码(转换为机器语言),然后由计算机去执行。所以 JavaScript 语言归为脚本语言,会逐行解释执行。
常见浏览器的 JS 引擎如下:
浏览器 | JS 引擎 |
---|---|
chrome / 欧鹏 | V8 |
Safari | Nitro |
Firefox 火狐 | SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-) |
Opera | Linear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-) |
IE | Trident |
浏览器根据输入的URL查找域名的IP地址,DNS查找过程如下:
1、浏览器缓存:浏览器会缓存DNS记录一段时间,不同浏览器默认缓存时间不一样,IE默认为30分钟,Firefox默认是1分钟。
2、系统缓存:如果在浏览器缓存里没有找到需要的缓存记录,浏览器会到系统缓存中查找。
3、路由器缓存:如果系统缓存中也没有,就会将请求发给路由器并在其DNS缓存中查找。
4、ISP缓存:如果路由器缓存中没有,就会将请求发给ISP的DNS缓存服务器并在其记录中查找。
5、访问根域名服务器:如果ISP缓存中没有,就会由ISP向根域名服务器进行递归搜索,查找到对应记录并返回。
浏览器与对应Web服务器建立TCP连接,并发送HTTP请求,Web服务器接收到请求后进行一系列分析处理(关于HTTP请求响应的详细过程以后再进行剖析)并返回HTML文件。
浏览器接收到服务器返回的HTML文件,解析
标签:1、关于页面的一些配置标签,例如
2、碰到内联CSS和JS会立即解析执行。
3、碰到外部CSS和JS会并发请求相关资源,然后解析执行。不同浏览器针对同一域的同一时间默认并发连接数会有不同,一般在10个以内。
4、接着,浏览器开始解析
碰到需要获取其他地址内容的标签,例如、