前端开发面试题 or 笔试题汇总

发表于 | 阅读次数
undefined

今天是刷题天。一是为了准备笔试，二是为了复习遗忘的知识。当然啦，其实是长篇大作，持续收录。

1.前面的一点废话

现在回想一下以前（也就是前几次的笔试面试），都觉得自己思想好幼稚。总是觉得如果有时间去准备笔试面试，还不如多看两眼书多学点知识？？？其实，态度也很重要吧。你去面试一家公司，刷一下笔试题，准备一下知识内容，是对别人的尊重。不必要说自命清高，老子就是会，去到临场发挥一下一些细致问题就不要和我扣细节。态度很重要。

好了，废话完了。知识觉得以前自己真的听白痴就骂一下自己好了。这里会持续收录各种前端面试题，一方面是总结给自己看（面试前用来刷一刷）；另一方面也是扩展一下自己的知识面，查漏补缺。

  • 尽可能细致地分类好，以及留一个更新列表吧~~

更新列表

  • 2017.10.11 第一次更新

2. 面试题大全

1. HTML相关问题

1.XHTML 和 HTML 的区别

html是一种基本的web网页设计语言，而xhtml是基于xml的置标语言。
最主要的区别是：

  • xhtml元素必须被正确嵌套
  • xhtml元素必须被关闭
  • 标签名必须小写
  • xhtml文档必须有根元素

    2. 什么是语义化的HTML?

    • 直观地认识标签，对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
    • html语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析；
    • 在没有样式css情况下以一种文档格式显示，并且是易于阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO
    • 使阅读源代码的人对于网站更容易将网站分块，便于阅读维护理解。

3.常见的浏览器内核有哪些？

  • Chrome和safari用的是webkit引擎，前缀：-webkit
  • firefox使用的Mozilla引擎，前缀:-moz-
  • IE浏览器内核是trident引擎，前缀：-ms-
  • Opera浏览器以前是presto引擎，后面改为webkit引擎，前缀：-o-

4.HTML5有哪些新特性、移除了哪些元素.

  • 绘图canvas
  • 媒介回放：视频和音频的支持
  • Web存储API：本地离线缓存、localStorage存储(长期存在)以及sessionStorage存储（浏览器关闭则删除）；
  • IndexedDB API 数据库
  • 地理位置API
  • 拖放API
  • 历史API
  • 通信API: Ajax level2、postMessage、WebSocket、Web Worker
  • 表单API
  • 语义化的标签

移除了一些纯表现(big/center/font)、对可用性产生负面影响的元素（frame/frameset/noframes）

5.请描述一下cookies/sessionStorage/localStorage的区别

  • cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
  • sessionStorage和localStorage的存储空间更大；
  • sessionStorage和localStorage有更多丰富易用的接口；
  • sessionStorage和localStorage各自独立的存储空间；
  • sessionStorage只存在于单个选项卡或窗口中，当窗口被关闭即消失；而localStorage会一直存在
  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
  • cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
    存储大小：
  • cookie数据大小不能超过4k。
  • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
    有期时间：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

6.如何实现浏览器多个标签页之间的通讯

跳转到跨浏览器tab页的通信解决方案

7.如何在低浏览器支持HTML5新标签

IE6/IE7/IE8通过document.createElement()方法产生标签，可以利用这一特性让这些浏览器支持。当然还需要添加一些默认的样式。成熟的框架有html5shim

8.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

9. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

10.iframe有哪些缺点？

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

10. Doctype作用？标准模式与兼容模式各有什么区别?

  1. <!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  2. 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.CSS相关问题

1.CSS实现垂直水平居中

这个在CSS布局技巧之垂直水平居中已经说过了，不再说。

2.display有哪些值？说明他们的作用。

  • none. 隐藏元素。
  • block. 将元素转成块状元素，独占一行.默认宽度为父元素宽度，可设置宽高，换行显示。
  • inline. 将元素转成行内元素.默认宽度为内容宽度，不可设置宽高，同行显示。
  • inline-block. 将元素转为行内块状元素，默认宽度为内容宽度，可以设置宽高，同行显示。
  • table. 此元素会作为块级表格来显示.
  • table-cell. 表格格子，需要父元素display:table用于借用table特性实现居中等
  • inherit 继承父元素的display
  • list-item 象块类型元素一样显示，并添加样式列表标记。

