作者：Shadeed译者：前端小智来源：dev有梦想，有干货，微信搜索【伟大的走向世界】追随这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。为了让大家更容易编程，本书选取了一些有用但比较少见的有用技巧。废话不多说，上车吧。1.快速隐藏要隐藏DOM元素，不需要JavaScript。原生HTML属性足以隐藏。效果类似于添加样式display:none;。这个段落在页面上是不可见的，它在HTML中是隐藏的。
但是，这个技巧不适用于伪元素。2.快速定位inset`CSS属性你熟悉吗？它是`top`、`left`、`right`和bottom的缩写版本。类似于margin和padding的简写，我们可以在一行上设置一个元素的所有偏移量。//Beforeediv{position:absolute;顶部：0；左：0；底部：0；right:0;}//Afterdiv{position:absolute;inset:0;}3.前端Chrome浏览器提供了原生的APInavigator.connection.downlink可以访问用户当前网络环境的网络带宽。navigator.connection.downlink;connection.downlink返回的不是用户当前环境显示的网络传输速度，而是当前网络的带宽。官方的说法是：以Mb/s为单位返回有效带宽，并保持该值最接近25kb/s的整数倍。比如我在家里的Chrome浏览器控制台运行navigator.connection.downlink语句，结果返回10，代表下载带宽为10M。具体场景见这篇文章：https://www.zhangxinxu.com/wo...5.禁用下拉刷新CSSoverscroll-behavior属性允许开发者在到达顶部/底部时覆盖浏览器默认的溢出滚动行为内容。这方面的用例包括在移动设备上禁用“拉动刷新”功能，删除过度滚动发光和橡皮筋效果，以及防止页面内容在模态/覆盖体下滚动{overscroll-behavior-y:contain;}这个属性也非常对于在组织模式窗口内滚动很有用-它可以防止主页在到达边界时拦截滚动。具体场景可以参考这篇文章：https://www.zhangxinxu.com/wo...6.禁止插入文本当用户在浏览器用户界面发起“粘贴”操作时，会触发粘贴事件.有时，我想阻止用户将从某处复制的文本粘贴到输入框中。这可以通过监听粘贴事件并调用其方法preventDefault()轻松完成。
~完了，我是小智。写完这篇文章的时候，我生病了，准备去会所散心。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。https://dev.to/ra1nbow1/6-use...交流有梦想，有干货，微信搜索【走向世界的大招】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
