前端高频面试题

前言 

很多小伙伴为了面试会去看一些大厂的经典面试题，这里的 “看” 只是说加深一下以往的印象，也就是说你之前是用到过或者是学过，只是长时间用不到有点淡忘了。千万不要为了面试而死记硬背，这是程序员最大的悲哀，请记住一句话：“未经你思考的知识是不属于你的”

楼主2018年毕业，三年前端开发经验。前段时间花了半个月时间面试，收到七八个中大厂offer。以下是我对前端开发一些碎片化知识的总结，所谓碎片化，其实都是积木化，每一块积木都可以单独学习，自主拼接，进而组合成自己想要的形状，充分运用。

文章太长，可以查看左侧边栏底部的目录进行快速定位，若文章中有错误，也麻烦各位大佬能够在评论区指出，非常感谢！

---

HTML

1、什么是HTML语义化？

在编程中，语义指的是一段代码的含义，这个HTML元素有什么作用，扮演了什么样的角色。简单的概括为：在适当的位置使用适当的标签,用正确的标签做正确的事情

2、HTML5新增语义元素？

Header nav article section aside footer main stong em small

3、为什么要语义化？

清晰的代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构

有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息

提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。

便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。

方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

4、b和strong的区别？

两者虽然在网页中显示效果一样,但实际目的不同。

这个标签对应bold ,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求

这个标签意思是加强,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;

为了加粗而加粗， 为了标明重点而加粗。

最重要的区别的就是样式标签与语义化标签的区别。最容易理解的场景就是盲人朋友使用阅读设备阅读网页时: 会重读， 不会

5、Iframe有哪些缺点？

iframe会阻塞主页面的Onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO；iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

6、说说减少DOM数量的方法？

可以使用伪元素,阴影实现的内容尽不使用DOM实现,如清除浮动、样式实现等;

按需加载,减少不必要的渲染;

结构合理,语义化标签，减少代码;

7、一次性给你大量DOM元素怎么优化？

1.缓存dom对象： 首先不管在什么场景下。操作Dom一般首先会去访问Dom ,尤其是像循环遍历这种时间复杂度可能会比较高的操作。那么可以在循环之前就将主节点,不必循环的Dom节点先获取到,那么在循环里就可以直接引用,而不必去重新查询。

    // 不好的做法
    for (let i = 0; i < 10; i++) {
      document.getElementById("temp").innerHTML = ""
      document.getElementById("temp").innerHTML += "
temp
";
    }

    // 改进的做法
    let temp = document.getElementById(temp);
    for (let i = 0; i < 10; i++) {
      temp.innerHTML = "";
      temp.innerHTML += "
temp
";
    }

    //再改进
    let temp = document.getElementById("temp");
    let fragments = ""
    for (let i = 0; i < 10; i++) {
      fragments += "
temp
";
    }
    temp.innerHTML = "";
    temp.innerHTML = fragments;

2.文档片段: 利用document.createDocumentFragment()方法创建文档碎片节点,创建的是一个虚拟的节点对象。向这个节点添加dom节点,修改dom节点并不会影响到真实的dom结构。我们可以利用这一点先将我们需要修改的dom一并修改完，保存至文档碎片中,然后用文档碎片一次性的替换真实的dom节点。与虚拟dom类似,同样达到了不频繁修改dom而导致的重排跟重绘的过程。

    //创建10个段落，常规的方式
    for (let i = 0; i < 10; i++) {
      let p = document.createElement("p");
      let oTxt = document.createTextNode("段落" + i);
      p.appendChild(oTxt);
      document.body.appendChild(p);
    }

    //使用了createDocumentFragment()的程序
    let pFragment = document.createDocumentFragment();
    for (let i = 0; i < 10; i++) {
      let p = document.createElement("p");
      let oTxt = document.createTextNode("段落" + i);
      p.appendChild(oTxt);
      pFragment.appendChild(p);
    }
    document.body.appendChild(pFragment);

3.用innerhtml代替高频的appendChild

4.虚拟dom

8、Html5有哪些新特性？

1.拖拽释放(Drag and drop) API

2.语义化更好的内容标签( header,nav,footer,aside,article,section，main )

3.音频、视频API(audio,video)

4.画布(Canvas) API

5.地理(Gealocation) API

6.本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;

7. sessionStorage的数据在浏览器关闭后自动删除

8.表单控件, calendar、date、 time、 email、url、search

9.新的技术webworker, websocket, Geolocation

9、如何区分html和html5?

1.文档类型声明

2.结构语义

Html:没有体现结构语义化的标签,通常都是这样来命名的

, 这样表示网站的头部

Html5:在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、 footer、header、nav、 section , 这些通俗易懂

10、前端如何处理网站seo？

1.突出重要内容

合理的设计title 、description 和keywords