一
、前言 前端开发是近几年非常火热的职业，市场对于前端开发的需求也是越来越大，同时前端开发者们也要不断学习新的知识，保持自己的竞争力，那么今天我们就来聊聊一些前端开发的冷知识，这些冷知识并不是前端的核心知识，但是却能给我们带来更多的思考和启发。 二、CSS基础知识 1. 抖动动画 在CSS中，如果我们使用的是transform属性来改变元素的位置，比如translateX()，而且动画时间又很短，可能会产生抖动现象。这是因为浏览器采用的渲染机制导致的，我们可以通过开启硬件加速来解决这个问题。具体的做法是：给需要添加动画的元素添加下面这段CSS代码： ``` transform: translateZ(0); ``` 2. 文本溢出 当我们需要截取一个段落中太长的文本时，可以使用text-overflow属性，但是该属性只有在我们添加了white-space:nowrap和overflow:hidden时才能够生效，同时还需要设置宽度。完整CSS代码如下： ``` overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:200px; ``` 三、JavaScript基础知识 1. 数组去重 我们知道，在JavaScript中可以使用Set来去重，但是这个方法只适用于数组中的基础类型，如果我们需要去重的是一个对象数组时，我们可以借助JSON.stringify()方法将对象转换成字符串，再进行去重操作，代码如下： ``` const unique = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse); ``` 2. 判断数组是否包含某个元素 通常我们会使用indexOf()方法来判断一个数组中是否包含某个元素，但是如果我们需要使用对应对象的某个属性来进行判断时，可以使用findIndex()和some()方法，这两种方法都能够根据我们传入的条件来进行查找，代码如下： ``` //findIndex() const index = arr.findIndex(item => item.id === 1); //some() const hasItem = arr.some(item => item.id === 1); ``` 四、HTML基础知识 1. 预加载 在HTML中，我们可以使用link标签来进行预加载操作，预加载不会阻止页面的渲染，但是会在页面加载完成后立即下载被指定的资源，代码如下： ``` ``` 2. 响应式图片 在移动设备上，图片的大小通常需要更小一些，这样才能够更快地加载出来。我们可以使用picture和source标签来实现响应式图片，代码如下： ```
