add: 浏览器的介绍
This commit is contained in:
qianguyihao
parent
4b17f7f65c
commit
796712317e
22
01-html/01-认识Web.md
Normal file
22
01-html/01-认识Web.md
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
## Web和网页
|
||||
|
||||
### Web
|
||||
|
||||
Web（World Wide Web）即全球广域网，也称为万维网。
|
||||
|
||||
我们常说的`Web端`就是网页端。
|
||||
|
||||
### 网页
|
||||
|
||||
**网页是构成网站的基本元素**。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
|
||||
|
||||
我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。
|
||||
|
||||
### 浏览器
|
||||
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。
|
||||
|
||||
关于浏览器的详细介绍，可以看下一篇文章。
|
||||
|
||||
|
||||
104
01-html/02-浏览器的介绍.md
Normal file
104
01-html/02-浏览器的介绍.md
Normal file
@ -0,0 +1,104 @@
|
||||
|
||||
|
||||
## 常见的浏览器
|
||||
|
||||
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
|
||||
|
||||
|
||||
|
||||
我们重点需要学习的是 Chrome 浏览器。
|
||||
|
||||
## 浏览器的市场占有份额
|
||||
|
||||
浏览器的市场占有份额：<https://tongji.baidu.com/research/site?source=index#browser>
|
||||
|
||||
|
||||
|
||||
上面这张图的统计时间是2020年2月。
|
||||
|
||||
## 浏览器的组成
|
||||
|
||||
浏览器分成两部分：
|
||||
|
||||
- 1、渲染引擎（即：浏览器内核）
|
||||
|
||||
- 2、JS 引擎
|
||||
|
||||
### 1、渲染引擎（浏览器内核）
|
||||
|
||||
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
|
||||
|
||||
**渲染引擎是浏览器兼容性问题出现的根本原因。**
|
||||
|
||||
渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
|
||||
|
||||
常见浏览器的内核如下：
|
||||
|
||||
|浏览器 | 内核|
|
||||
|:-------------:|:-------------:|
|
||||
| chrome | Blink |
|
||||
| 欧鹏 | Blink |
|
||||
|360安全浏览器| Blink|
|
||||
|360极速浏览器| Blink|
|
||||
|Safari|Webkit|
|
||||
|Firefox 火狐|Gecko|
|
||||
|IE| Trident |
|
||||
|
||||
备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。
|
||||
|
||||
另外，移动端的浏览器内核是什么？大家可以自行查阅资料。
|
||||
|
||||
|
||||
|
||||
### 2、JS 引擎
|
||||
|
||||
也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。
|
||||
|
||||
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。
|
||||
|
||||
浏览器本身并不会执行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 |
|
||||
|
||||
参考链接：
|
||||
|
||||
- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
|
||||
|
||||
## 浏览器工作原理
|
||||
|
||||
|
||||
|
||||
1、User Interface 用户界面，我们所看到的浏览器
|
||||
|
||||
2、Browser engine 浏览器引擎，用来查询和操作渲染引擎
|
||||
|
||||
3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS
|
||||
|
||||
4、Networking 网络，负责发送网络请求
|
||||
|
||||
5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
|
||||
|
||||
6、UI Backend UI后端，用来绘制类似组合框和弹出窗口
|
||||
|
||||
7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage
|
||||
|
||||
参考链接：
|
||||
|
||||
- <https://www.2cto.com/kf/201202/118111.html>
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
console.log('拖拽开始.');
|
||||
}
|
||||
|
||||
// 拖拽离开：鼠标拖拽时离开被拖拽的元素是触发
|
||||
// 拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
|
||||
box.ondragleave = function () {
|
||||
console.log('拖拽离开..');
|
||||
}
|
||||
@ -178,7 +178,7 @@
|
||||
|
||||
//目标元素的拖拽事件
|
||||
|
||||
// 当被拖拽元素进入是触发
|
||||
// 当被拖拽元素进入时触发
|
||||
two.ondragenter = function () {
|
||||
console.log("来了.");
|
||||
}
|
||||
@ -40,77 +40,6 @@ JavaScript是世界上用的最多的**脚本语言**。
|
||||
|
||||
虽然目前WebApp（Web应用）在功能和性能上的体验远不如Native App（原生应用），但是“在原生App中内嵌一部分H5页面”已经是一种趋势。
|
||||
|
||||
## 浏览器的介绍
|
||||
|
||||
浏览器是网页运行的平台，常用的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
|
||||
|
||||
|
||||
|
||||
|
||||
### 浏览器的组成
|
||||
|
||||
浏览器分成两部分：
|
||||
|
||||
- 渲染引擎
|
||||
|
||||
- JS 引擎
|
||||
|
||||
1、**渲染引擎**：（浏览器内核）
|
||||
|
||||
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
|
||||
|
||||
常见浏览器的内核如下：
|
||||
|
||||
|浏览器 | 内核|
|
||||
|:-------------:|:-------------:|
|
||||
|chrome / 欧鹏 |Blink |
|
||||
|Safari|Webkit|
|
||||
|Firefox 火狐|Gecko|
|
||||
|IE|Trident |
|
||||
|
||||
2、**JS 引擎**：
|
||||
|
||||
也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。
|
||||
|
||||
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。
|
||||
|
||||
浏览器本身并不会执行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 |
|
||||
|
||||
参考链接：
|
||||
|
||||
- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
|
||||
|
||||
### 浏览器工作原理
|
||||
|
||||
|
||||
|
||||
1、User Interface 用户界面，我们所看到的浏览器
|
||||
|
||||
2、Browser engine 浏览器引擎，用来查询和操作渲染引擎
|
||||
|
||||
3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS
|
||||
|
||||
4、Networking 网络，负责发送网络请求
|
||||
|
||||
5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
|
||||
|
||||
6、UI Backend UI后端，用来绘制类似组合框和弹出窗口
|
||||
|
||||
7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage
|
||||
|
||||
参考链接：<https://www.2cto.com/kf/201202/118111.html>
|
||||
|
||||
|
||||
## JavaScript介绍
|
||||
|
||||
### JavaScript入门易学性
|
||||
@ -490,7 +419,7 @@ console.log(a);
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
12
README.md
12
README.md
@ -6,11 +6,11 @@
|
||||
前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有：
|
||||
|
||||
|
||||
- 网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。
|
||||
- 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。
|
||||
|
||||
- 帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。
|
||||
- 2、帮助前端同学提供一个精品学习资源和路线，提高学习效率，少走很多弯路。
|
||||
|
||||
- 可以当做前端字典，随时翻阅，查漏补缺。
|
||||
- 3、可以当做前端字典，随时翻阅，查漏补缺。
|
||||
|
||||
|
||||
维护这个项目的初衷，可以看这篇文章：[《裸辞两个月，海投一个月，从Android转战Web前端的求职之路》](https://www.cnblogs.com/qianguyihao/p/8732781.html)
|
||||
@ -19,13 +19,15 @@
|
||||
|
||||
## 项目指引
|
||||
|
||||
如果你发现文中的部分图片加载不出来，不妨[看这里](https://github.com/qianguyihao/Web/issues/20#issue-390074432)。当然，您也可以直接「下载项目到本地」，通过 markdown 软件（比如 [Typora](https://typora.io/)）打开项目文件，以便正常展示图片。
|
||||
由于 GitHub 是国外的网站，访问较慢，如果你发现文中的部分图片加载不出来，不妨[看这里](https://github.com/qianguyihao/Web/issues/20#issue-390074432)。当然，您也可以直接「下载项目到本地」，通过 markdown 软件（比如 [Typora](https://typora.io/)）打开项目文件，在本地查看，以便正常展示图片。
|
||||
|
||||
如果你发现本项目有内容上的错误，欢迎提交 issues 进行指正。
|
||||
|
||||
## 学习交流
|
||||
|
||||
关注微信公众号「**千古壹号**」，学习代码之外的技能。扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外：
|
||||
如果你还想学习**代码之外的技能**，不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user