浏览器的认识

浏览器的发展史

Mosaic，是互联网历史上第一个获普遍使用和能够显示的网页浏览器，于1993年问世。
2015年ES6 (又名ES2015) 发布

浏览器

1.浏览器主要由两部分组成
shell 部分(用户可看到的界面)和内核部分(核心技术)
2.渲染引擎
内核部分的渲染引擎 ==> 定义了 html 和 css 的部分规则语法以及渲染路径等
3.js引擎
用于解析和执行 JavaScript 代码, 也就是专门处理Js脚本的虚拟机
2008年，Google发布了Chrome，采用V8引擎
能把js代码，直接转化成格式为0101的机械码来执行，以速度快而闻名
Firefox，推出 SpiderMonkey引擎(对频繁执行的代码做了路径优化)
4.分为怪异模式和标准模式

如何使用：
标准模式：<！DOCTYPE html>是 html5 的
怪异/混杂模式：试图去兼容之前的语法，去掉<！DOCTYPE html>这一行即可开启（向后兼容）
属性值区分: `document.compatMode` 
(1)CSS1Compat   `标准模式`
(2)BackCompat   `怪异模式`
造成影响：
如获取最外面盒子的宽高(视口的尺寸)
(1)标准模式：document.documentElement.clientWidth / clientHeigh
(2)怪异模式：document.body.clientWidth / clientHeight
(3)统一解决方案--W3C：window.innerWidth / innerHeight  

主流浏览器及内核

目前，世界上主流浏览器及其内核


移动端：移动端浏览器基本以webkit内核为主
iphone/ipad 采用 webkit 内核，android4.4以下版本采用 webkit内核，而4.4以上版本采用 blink内核

浏览器的初步认识

web页面的组成
HTML 搭建页面结构
CSS 编写页面样式
JS 完成人机交互效果，操作DOM和浏览器

开发者工具
打开开发者工具 ctrl + shift + C 或 F12
手机模拟器 Toggle Device Toolbar
Elements ==》 包含当前页面中所有的结构和样式，基于它可以快速查看和调节页面的样式和结构
Console ==》 控制台，来进行项目调试
Network ==》 包含了当前页面所有向服务器发送的HTTP请求信息，用于前后端数据交互的BUG调试及页面的性能优化
Sources ==》 包含了当前项目的源码
Application ==》 本地存储的信息(Cookie / localStorage / sessionStorage…)及所加载的图片等

调试技巧

1. 模拟慢网络
   
2. 用copy全局方法直接复制到剪切板