# 认识浏览器


浏览器内核的理解: 主要分成两个部分:渲染引擎(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

# 参考

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

关注作者公众号

自学路上一起进步!

加入前端自学交流群

扫描二维码回复 加群 学习