# 认识浏览器
浏览器内核的理解: 主要分成两个部分:渲染引擎(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
# 参考
关注作者公众号
自学路上一起进步!
加入前端自学交流群
扫描二维码回复 加群 学习