从头开始学前端（1）

首先，刚开始哪里都会问的一句话：什么是前端？前端能干什么？

顾名思义：前端，就是干互联网前面的活的，那互联网前面的活是啥？那肯定就是用户看得到的活，用户能够直接操作、控制的活。前端就是要让用户看着舒服、干着舒服，而且尽量避免干着出错（减少bug）。其实前端还要帮忙让服务器端减压，还要学着写服务端（Nodejs），那就是后话了，先就这么理解了，当学习到的前端技术越来越多，会有更清楚的认识哦。

HTML、CSS、Javascript 三个基本技能是前端必备（也就是网页的基本组成），其它的可以说都是这三者的扩展，都是为了这三者能够更好的存在。而这三者跟浏览器是密不可分的，所以浏览器的工作原理也是基础，先不管啥与后端数据交互、手机移动端H5 APP、Hybrid APP（混编APP）或者微信小程序啊什么的，那个是后面需要扩展学习的，需要结合其它的知识，而对于B/S结构（browser/server；浏览器/服务器）的程序来说：咱先只考虑浏览器啊，这里也包括手机浏览器或者其它内置浏览器。

简单瞅一眼百度搜索首页，页面看着很简单，它背后的代码可是很多很多的：

先根据这个网页说说HTML+CSS+Javascript在网页中的作用：HTML（超文本标记语言Hyper Text Markup Language）就是页面的基本骨架（比如整个的页面结构，放图片啊，输入框啊），CSS（层叠样式表Cascading Style Sheets）是页面的骨架调整装饰器（比如调整图片的位置、大小等，按钮的大小，颜色等，文字的颜色大小等），JavaScript是页面的控制器，能够让页面拥有各种各样的功能，并且有与用户交互的能力（比如你输入文字后，可以进行搜索数据啊；点击登录会有弹框出现；各种设置啊，等等）。

再来说说浏览器：如今大家电脑系统装完后都会有一个默认的浏览器，Windows系统下是IE/Edge浏览器（之前老版本被无数前端开发人员所嫌弃），OS系统下是Safari浏览器；所以这两个肯定是属于主流浏览器的。那么还有哪些其它的主流浏览器呢？如谷歌浏览器（Chrome）、火狐浏览器（Firefox）、欧朋浏览器（Opera，我也就用过一次）。加起来就是平常所说的五大浏览器，每个浏览器都有一个渲染引擎（Rendering Engine）和一个JS引擎，而在早期渲染引擎是包含JS引擎的，现在由于JS功能越来越强大，越来越重要，JS引擎也就越来独立了，继而就被单独拎了出来，现在常说的内核倾向于只指渲染引擎，要知道引擎本身也是程序，也是由代码编写而成的。

那有的人说了不是还有神马QQ浏览器、360浏览器、UC浏览器等等吗？其实它们都是基于五大浏览器的引擎开发的，本质上并没有什么太大的区别，有的还是双内核的，像360的普通模式与极速模式。

点击可查看市场份额：浏览器市场份额

1、这些个引擎的名字

浏览器	渲染引擎	JS引擎
IE / Edge	Trident / EdgeHTML	JScript（IE3-IE8） / Chakra（IE9+之后）
Safari	Webkit	Nitro
Chrome	Webkit(后来改为Blink)	V8
Firefox	Gecko	Monkey系列
Opera	Presto(后来改为Webkit,之后又改为Blink)	Carakan（10.5之后）

2、渲染引擎的作用

有时候也被称为排版引擎，页面本身是一大堆代码对吧，渲染引擎就是为了将这一堆结构代码解析成页面而存在的。它决定了浏览器应该怎样显示网页的内容以及页面的格式。当然了，不同的渲染引擎对这些代码的解释也不同，所以就存在兼容性问题咯，兼容性问题就是你要保证你写的网页代码在不同的浏览器中有着差不多甚至一样的渲染效果。

3、JS引擎的作用

JS引擎就是执行解释JavaScript的解释器，也就是它能“读懂”JS代码。拿很出名的V8引擎来说：它是将JavaScript代码先解析成机器码，再进行编译，所以速度快。JS引擎能按ECMAScript（JavaScript的核心）的标准来解析、实现代码，也有不按标准来实现的引擎，例如早期的IE的JS引擎，所以JavaScript也会有兼容性问题，浏览器中对于ECMAScript标准实现的比较好的有Chrome和Firefox，所以会有越来越多的人支持它们，现如今IE也在不断向标准靠拢。

从你输入一个网址到页面出来，要经过下面五个步骤：

①DNS(域名解析服务器) 查询:
百度一下：人们习惯记忆域名（如www.baidu.com），但机器间互相只认IP地址，域名与IP地址之间是多对一的关系，一个ip地址不一定只对应一个域名，且一个域名只可以对应一个ip地址，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器(DNS)来完成，整个过程是自动进行的。
当你的网站制作完成后上传到你的虚拟主机时，你可以直接在浏览器中输入IP地址浏览你的网站，也可以输入域名查询你的网站，虽然得出的内容是一样的但是调用的过程不一样，输入IP地址是直接从主机上调用内容，输入域名是通过域名解析服务器指向对应的主机的IP地址，再从主机调用网站的内容。

②TCP 连接（网络之间的一种通信协议，可以当做它们之间特有的语言，它们通过这个连接来“交流沟通”）

③HTTP 请求（就是客户端 / 浏览器说：我要什么）

④服务器响应（服务器回复：来，我给你这个）

⑤浏览器 / 客户端渲染
浏览器或者客户端拿到服务器给的页面代码之后，通过渲染引擎，JS引擎将它渲染出来，呈现在用户面前。
具体渲染过程可以看这里：https://segmentfault.com/a/1190000004292479 写得很详细！
这些个步骤可以回过头来再看；

这之后我们开始了解“三剑客”之一：HTML

若经验不足、错误之处敬请谅解并指正，出现错误或者不准确的地方鄙人会逐渐修改完善！