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

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

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

  • 前端三个月能入门吗?
  • 前端不就是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
    评论
有两个常用的VSCode浏览器插件是可以帮助你在浏览器中预览和调试代码的。第一个是【传送门】插件,它在快捷菜单中添加了在默认浏览器中查看文件的选项,方便你直接在浏览器中查看文件。第二个是live server插件,它可以在你修改代码之后自动更新浏览器,省去了手动刷新的麻烦。这两个插件可以极大地提升你的开发效率和体验。但是请注意,在学习阶段,尤其是在学习Vue时,不建议安装过多的插件,以免引起冲突。所以建议你根据自己的需要选择安装适合的插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [精选!15 个必备的 VSCode 插件(前端类)](https://blog.csdn.net/u014307349/article/details/75256046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [千锋重庆web前端技术分享之前端VSCode常用插件](https://blog.csdn.net/qf2019/article/details/114626754)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值