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

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

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

  • 前端三个月能入门吗?
  • 前端不就是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功能?你能解决一下吗?问你呢,浏览器。

  • 13
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值