web前端面试题附答案042 - 来自字节的拷问，strike()方法有什么缺点吗？

好消息，后续陆续退推出大学生解惑系列文章，帮助更多的大学生们，少受培训机构的苦

面试中有连环炮式拷问，有套娃式拷问，基本都是层层深入的。还有一种拷问，就是你招不招，你招不招，但是他好像忘记了问，让我招什么。面试的最高奥义就是先问常规问题，当你觉得自我满足的时候，套娃被取掉了外层的壳，紧接着出现了更精致的小套娃，那就是问你XXX的缺点是什么，那么你觉得如何解决XXX问题呢

        关于strike()方法， 我想说的是，别说缺点了，我连基本用法都不知道是个啥。面试官肯定想，连这都不知道，下一个；去面试的肯定想，你们这也太坑了，这是啥呀，能不能愉快的玩耍一下下。好吧，进入正题。

 1、字符串的strike()方法

        这个内置方法自身是这样解释的：

        strike() 方法用于显示加删除线的字符串

        用法：'string'.strike()

        因为这本身是string的内置方法，所以肯定涉及到script的书写，就想这样：

<style>
   #demo {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      line-height: 100px;
      text-align: center;
      color: grey;
   }
</style>

<div id="demo"></div>
<script>
   let name = '我爱打篮球';
   let demoElement = document.querySelector('#demo');
   demoElement.innerHTML = name.strike();
</script>

 

         通过以上代码可知，strike()方法，将字符串添加了删除线。但这种方法最终返回的还是字符串，并不能直接和dom产生联系，所以还需要再想办法添加到DOM中去。如果是vue react这类框架内呢，会省事很多，直接在模板中就可以赋值了

2、你是否知道还有个strike的标签

        效果和上面的实现是一样的，其实下面这段代码呢，就是对于上面strike方法的一个解释，通过strike方法，就相当于在元素内添加了一个<strike>的标签。注意这里的文字是“我爱踢足球”，返回到刚刚的代码“我爱打篮球”，可以通过审查元素看一下HTML结构。可知，这两种思路造成的结果是一样的。

<div id="demo">
  <strike>我爱踢足球</strike>
</div>

        既然造成的结果一样，那么既然写法不同，肯定就会产生所谓的区分，优缺点，不同点。我们看刚刚的strike方法，首先需要对字符串进行操作，然后再和DOM元素产生桥接，再操作DOM元素进行赋值，这么一系列的操作其实是一件高成本的事情，只不过浏览器很强大，做了很多事情。计算机每秒几十亿次的计算，我们感受不到而已。所以这里，strike标签明显是刚才第一步的结合体，而且省却了很多步骤。

        再换言之，可能刚才那一系列的方法转换，dom操作，最终也只是想达到<strike>标签的效果。

3、css实现方案

        相对于strike让人一脸懵，可能大家更熟悉的是css的 text-decoration: line-through，这直接就可以控制给某个元素内的内容添加删除线。大家都比较熟悉这个属性，就不贴代码了，虽然实现效果一样，但从很多角度来讲，用css来实现都应该是最优秀的方案。

4、总结与思考

        我们总是无时无刻不在思考怎么降低工作量，怎么可以提升渲染速度。而这道题正中下怀，如果采用第一种方式，使用strike的js方法，那么一个项目中将会有很多的地方使用这个方法，虽然只是动动手的一个消防法，但久而久之，必定降低工作效率；

        而第二种方法，虽然方便的多，但涉及到浏览器缓存，几乎很少希望把HTML落地页进行缓存的，大部分时候缓存的是类似图片  css js这种静态资源

        为什么对于文字添加删除线，第三种css方法更加广为人知呢，因为他一旦在项目中定义好，凡是用到的地方，添加其设定的class类就可以了，而且css文件会被浏览器缓存，这样更加有助于页面的快速渲染，而且相对于第一种方法，也更加节省工作效率。

5、举一反三

        相似的问题还有：在html标签写style行内样式有什么缺点吗？

                                      怎样做一个2行5列的布局更合适？

                                      怎样用css做一个xxx

        为什么很多时候讲究能用css，就尽量别添加更多的js，一来是浏览器缓存，二来某些时候还能利用GPU加速等等吧。

        

5、感伤

        又有身边好多小伙伴即将毕业，兄弟相继凋零，好似风中落叶啊，哎