因为各个浏览器厂商对 JavaScript 规范的实现并不统一，这让开发者在日常开发中经常遇到兼容性的挑战，一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用，这样还需要针对各个浏览器编写不同的代码，才能让代码能够兼容。
后来，一些工具出现了，它们可以让我们编写有最新特性的 JavaScript 代码，然后把代码转换为各个浏览器都支持的版本，这种工具叫作转译器（Transpiler）。Babel 就是其中一个且比较著名，几乎每个前端框架中都使用到了，它可以把包含新特性的代码转换为 ES2015 版本，或者其它指定的版本来实现最大兼容性。
有好多同学问我现在学前端还有没有前途？那么我就借着现在前端的发展趋势，和前端到底是个什么样的一个概念，来给大家分析一下，学前端到底有没有前途。
先定义一下，到底什么是前端。从广义的角度上讲，只要是我们人眼能看得见的、能够进行人机交互的界面，都属于前端的范畴，例如：APP、网站、小程序等等，甚至是智能硬件上面的显示屏（例如电视）。从这个角度上来讲，只要有人机交互的需求，那么前端开发永远都会有用武之地，我想你应该也清楚，人机交互在科技这么发达的现代社会里，不太可能消失，或者短时间里不太可能消失。
在了解这个概念后这些之后，你现在认为学前端到底有没有前途呢？
面对越来越激烈的内卷，程序员需要掌握的技能越来越多，并且对于快速掌握一门编程语言的能力也日趋重要，因为现在的开发基本都是多端、各种语言都会使用，能快速的转换，才能在编程界里立足。
那么，如何才能快速学会一门编程语言？
方法仅限于有其它编程语言基础。
之后就是：持续的学习、实践、深入。（长期）
在使用 CSS 编写页面样式的时候，你是不是写过类似的代码：
li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}
为了给一篇文章中，不同位置的超链接设置不同的颜色，需要在多个选择器中，重复的选择 a 元素，如果是其它名字比较长的元素或者 class，那么写起来会特别麻烦，稍加不注意就会写错。
是不是每次面试没通过都会有这样的感觉？作为一名程序员，每次面试的时候都觉得准备不充分，面试资料多的看不完，实战经验也不够，即使自认为准备的很充分了，最后还是栽了，到底是因为自己菜，还是自己菜，还是自己菜呢？要回答这个问题，我们得先知道面试到底在面什么。
我们好多小伙伴总觉得面试就跟高考一样，有着严格的评分标准和分数线，谁的分高谁就能进去，但事实上，面试是通过交谈来互相了解对方的一种形式，更多的时候是考验的一个人的沟通能力，如果你能让面试官感觉聊的很投机，那么会有相当大的概率通过面试。 对于技术方面，不同的公司有不同的侧重点，大厂看重原理和算法，其它公司看中技术的熟悉程度，也就是项目经验。技术方面的问题是最棘手的，你可能认为面试通过的人，技术一定很牛，这个我以身边进谷歌、Facebook、亚马逊等国外大厂的朋友的经验证明，这是绝对错误的。技术关是最没有技术含量的考验。通常，公司并不知道一个面试者的技术水平，所以才会通过笔试和前几轮的面试进行考察，考察的问题基本都是类似的、可以举一反三的、是能专门进行准备的。简而言之，就是谁下功夫准备面试了，谁通过的概率就大很多，例如一个刷了 leetcode 500 道题 3 遍的，一定比刷了 300 道题 1 遍的通过率高。
在使用 chrome 的 lighthouse 对网站进行测速之后，发现有一条优化提示：推迟屏幕外的图片加载。之前有看到过要实现这样的效果需要使用 lazy loading，图片懒加载，但是需要使用 js 的方式来实现，由于本人十分懒惰，不想用太复杂的代码，于是在网上搜索了一番，发现 <img> 标签原生支持懒加载。
浏览器在加载图片的时候本身是 async 异步的，不会阻塞浏览器的加载进程，但是屏幕外的图片加载仍然会消耗带宽，这样 在带宽有限的情况下，会影响重要组件的加载，例如 CSS、JavaScript 等，进而拖慢页面的加载。
因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 Github 上一番搜寻之后发现还真有办法，有一个开源的 Python 人工智能换脸的库，那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能，外加换脸操作。先看一下效果吧：
在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。
年前我看到合成大西瓜小游戏火了，想到之前从来没有研究过游戏方面的开发，这次就想趁着这个机会看看 JavaScript 游戏开发，从原生角度上如何实现游戏里的物理特性，例如运动、碰撞。虽然之前研究过物理相关的动画库，但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎，实现小球的碰撞效果。
为什么不用现成的游戏库呢？因为我觉得在了解底层的实现原理之后，才能更有效的理解框架上的概念和使用方法，在解决 BUG 的时候能够更有效率，同时对自己的编码技能也是一种提升。在对 JavaScript 物理引擎的研究过程中，发现写代码是次要的，最主要的是理解相关的物理、数学公式和概念，虽然我是理科生，但是数学和物理从来不是我的强项，我不是把知识还给老师了，而是压根就没掌握过 ^o^。过年期间花了有小半个月的时间在学习物理知识，现在仍然对某些概念和推导过程没有太大的自信，不过最后还算是做出了一个简单的、比较满意的结果，见下图。
作为一名对时尚，尤其是衣服也非常感兴趣的前端工程师，我从来没有停止过对既时尚又实用还舒适的衣服的追求。在众人印象里，程序员就是千篇一律的格式衫加双肩包，典型的刻板印象，但其实我们程序员还是非常注重自身形象的。说起双肩包，还不是因为程序员外出经常需要带电脑，还要带钥匙、钱包、数据线、充电宝之类的杂物，总不能用手拿着，身上的口袋也不够。由于双肩包体积过大，在人多的地方会影响正常行走，如果碰上下雨，且双肩包不防水的话，那里边的东西就全遭殃了。