前端为什么这么麻烦之浏览器

本文章适合如下人员：
.前端吐槽人员
.对前端好奇的人员
.对前端不感冒，但是工作需要和前端组队的人员

在我的前端职业生涯中，无数次听到非前端从业人员这样问：

• 前端三个月能入门吗？

• 前端不就是html+css+js，有什么难度？

  以及刚踏入前端领域的小朋友们这样问：

• 前端要学的东西为什么这么杂，却没有一本教程叫做《前端》？

• 框架好学吗？

  为了回答以上问题并且解(tu)释(cao)清楚前端为什么这么麻烦,首先我要介绍一座前端路上绕不过的大山——浏览器！放心，以下将要讲到的内容所涉及的专业术语普及程度非常高，即使非专业人士，科普之后也能看懂。
  众所周知，前端所写的代码绝大部分运行在浏览器这个宿主环境中。浏览器暴露给javascript引擎一个著名的全局对象——window对象。window对象中一个最重要的属性叫document，是的，就是那个前端一天至少用30次的window.document。它有什么作用呢，官方解释大致是这样的：document代表了当前页面的DOM，通过使用这个对象，JavaScript代码就能在任何程度上改变DOM，包括修改或移除现存的节点，以及创建和插入新的节点。` 翻译成人话就是：如果你要改变页面，比如往页面加点内容，去掉一行等等，都要通过document这个对象，而此时JavaScript只是个给document打电话的小弟，如果document不支持，那么JavaScript叫破喉咙也改变不了页面。
  那么window对象包含多少内容呢，Mozilla为DOM提供了一份报告，可以通过https://developer.mozilla.org/en-US/docs/Web/API进行查看。
  

  其中带图标的那些有实验阶段的，有废弃的，有删除的，都可以忽略。去掉这些之后，还剩下大概……300+。我们最常用的document就在其中，那么document又包含多少内容呢,页面大小：66.37 KB (67,963 字节)，感兴趣的小伙伴可以打开看一下，鼠标大概翻个20几频内容就没了。
  除了document，还有如下非常眼熟的：

• Console系列 前端调试必备，一天用到的次数也许不必document少

• navigator系统 判断设备，浏览器版本眼熟吗？
• Canvas系列 画图，刮刮乐效果就是全靠它
• Geolocation系列 地理定位
• deviceOrientation系列 螺旋仪，什么摇一摇晃一晃效果都是它

（CSS系列我们不说，因为下一章有一整章去解释它）
如果你要用到Canvas，也许你需要复习一下数学公式，如果你要用到Geolocation和deviceOrientation，那么你可能还需要一本几何。不要忘了智能手机中的浏览器还支持视频，音频，录音，VR，人脸识别，设备震动，光源，手势等等。虽然一些支持程度不高，但是设备是会升级的啊！

---

看到这里也许有人要说了，也就是API多了点，给点时间总能学会吧。好的，我们继续往下看，并且先来一轮自问自答：
1. 浏览器有几大主流厂商？ 目前是5大主流厂商
2. 每家厂商对这些api的支持程度一致吗？甚至提供的方法名、属性名一致吗？ 不完全一致，不完全一致，不完全一致。
3. 浏览器更新的频率有多高？ 看心情：有几年一更的，一年一更的，一年几更的。
4. 浏览器的版本有多少？ 恩，著名的IE家族中目前还活着的有IE7,8,9,10,11,Edge；Chrome的版本号已经68开头了；Firefox也不慢；而国产著名浏览器360还分为急速模式和兼容模式，每种模式下再开一个内核版本。而如果你的用户恰好喜欢用小众浏览器，你将幸运的见到以下但不仅限于以下的浏览器：搜狗浏览器，猎豹浏览器，世界之窗浏览器，2345浏览器……

以上这些意味着什么呢，意味着每一款浏览器的每一个版本，对window对象支持的程度都有所不同！看到这你是不是能稍微理解为什么会产生浏览器兼容性问题了？

而更厉害的是版本更新。版本更新意味着什么呢，意味着在也许上面提供的报告中会增加几个内容，意味之前某期你还在用的属性或方法，也许不支持使用了，也许删除了……而重量级大佬Chrome升级出v8引擎之后，直接导致了node.js横空出世，并随后应用于MongoDB、CouchDB等，点亮了至少一条技能树，就问怕不怕？

---

你以为这就完了？

不，更可怕的是，一个前端在开发过程中可能无数次听到这句话：XX浏览器为什么不支持XXX,XXX,XXX功能？你能解决一下吗？问你呢，浏览器。