前端面试题收集整理

发表于 | 分类于

HTML

对web标准以及w3c的理解和认识。

标签闭合，不乱嵌套，标签小写。结构与表现分离，更少的代码和组件，容易维护。使用外联css和js脚本

对html和xhtml差别的理解。

  1. html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
  2. xhtml元素必须正确地被嵌套，元素必须关闭，标签必须小写。

前端界面由三部分组成，分别是什么？作用是什么？

结构层html，表现层css，行为层js

img标签上的alt和title属性分别是什么作用？

alt：当图片不能正常显示时用于替代的文字信息。
title：提供图片的相关信息。

什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

简述一下href和src的区别。

href：指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src：指向外部资源的位置，指向的内容会被嵌入到文档中当前标签的位置。

什么是优雅降级和渐进增强

优雅降级：一开始就构建完整的功能，然后再根据低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

请说出三种减少页面加载时间的方法。

  1. 优化时间
  2. 图像格式的选择
  3. 优化css
  4. 网址后加斜杠
  5. 表明高度和宽度
  6. 减少http请求（合并文件，合并图片）

CSS

display: none和visibility: hidden的区别？

前者隐藏对应的元素，在文档中不会占据空间，就当它从来不存在。
后者隐藏对应的元素，但是在文档中任然保留原来的空间。

CSS中link和@import的区别？

  1. link属于XHTML标签，而@import是css提供的
  2. 页面加载时，link会同时被加载；而@import引用的CSS在页面加载完后再进行加载
  3. link是XHTML标签，没有兼容问题，而@import是在CSS2.1提出的，低版本的浏览器（IE5以下）不支持
  4. link支持使用JavaScript去控制DOM改变样式，而@import不支持。

CSS中内联元素和块级元素分别有哪些？

内联元素：br span input a;
块级元素：p div h* form ul;

CSS选择器？优先级如何算？和important哪个优先级高？

CSS选择器包括类选择器，属性选择器，ID选择器，标签选择器等等。
优先级算法是基于特殊性值进行计算的。分别如下：ID属性 0.1.0.0，类属性选择器，属性选择器，伪类 0.0.1.0 元素选择符，伪元素选择符 0.0.0.1
important优先级最高

px和em的区别。

px和em都是长度单位，px是固定长度的像素值，而em则是继承父级元素的字体大小并诚意相对应的倍数。
还有rem，基于文章根元素的字体大小乘以相对应的倍数。

解释下浮动和它的工作原理，清除浮动的方式。

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

  1. 使用空标签清除浮动
    这种方法是在所有浮动标签后面添加一个空标签，定义css clear both，弊端就是增加了无意义标签。
  2. 使用overflow
    给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
  3. 使用after伪对象清除浮动
    该方法只适用于非IE浏览器。

使用CSS实现垂直水平居中。

html代码：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    </html>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
	.div1 {
		position: absolute;
		width: 200px;
		height: 200px;
		border: 1px solid red;
		top: 50%;
		left: 50%;
		margin-top: -100px;
		margin-left: -100px;
	}
</style>

JavaScript

闭包

  1. 闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
  2. 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
  3. 闭包的三个特性：
    1. 函数嵌套函数
    2. 函数内部可以引用外部的参数和变量
    3. 参数和变量不会被垃圾回收机制回收

怎么增加、移除、移动、复制和查找节点？

  1. 创建新节点
    1. createDocumentFragment() //创建一个DOM片段
    2. createElement() //创建一个具体的元素
    3. createTextNode() //创建一个文本节点
  2. 添加、移除、替换、插入。
    1. appendChild() //添加
    2. removeChild() //移除
    3. replaceChild() //替换
    4. insetBefore() //插入
  3. 查找
    1. getElementByTarName() //通过标签名称
    2. getElementById() //通过ID
    3. getElementByName() //通过标签名称

null和undefined的区别？

null是一个表示“无”的对象，转为数值时为0；
而undefined是一个表示“无”的原始值，转为数值时为NaN。
变量声明而为初始化时，变量的默认值为undefined。
变量未声明直接返回，则返回null。

new操作符具体干了什么

  1. 创建一个空对象，并且this变量引用该对象，同时还继承了该对象的原型。
  2. 属性和方法被加入到this引用的对象中。
  3. 新创建的对象由this所引用，并且最后隐式返回this

js延迟加载的方式有那些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

如何解决跨域问题

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面

jsonp的原理是动态插入script标签

消除一个数组里面重复的元素

使用indexOf()方法。

1
2
3
4
5
6
7
8
9
10
11
var arr = [1,1,2,3,4,5,6,6,7,78,87,9];
var arr2 = [];
for (var i = 0; i < arr.length; i ++) {
    if (arr.indexOf(arr[i]) == i) {
        arr2.push(arr[i]);
    }
}
console.log(arr2);
//[ 1, 2, 3, 4, 5, 6, 7, 78, 87, 9 ]

HTTP

简述同步和异步的区别。

简单来说，
同步：一个进程在执行的时候若需要等待一段时间才可以返回信息，则该进程将一直等待下去。
异步：进程不需要一直等待下去，而是继续进行下面的操作。

浏览器中输入URL到返回页面的全过程

  1. 解析域名，找到主机IP
  2. 发起TCP的三次握手
  3. 建立TCP连接后发起http请求
  4. 服务器端相应http请求，浏览器得到html代码
  5. 浏览器解析html代码，并请求html代码中的资源
  6. 浏览器对页面进行渲染呈献给用户

HTTP状态码有哪些

成功的状态码：
200 – 服务器成功返回网页
304 – 未修改
失败的状态码：
404 – 请求的网页不存在
503 – 服务器暂时不可用
500 – 服务器内部错误

进程与线程的区别？

一个程序至少有一个进程，一个进程至少有一个线程。
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。