22年D2部分干货

缘起

---

小编入行以来，一直兢兢业业，跟随大佬们脚步，学习如何努力成为优秀的开发。机缘巧合，在2017年小编接触到了前端峰会——D2，里面好多大佬聊未来的趋势。记得疫情之前，D2采用的是线下邀请，可惜小编无缘线下（抽奖不中），只能默默线上支持。听人说早期D2不仅有丰富的前端前沿知识，还有甜甜圈等各种美食。多年以后，希望小编还能保持当初对技术的热情，还能一如既往的参加D2。

本届概括

---

小编这里大致说下本届的内容吧，本届感觉是前端卷客户端，印证小编那句玩笑话：走别人的路，让别人无路可走。用比较正式的说法是：前端和客户端融合。在这个大的主题下，还有很多监控，低代码，云原生，音视频等议题。

前端和移动的的融合

---

这个其实是重点内容，大佬们预判了以后的趋势，也就是说，作为一名合格的前端，需要学习点客户端的知识。但是这并不意味着，我们需要学习ios和安卓，我们更多的是需要学习flutter这类可以适配多端的框架，同时学习如何利用端侧的能力，也就是可以落地的壳，给客户更好的体验。
这里有两个问题：

• 公司需不需要自研一些底层的引擎？
  小编的答案：很多厂为了app的性能，会自研一点内容，或者修改源码。如果没有自研条件，说明公司还没达到那个规模，那么使用已有的方案可以解决大部分问题。
• 如何开始做混合开发？
  小编的答案：不是所有公司都有这类项目，不是所有人都有机缘接触混合开发的，如果大家公司暂时没这机缘，那么大家可以尝试着自己做一点自己项目，比如仿照某个购物网站，画画页面，再mock下数据，也能入门。

音视频相关

---

因为音视频这项技术小编感觉会有空缺，所以大致讲下。
从最早的Flash，到h5的Video标签，再到MSE，到WASM，到WebCodecs，你会发现技术在不断进步，大家可能都没听说过MSE和之后的技术，大家使用最多的可能还是Video，所以如果你想学习和使用后面的技术，请自行查阅。

H5页面指纹监控

---

为啥最后一个科普小编会选择这个呢，而不是低代码，3D，因为低代码这种小编玩了4-5年了，感觉没多大难度，3D呢刷文档就好了，还需要数学能力。而H5页面指纹监控这个，小编感觉大家都用的到，毕竟技术是为了更好的服务大众，而不是仅仅是理论。
先抛出个问题，大家如何判断h5一个页面Ui是否变化，比如页面少了一个模块，大家的回答是肉眼对吗。其实不然，这里分享下大佬的色差指纹监控法，还可以在大佬的基础上扩展。
这里先来两个Api，Document.elementFormPoint(兼容性好)和Document.elementsFormPoint(更好用)。
下面是方案：
1.首先把页面按照宽度分成多等分，比如按照2vw，同时高2vh，一屏幕分成5050的小块
2.我们用上面的两个Api获取元素的最高高度，同时我们按照上下左右4个一组，把4个小块变成一个大块，值就取4个小块的平均值，这时就是2525的屏幕了
3.我们把不同的值通过方法转化为对应的颜色，然后上传，人眼对色差的敏感度肯定是高于数字的
4.正常页面可以得到一个25*25的色块图作为标准，对比客户上报的页面，问题一目了然。

尾声

---

技术无止境，看了上文，大家是不是也感受到了，就算是大家熟悉的技术，在大佬那里也可以出现不一样的成就。