3.行内元素有哪些?块级元素有哪些?CSS的盒模型?空(void)元素有那些？

  • 块级元素：div,p,h1,form,ul,li,section;
  • 行内元素 : span,a,label,input,img,strong,em;
  • 常见的空元素：<br><hr> <img> <input> <link><meta>
  • CSS盒模型:内容，border ,margin，padding;注意区分出IE的怪异盒模型；

    ie盒模型就是自带box-sizing: border-box;

4.CSS引入的方式有哪些? link和@import的区别是?

内联、内嵌、link引入、@import
区别：

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • link支持使用Javascript控制DOM去改变样式；而@import不支持。

这里@import是公认不好的一种引入方式最好不使用。但是sass/less等预编译器中有这个字段，值得注意的是

预编译器也有一个@import规则，但不同的是，预编译器的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。

5.两栏布局以及圣杯布局、双飞翼布局的实现

HTML经典布局

6.CSS隐藏元素的几种方法：

  1. Opacity: 元素本身依然占据它自己的位置并对网页的布局起作用
  2. Visibility: 与opacity不同的是不会影响任何用户交互。此外，在读屏软件也会被隐藏
  3. display:none。元素就像完全不存在一样
  4. position: 不会影响布局，元素依旧可以操作。

7.CSS清除浮动的几种方法（至少两种）

  1. 使用带clear属性的空元素
  2. 使用CSS的overflow属性；(触发BFC)
  3. 使用CSS的:after伪元素；
  4. 使用邻接元素处理；

3.Javascript相关问题

1. 谈一谈JavaScript作用域链

在细数js之闭包里面有详细阐述过。具体概念有全局作用域、执行上下文。

2.谈一谈JavaScript原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined

3.ajax请求的时候get和post方式的区别

这个文章有人提出反对99%的人都理解错了HTTP中GET与POST的区别。hmm，因为有疑点所在。所以不在这里总结。

  • GET在浏览器回退时是无害的，而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark，而POST不可以。
  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的，而POST么有。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  • GET参数通过URL传递，POST放在Request body中。

4.js的同源策略

前端常见跨域解决方案

5.javascript的typeof返回哪些数据类型

object/number/function/boolean/undefined/symbol

6.HTTP的短轮询长轮询、短链接、长链接

谈谈HTTP协议中的短轮询、长轮询、长链接和短链接

7.字符串反转

最简单简洁的方式：

1
2
var str = 'abcdefg';
str.split("").reverse().join("")

ES6的实现方式

1
[...str].reverse().join('');

8.数组扁平化

1
2
3
4
5
6
7
8
9
10
11
12
13
function init(value : any) {
  var arr : Array<any> = [];
  if (Array.isArray(value)) {
    value.forEach((val) => {
      arr = arr.concat(init(val));
    })
  } else {
    arr.push(value);
  }
  return arr;
}
var arr = [1,[1,2,3],[9]];
console.log(init(arr));

9.实现word效果字符串的查找、替换、删除

1
2
txt.split([查找的字符串]).join([替换的字符串]);
txt.split([查找的字符串]).join(`<span style="background:red">${查找的字符串}<span>`);

3.综合性

1.请写出前端性能能优化的方式，越多越好

  1. 减少http请求（图片压缩合并）
  2. 减少操作dom
  3. 优化js结构，减少冗余代码
  4. 代码压缩
  5. 缓存设置
  6. 图片延迟加载
  7. 静态资源缓存

2.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

  1. 输入地址
  2. 浏览器查找域名ip地址（浏览器缓存 -> 系统缓存 -> 路由器缓存
  3. 向HTTP服务器发送请求
  4. 服务器的永久重定向响应
  5. 浏览器跟踪重定向地址
  6. 服务器返回处理请求
  7. 服务器返回HTTP响应
  8. 浏览器显示HTML
  9. 开始解析页面，发送请求
  10. 构建DOM树 CSSDOM树、渲染树，绘制页面

3.web缓存

谈一谈Web缓存

浏览器的重绘以及回流

参考文章：
前端面试必知的50道题目汇总
如何面试前端工程师
Front End Developer Questions
史上最全前端面试题(含答案)
整理总结的一些前端面试题