前端面试题汇总

HTML

1、什么是HTML语义化？

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

2、HTML5新增语义元素？

Header nav article section aside footer main stong em small

3、为什么要语义化？

1. 清晰的代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
2. 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
3. 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
4. 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
5. 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

4、b和strong的区别？

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

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

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

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

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

5、Iframe有哪些缺点？

iframe会阻塞主页面的Onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO；

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

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

1. 可以使用伪元素,阴影实现的内容尽不使用DOM实现,如清除浮动、样式实现等;
2. 按需加载,减少不必要的渲染;
3. 结构合理,语义化标签，减少代码;

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.文档类型声明

DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN" "http://mw.w3.org/TR/xhtn11/DTD/xhtml transitional.dtd"> 



DOCTYPE html>

2.结构语义

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

, 这样表示网站的头部

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

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

1.突出重要内容

合理的设计title 、description 和keywords