认识浏览器

---

浏览器内核的理解: 主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

• 渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

• JS引擎：解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎

内核分类

• Webkit

  • 谷歌浏览器 Chrome
  • 苹果浏览器 Safari
  • 国产浏览器
    • 360浏览器
    • QQ浏览器
    • ....

• Gecko

  • 火狐浏览器 Firefox

• Presto

  • 欧朋浏览器Opera(现在也是用的webkit内核)

• Trident

  • IE6～8

  • IE9~IE11

  • IEEdge

开发者工具

• 调出开发者工具：F12/FN+F12（再或者浏览器页面->右键->检查）

  • Elements：包含当前页面中所有的结构和样式，基于它可以快速查看和调整页面的样式和结构等
  • Console：控制台，在JS中，我们可以向控制台输出一些内容，来进行项目的调试；如果项目程序出现问题，也可以在控制台查看报错信息；也可以在控制台编写代码，做一些测试...
  • Network：包含了当前页面所有向服务器发送的HTTP请求信息，一般用于前后端数据交互中的BUG调试以及页面中的性能优化
  • Application：看到本地存储的信息（Cookie/Localstorage/SessionStorage.）以及当前网站中所有加载的图片等信息（抓取一些图片下来）
  • Sources：包含了当前项目的源代码
  • 可以开启手机模拟器 Toggle Device Toolbar

web页面的组成

• HTML 搭建页面结构

• CSS编写页面样式

• JS 完成人机交互效果

  • 基本的人机交互效果

  • 页面中具体效果的实现

  • 页面中动态数据的获取和绑定

  • 可能会操作浏览器的一些功能

  • JS主要是用来操作浏览器提供的API，列如：BOM、DOM

参考

介绍一下对浏览器内核的理解