web前端面试题+ 必会知识点（持续更新）

2018-09-28  本文已影响0人  送你一堆小心心

整理所有看过的文章的面试题+各种百度每一道题的答案，希望可以有效的帮助别人
本章博客，梳理所有基础的css，js，html，jquery，vue等题，包含面试题，可供参考学习，也督促自我学习

第一阶段：前端和计算机基础相关知识

1. 描述渐进增强和优雅降级之间的区别

渐进增强：在网页开发中，先对低版本的浏览器进行css样式处理，构建页面，满足最基本的功能，在对高级浏览器进行效果，交互。写法如下：

.box {

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

}

优雅降级：在网页开发中，先对高版本的浏览器进行css样式处理，构建页面，完善功能，在对低版本浏览器进行测试修复，完成基本功能。写法如下：

.box {

    -moz-border-radius: 2px;

    border-radius: 2px;

    -webkit-border-radius: 2px;

}

2. 浏览器兼容问题

问题一：标签最低高度设置min-height不兼容

解决方案：

{

    min-height: 200px;

    height: auto !important;

    height: 200px;

    overflow: visible;

}

问题二：H5新标签在IE9以下的浏览器不识别

解决方案：

<!--[if It IE 9]-->

<script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

问题三：被点击过的超链接不再具有hover和active属性

解决方案：

按照lvha的顺序书写css样式

“link”：a标签还未被访问的状态

“visited”：a标签已被访问过的状态

“hover”：鼠标悬浮在a标签上的状态

“active”：a标签被按着时的状态

3. 如何对网站的文件和资源进行优化？

文件合并

第一种：将所有的js合并成一个大文件，所有的页面都引用。

优点：合并简单，使用也简单；缺点：页面可能会加载到本页面不使用的代码

第二种：各个页面合并生成自己所需js文件，生成多份js合并。

优点：每个页面都用到最精确的js，不会有不相关代码；缺点：公共部分无法使用缓存优化加载，会存在大量共同js代码的冗余。

第三种：合并公共大文件。

优点：公共部分得到加载优化，每个页面引用的也尽可能的做到了不冗余；缺点：可能会存在某些页面会引用到不需要的代码

文件压缩

1. 图片压缩css sprites 等

2. 文件上传压缩

3. 视频压缩等

使用cdn托管资源

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。（百度百科）

gizp压缩你的js和css文件

使用缓存

getStorage setStorage

meta标签优化（title,description,keywords）、heading标签的优化(h1-h6)、alt优化

反向链接，网站外链接优化

网站外链一般称为导入链接/外部链接/网站反链/反向链接，通常称为外链和反链。

1.外链就是别的网站有指向到自己网站的链接

2.外链是唯一的站外优化操作方式

3.外链可以给你的网站带来可观的权重

4. 如何理解前后端分离？

前端：负责View和Controller层。

后端：只负责Model层，业务处理/数据等。

5. 浏览器内核以及渲染引擎

（1）内核

Firefox使用Geoko——Mozilla自主研发的渲染引擎

Safari和Chrome都使用webkit。

（2）渲染引擎

a）处理html生成DOM TREE

b）处理css生成CSSDOM TREE

c）DOM树与CSS-DOM树合并为Render树

d）对Render树进行布局计算

e）遍历Render树的每一个节点绘制到屏幕

6. 浏览器的加载顺序以及repaint/reflow

加载顺序

（1）输入网址，浏览器像服务器发出请求，服务器返回html文件

（2）浏览器载入html代码，发现head标签中有一个link引用了外部css文件

（3）浏览器又发起css文件请求，服务器返回这个css文件

（4）浏览器继续载入body部分的代码，而且css文件已经拿到，开始渲染页面

（5）浏览器在代码中发现一个引用img标签的图片，开始向服务器发出请求，浏览器继续渲染后续代码，不停止等待

（6）服务器返回图片文件，由于图片占用了一定的位置，影响了后面的排版布局，因此浏览器需要返回重新渲染代码

（7）浏览器发现javascript标签，运行外部js文件，浏览器发起请求，服务器返回js文件

（8）浏览器开始解析js代码，发现js中需要隐藏代码中的块（div...）,重新渲染代码

（9）如果更改页面布局和颜色搭配，浏览器重新请求css，重新渲染

回流reflow

如果渲染树的结点发生了结构性变化，例如：宽高或者位置等，那么会触发回流reflow的逻辑。

重绘repaint

如果渲染树的结点发生了非结构性的变化，例如：背景色等，会触发repaint重绘的逻辑。

document.body.style.padding = "20px" //reflow, repaint

document.body.style.color = 'red' //repaint

7. 如何加快HTML的加载速度

（1）删除不必要的空格，注释

（2）减少文件数量，压缩文件

（3）减少域名查询，减少对外部的js，css和图片资源的引用

（4）缓存重用数据

（5）优化页面元素加载顺序，将图片，flash以及食品等资源最后加载

（6）使用合法标签，杜绝使用嵌套tables，在使用图像和tables时，应当设置大小。

8. 为什么使用多个域名来存储网络资源会更有效？

1.CDN存储更方便

2.突破浏览器并发限制（同一时间针对同一域名下的请求有一定的数量限制）

3.节约cookie宽带

4.节约主域名的连接数，优化页面响应速度

5.防止不必要的安全问题

9. 进程与线程

定义

进程是具有一定独立功能的程序，是系统进行资源分配和调度的一个独立单位

线程是进程的一个实体，是CPU调度和分派的基本单位，基本上不拥有系统资源

关系

一个线程可以创建和撤销另一个线程

同一个进程中的多个线程之间可以并发执行

区别

1. 一个程序至少有一个进程，一个进程至少又一个线程

2. 线程的划分尺度小于进程，使得多线程程序的并发行高

3. 进程在执行过程中拥有独立的内存单元吗，而多个线程共享内存

4. 线程不能够独立执行，必须依存在应用程序中

优缺点

线程执行开销小，但不利于资源的管理以及保护，进程相反

线程适合于在SMP及其上运行，进程可以跨机器迁移 （SMP：双/多CPU处理系统）

10. http与https区别

http

http是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从www服务器传输超文本到本地浏览器的传输协议，它可是使浏览器更加高效，使网络传输减少。

https

https是以安全为目标的http通道，简单讲是http的安全版，是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议

客户端                    服务器端

          请求https连接

------------------------------>

          返回证书（公钥）

<------------------------------

产生随机（对称）密钥

使用公钥对对称钥加密

        发送加密后的对称密钥

------------------------------>

<------------------------------

        发送加密后的对称密钥

------------------------------>

<------------------------------

    通过对称密钥加密的密文通信

------------------------------>

<------------------------------

区别

1. https协议需要到ca申请证书，一般免费证书比较少，因而需要一定费用

2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议

3. http和https使用的是完全不同的连接方式，用的端口也不是一样，前者是80，后者是443

4. http连接很简单，无状态；https是需要加密传输，身份认证，比较安全

11. OSI七层协议 TCP/IP四层概念模型 对应网络协议

OSI先有模型，后有协议，先有标准，后进行实践；而TCP/IP是先有协议和应用在提出了模型，参照OSI模型

OSI七层协议            TCP/IP四层概念模型          对应网络协议

应用层（application）      应用层                  HTTP，TFTP，FTP，NFS，WAIS，SMTP

表示层（presentation）      应用层                  Telent...

会话层（session）          应用层                  SMTP，DNS

传输层（transport）        传输层                  TCP，UDP

网络层（network）          网络层                  IP...

数据链路层（Data Link）    数据链路层                FDDI...

物理层（physical）        数据链路层                IEEE

12. https在使用上有什么注意点

1. 不能部分部署https，应当应用于所有页面，否则会存在sessionID被拦截

2. 部署https后，将任何普遍的http请求都重定向至https的url

3. 在cookies上设置安全标记

13. http与https的性能差距

1. http进行tcp三次握手，而https进行tcp三次握手以及ssl握手，https的速度较http协议慢

2. https协议的计算耗时增加

14. 常见排序算法

时间复杂度： 指执行算法所需要的计算工作量，也就是语句执行次数

1.用常数1代替运行实践中的所有加法常数

2.修改后的运行次数函数中，只保留最高阶级

3.去除最高阶项的系数

for: O(n) for+for: O(n^2) while: O(logn)

算法            最优复杂度          最差复杂度          平均复杂度          稳定性

冒泡排序          O(n^2)            O(n^2)            O(n^2)          稳定

插入排序          O(n)              O(n^2)            O(n^2)          稳定

选择排序          O(n^2)            O(n^2)            O(n^2)          不稳定

快速排序          O(nlogn)          O(n^2)            O(nlogn)        不稳定

希尔排序          O(n)              O(n^2)            O(n^1.4)        不稳定

归并排序          O(nlogn)          O(nlogn)          O(nlogn)        稳定

堆排序          O(nlogn)          O(nlogn)          O(nlogn)        稳定

冒泡排序

每次将相邻的两个元素进行比较，将较小的元素放到前面

bubbleSort (arr) {

    for (let i = 0; i < arr.length - 1; i ++) {

        for (let j = 0; j < arr.length - i - 1; j++) {

            if (arr[j] > arr[j + 1]) {

                let swap = arr[j]

                arr[j] = arr[j + 1]

                arr[j + 1] = swap

            }

        }

    }

}

83  85  81  18  98

83  81  18  85  98

81  18  83  85  98

18  81  83  85  98

快速排序

快速排序是冒泡排序的一种改进，第一趟排序时将数据分成两个部分，一个部分比另一个部分的所有数据都要小，然后递归调用，在两边都实现快速排序

quickSort (elements) {

    if (elements.length <= 1) {

        return elements

    }

    let pivotIndex = Math.floor(elements.length / 2)

    let pivot = elements.splice(pivotIndex, 1)[0]  // 删除中间值，形成新的数组并返回删除值

    let left = []

    let right = []

    elements.forEach(item => {

        if (item < pivot) {

            left.push(item)

        } else {

            right.push(item)

        }

    })

    return quickSort(left).concat([pivot], quickSort(right))

}

29 39 13 33 30 12 34 14

13 12 14 29 39 33 30 34

12 13 14 29 33 30 34 39

12 13 14 29 30 33 34 39

插入排序

从第一个元素开始，该元素可以认为已经被排序，取出下一个元素，在已经排序的元素序列中从后向前扫描，如果该元素大于新元素，将该元素移到下一个位置，知道找到已排序的元素小雨或者等于新元素的位置，将新元素插入到下一个位置中，继续扫描

sort (elements) {

    for (let i = 1; i < elements.length; i++) {

        let key = elements[I]

        let j = i - 1

        while (elements[j] > key) {

            elements[j + 1] = elements[j]

        }

        elements[j + 1] = key

    }

    return elements

}

20 19 21 34 53 11 31 49 58

19 20 21 34 53 11 31 49 58

11 19 20 21 34 53 31 49 58

11 19 20 21 31 34 53 49 58

11 19 20 21 31 34 49 53 58

选择排序

在要排序的一组数中，选出最小的一个数与第一个数的位置交换，然后在剩下的数中再找最小的与第2的交换，知道由小到大排序为止

selectSort (elements) {

    for (let i = 0; i < elements.length; i++) {

        let minIndex = I

        for (let j = i + 1; j < elements.length; j++) {

            if (elements[j] < arr[minIndex]) {

                minIndex = j

            }

        }

        let temp = elements[I]

        elements[i] = elements[minIndex]

        elements[minIndex] = temp

    }

    return elements

}

20 19 21 34 53 11 31 49 58

11 19 21 34 53 20 31 49 58

11 19 20 34 53 21 31 49 58

11 19 20 21 53 34 31 49 58

11 19 20 21 31 34 53 49 58

11 19 20 21 31 34 49 53 58

希尔排序

希尔排序是把记录按下标的一定增量分组，对每组使用直接插入排序算法排序，随着增量逐渐减少，每组包含的关键词越来越多，当增量减至1时，整个文件恰被分成一组，算法终止

shellArr (arr) {

    let len = arr.length,

        temp = 1,

        gap = 1

    while (gap < len / 5) {

        gap = gap * len + 1

    }

    for (gap; gap > 0; gap = Math.floor(gap / 5)) {

        for (let i = gap; i < len; i ++) {

            temp = arr[i]

            for (let j = i - gap; j >= 0 && arr[j] > temp; j -= gap) {

                arr[j + gap] = arr[j]

            }

            arr[j + gap] = temp

        }

    }

    return arr

}

8 9 1 7 2 3 5 4 6 0 //gap = 10 / 5 = 2 => 分为五组，隔四个的两个值排序

3 5 1 6 0 8 9 4 7 2 //gap = 5 / 2 = 2 => 分为两组，隔一个的五个值进行直接插入排序

0 2 1 4 3 5 7 6 9 8 //gap = 2 / 2 = 1 => 一个一个插入排序

0 1 2 3 4 5 6 7 8 9

归并排序

归并排序是一种稳定的排序方法，将已有序的子序列合并，得到完全有序的序列，即先使每个子序列有序，再使子序列段间有序

mergeSort (arr) {

    let len = arr.length

    if (len < 2) {

        return arr

    }

    let middle = Math.floor(len / 2),

        left = arr.slice(0, middle),

        right = arr.slice(middle)

    return merge(mergeSort(left),mergeSort(right))

}//分

merge (left, right) {

    let result = []

    while (left.length && right.length) {

        if (left[0] <= right[0]) {

            result.push(left.shift())

        } else {

            result.push(right.shift())

        }

    }

    while (left.length) {

        result.push(left.shift())

    }

    while (right.length) {

        result.push(right.shift())

    }

}

8 9 1 7 2 3 5 4 6 0

8 9 7 1 2 3 4 5 0 6

8 9 1 2 7 3 4 0 5 6

1 2 7 8 9 0 3 4 5 6

0 1 2 3 4 5 6 7 8 9

堆排序

堆排序可以把每一趟元素的比较结果保存下来，以便我们在选择最小/大元素时对已经比较过的元素做出相应调整。

1.将长度为n的待排序的数组进行有序化构造成一个大顶堆

2.将根结点与尾节点交换并输出此时的尾节点

3.将剩余的n-1个节点重新进行堆有序化

4.重复步骤2， 步骤3直至构造成一个有序列表

heapSort (arr) {

    let heapSize = arr.length,

        temp;

    for (let i = Math.floor(heapSize / 2) - 1; i >= 0; i--) {

        heapify(arr, i, heapSize)

    }

    for (let j = heapSize - 1; j >= 1; j--) {

        temp = arr[0]

        arr[0] = arr[j]

        arr[j] = temp;

        heapify(arr, 0, --heapSize)

    }

    return arr;

}

heapify (arr, x , len) {

    let l = 2 * x + 1,

        r = 2 * x + 2,

        largest = x,

        temp;

    if (l < len && arr[l] > arr[largest]) {

        largest = 1

    }

    if (r < len && arr[r] > arr[largest]) {

        largest = r

    }

    if (largest != x) {

        temp = arr[x]

        arr[x] = arr[largest]

        arr[largest] = temp

        heapify(arr, lengest, len)

    }

}

20 50 10 30 70 20 80

            20                              20

        50      10        ====》      50      80

      30  70  20  80                  30  70  20  10

                                            ||

                                            ||

            80                              20

        70      20      《====        70      80

      30  50  20  10                  30  50  20  10

            ||

            ||

            10                              10

        70      20      ====》        20      20

      30  50  20  80                  30  50  70  80

10 20 20 30 50 70 80

15.TCP握手协议

TCP三次握手

第一次握手：建立连接时，客户端发生syn包（syn=j）到服务器，并进入SYN_SEND状态，等待服务器确认；

          syn（同步序列编号）

第二次握手：服务器收到syn包，必须确认客户的syn（ack=j+1)，同时自己也发送一个syn包（syn=k），即syn+ack包，此时服务器进入syn_recv状态

第三次握手：客户端收到服务器的syn+ack包，向服务器发送确认包ack（ack=k+1),此包发送完毕，客户端和服务器进入established状态，完成三次握手

完成三次握手后，客户端与服务端开始传送数据

TCP四次握手（挥手）

第一次挥手：客户端发送一个fin，用来关闭客户端到服务器端的数据传送，客户端进入fin_wait_1状态

第二次挥手：服务器收到fin后，发送一个ack，确认序号为收到的序号+1，和syn一样，一个fin占用一个序号

第三次挥手：服务器关闭与客户端a的连接，发送一个fin给客户端a

第四次挥手：客户端a发回ack报文确认，并将确认序号设置为收到序号+1

为什么建立协议是三次握手，关闭连接却是四次握手？

这是因为服务器端的listen状态下的socket当收到syn报文的建连请求后，它可以把ack和syn（ack起应答作用，而syn起同步作用）放在一个报文里来发送，但关闭连接时，当收到对方的fin报文通知时，它仅仅表示对方没有数据发送给你，但未必你所有的数据全部发送给对方了，所以你可以未必会马上关闭socket，也即你可能还需要发送一些数据给对方之后买发送fin报文来表示你同意现在可以关闭连接了，所有他这里的ack报文和fin报文多数情况下都是分开发送的。

16.http请求头有哪儿些字段

Accept: 浏览器能够处理的内容类型（ text/html, application/xhtml+xml ）

Accept-Charset：浏览器能识别的字符集（ utf-8 ）

Accept-Encoding：浏览器可以处理的编码方式（ gzip, deflate ）

Accept-Language：浏览器接受的语言（ zh-CN ）

Cookie：浏览器向服务器发送请求时发送cookie（ user=admin ）

Content-Type：请求体中的内容的mime类型（ application/x-www-form-urlencoded ）

Date：发送请求时的GMT时间（ Tue， 15 Nov 2018 14:43:37 GMT ）

Host：被服务器的域名或IP地址（ Host：www.xxx.com:8080 ）

Referer：指当前请求的URL是在什么地址引用的（ 点击超链接的请求的referer为当前超链接所在页面 ）

17.http响应头有哪儿些字段

allow：对某网络资源的有效的请求行为

age：从原始服务器到代理缓存形成的估算时间（以秒计，非负）

Access-Control-Allow-Headers: x-requested-with, Content-Type, Authorization, token

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE

Access-Control-Allow-Origin: *

Access-Control-Max-Age: 3600

Content-Type: application/json;charset=UTF-8

Date: Wed, 19 Sep 2018 06:56:58 GMT

Transfer-Encoding: 文件传输编码（ chunked ）

18.http1.1和http1.0的区别

http1.0：每次请求和响应都需要建立一个单独的连接，每次连接只是传输一个对象，严重影响客户机和服务器的性能

http1.1：支持持久连接（keep-alive/close），在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，增加了更多的请求头和响应头来改进和扩充http1.0的功能，增加了host请求投字段后，实现了在一台web服务器上可以在同一个ip地址和端口号上使用不同主机名来创建多个虚拟web站点，新增身份认证（authentication）

19.三种禁止浏览器缓存的头字段以及设置指

Expires: 0

Cache-Control: no-cache/no-store（request+response）/private

Pragma: no-cache

20.常用的http状态码列表

100: Continue，客户端应继续其请求

200: OK，请求成功，一般用于get与post请求

304: Not Modified，未修改，所请求的资源未修改，服务器返回此状态码时，不会返回任何资源，可以直接只用浏览器缓存

305: Use Proxy，使用代理，所请求的资源必须通过代理访问

400: Bad Request，客户端请求的语法错误，服务器无法理解

401: Unauthorized，请求要求用户的身份认证

403: Forbidden，服务器理解请求客户端的去部分请求，但是拒绝执行次请求

404: Not Found，服务器无法根据客户端的请求找到资源（网页）

500: Internal Server Error，服务器内部错误，无法完成请求

502: Bad Gateway，充当网管或代理的服务器，从远端服务器接收到了一个无效的请求

503: Service Unavailable，由于超载或系统维护，服务器暂时的无法处理客户端的请求

21.DNS-prefetch

dns: 域名解析，将url地址的域名解析成ip地址

dns prefetch是一种dns预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行dns的解析，减少用户等待时间，提高用户体验

设置dns-prefetch

开启

<meta http-equiv="X-dns-prefetch-control" content="on" />

设置

<link rel="dns-prefetch" href="//baidu.com" /> 使用//是为了防止不确定是http还是https协议

第二阶段：html问题

1、行内元素有哪儿些？块级元素有哪儿些？空元素（void）有哪儿些？

2、cookie，session,localStorage，sessionStorage的区别

3.HTML5的form如何关闭自动完成功能？

HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法：

在IE的internet选项菜单中里的自动完成里面设置
设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能

4. 网页验证码是干嘛的，是为了解决什么安全问题？

  1. 区分用户是计算机还是人的程序;
  2. 可以防止恶意破解密码、刷票、论坛灌水；

5.title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；
h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；
b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

6.元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

7.页面可见性（Page Visibility）API 可以有哪些用途？

  1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。
  2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

8. iframe框架有那些优缺点？

9. HTML5的文件离线储存怎么使用，工作原理是什么？

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

在页面头部加入manifest属性

  <html manifest='cache.manifest'>

在cache.manifest文件中编写离线存储的资源

    CACHE MANIFEST
   #v0.11
   CACHE:
   js/app.js
   css/style.css
   NETWORK:
   Resourse/logo.png
   FALLBACK:
    //offline.html

10. 简述一下你对HTML语义化的理解？

（1）去掉或丢失样式的时候能够让页面呈现出清晰的结构。
（2）有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
（3）方便其它设备解析。
（4）便于团队开发和维护，语义化根据可读性。

11. html5新增的标签以及对应语义化（只简介8种）

（1）header: header标签定义页面的页眉信息。【主要用于定义结构，一般来说也可以使用其他方式来创建头部，但使用header就标注出了这个结构是头部，比其他多出了语意】

  例子：比如一些网上商城的顶部logo信息

（2） nav: 定义导航链接。【主要用于定义结构，一般来说也可以使用其他方式来创建导航，但使用nav就标注出了这个结构是导航，比其他多出了语意】

  <nav class="">
    <ul>
        <li><a href="#">食品</a></li><!--
     --><li><a href="#">电器</a></li><!--
     --><li><a href="#">电子数码</a></li><!--
     --><li><a href="#">书籍</a></li>
    </ul>
  </nav>

（3）article: 定义一个独立的内容,article比p，比div多了语意，虽然理论上都可以使用div来实现，但多出了语意。【比如一本书可以一章可以有多个段落，但可以有几章，而article的语意就像章节，它的内容是独立的，而不是仅仅的“段落”】

  <article>
    <header id="header" class="">
        头部：菜鸡互啄区
    </header><!-- /header -->
    <h2>是道德的沦丧，还是。。。</h2>
    贪玩蓝月，你没玩过的全新版本
    <footer>
        底部：欢迎评论
    </footer>
 </article>

（4）footer:用来定义页尾。【主要用于定义结构，一般来说也可以使用其他方式来创建页脚，但使用footer就标注出了这个结构是页脚，比其他多出了语意】

<footer>
    <div style="float:left;margin-right: 10px;">
        <div style="font-weight: bold;">合作伙伴</div>
        <div>支付宝</div>
        <div>微信</div>
    </div>
</footer>

（5）session：功能：定义网页的中的“区块”【比p多出语意“区块”，而又比div少出样式之意，div更多的用来定义样式，而session可以用来做结构划分】【如果article是一篇文章的话，那么session可以某块围绕一个论点的文章内容】

<section>
    <h3>小标题：如何学习马克思</h3>
    <p>...巴拉巴拉</p>
</section>

（6）autio: 可以用来定义音乐。属性：src、controls、autoplay、loop...

<audio loop controls>
    <source src="bg.mp3"> <!-- 当第一个无法播放时，播放第二个源的音乐 -->
    <source src="一眼万年.mp3">
</audio>

（7）video定义一个视频。属性：src，controls，autoplay，loop，width...

<video src="地址 Fly.mp4"  controls></video>

（8）embed：embed标签用来定义插入的内容（媒体内容），比如可以插入swf

  <embed src="动画演示.swf" ></embed>

12. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

13.你知道多少种Doctype文档类型？

14. HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。

15. html5有哪些新特性、移除了那些元素？

16. 请阐述table的缺点

17. 简述一下src与href的区别

18.很多网站不常用table iframe这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

第三阶段：css样式问题，我学的sass，less，所以还有sass，less扩展

1、介绍一下css的盒子模型，与低版本IE的盒子模型有什么不同

  标准盒子模型：width = 内容宽度（ content） + border + padding + margin
  低版本IE盒子模型： width = 内容宽度（content+border+padding）+ margin

2、box-sizing属性

用来控制元素的盒子模型解析模式，默认为content-box

content-box: W3C的标准盒子模型，设置元素的height/width属性指的是content部分的高/宽
border-box: IE传统的盒子模型，设置元素的height/width属性指的是content+border+padding部分的高/宽

3、css选择器有哪儿些？

css选择器：
(1) id 选择器 （#className）
(2) 类选择器 （.className）
(3) 标签选择器 （h1 div span ...）
(4) 相邻选择器 （h1 + p）
(5) 子选择器 （ul > li）
(6) 后代选择器 （ul li ）
(7) 通配选择器 （*）
(8) 属性选择器 （a[rel='external']）
(9) 伪类选择器 （a:hover，a:link，a:active...）

4、css哪儿些属性可以继承？

可继承：font-size;font-weight;line-height;color;cursor
不可继承一般是指改变盒子模型的：margin;padding;border
优先级：!important > id > class > tag

5、css3新特征？

6、常见的兼容性问题？

7、css伪类和伪元素

8、页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载css外，还能用于定义RSS（简易信息聚合，是一种基于XML标准），rel连接属性等作用；@import是css提供，只能用于加载css
（2）页面被加载时，link会同时被加载；@import引用的css会等到页面被加载完成后再加载
（3）link是XHTML标签，没有兼容问题；@import只有在IE5以上才能被识别
（4）link支持使用js控制dom修改样式；@import不支持

9、 请列举几种隐藏元素的方法

10、 在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？

11、 解释下浮动和它的工作原理？

12、 浮动元素引起的问题？

13、 请列举几种可以清除浮动的方法（至少两种）？

14、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。

15、简介flex布局（弹性布局）

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

16、sass的知识点参考笔记sass笔记

17、sass和less的共同点和区别

（1）less和sass在语法上有些共性：（8个）

（2）less和sass之间的区别：

第四阶段：js问题

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

string,boolean,number,undefined,function,object

2. 例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== ===）

3. split() join() 的区别

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

4. 数组方法pop() push() unshift() shift()

push()尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除

5. 如何阻止事件冒泡

  ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

6.如何阻止默认事件

  (1)return false；(2) ev.preventDefault();

7.添加 删除 替换 插入到某个接点的方法

8. ”==”和“===”的不同

前者会自动转换类型,再判断是否相等
后者不会自动类型转换，直接去比较

9. 函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

10.Javascript的事件流模型都有什么?

11. javaScript的2种变量范围有什么不同？

全局变量：当前页面内有效
局部变量：函数方法内有效

12. null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象

13. new操作符具体干了什么呢?

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

14. Cookie在客户机上是如何存储的

15. javascript是面向对象的，怎么体现javascript的继承关系？

使用prototype原型来实现。

16. 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。

主要数据类型：string, boolean, number
复合数据类型：function, object
特殊类型：undefined，null

17. 程序中捕获异常的方法？

  try{

    }catch(e){

    }finally{

  }

18. Ajax原理

(1)创建对象

    var xhr = new XMLHttpRequest();

(2)打开请求

    xhr.open('GET', 'example.txt', true);

(3)发送请求

    xhr.send(); 发送请求到服务器

(4)接收响应

  xhr.onreadystatechange =function(){}

  (1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
  (2)当readystate==4时，表示已经接收到全部响应数据。
  (3)当status ==200时，表示服务器成功返回页面和数据。
  (4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

19.解释什么是Json

(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

20.js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？

alert
confirm
prompt

21.可视区的大小：

(1)innerXXX（不兼容ie）

window.innerHeight 可视区高度，包含滚动条宽度
window.innerWidth  可视区宽度，包含滚动条宽度

(2)document.documentElement.clientXXX(兼容ie)

document.documentElement.clientWidth可视区宽度，不包含滚动条宽度
document.documentElement.clientHeight可视区高度，不包含滚动条宽度

22.浏览器的滚动距离：

可视区域距离页面顶部的距离

  scrollTop=document.documentElement.scrollTop||document.body.scrollTop

23. 节点的种类有几种，分别是什么？

(1)元素节点：nodeType ===1;
(2)文本节点：nodeType ===3;
(3)属性节点：nodeType ===2;

24. offsetWidth offsetHeight和clientWidth clientHeight的区别

(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）

25. 闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高

26. 请解释一下什么是语义化的HTML

内容使用特定标签，通过标签就能大概了解整体页面的布局分布

27. 为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

28. 请说出三种减低页面加载时间的方法

1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作

29. dom事件委托什么原理，有什么优缺点

事件委托原理:事件冒泡机制

30. http的cache机制，以及200状态下怎么实现 from cache（表示接触最多的就是304的from cache）（用于优化，没有接触过，需要理解）

31. 什么是虚拟dom

32. js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）

  function gettype(nm){
      return Object.prototype.toString.call(nm);
  }

33. dom选择器优先级是什么，以及权重值计算（一道老问题了）

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

34. 小知识点

35. http协议属于七层协议中的哪一层，下一层是什么

36. 作用域什么时候生成的？

页面加载-->创建window全局对象，并生成全局作用域-->然后生成执行上下文，预解析变量(变量提升)，生成全局变量对象；

37. websocket长连接原理是什么

38. 理解web安全吗？都有哪几种，介绍以及如何预防

攻击方法：

  1. 手动攻击:

     编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等，手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域

  2. 自动攻击

     利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等

防御方法：
1. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入

防御方法：
1. 禁止目标网站利用动态拼接字符串的方式访问数据库
2. 减少不必要的数据库抛出的错误信息
3. 对数据库的操作赋予严格的权限控制
4. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等
5. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字

防范方法：
1. 在客户端进行cookie的hashing，并在服务端进行hash认证
2. 提交请求是需要填写验证码
3. 使用One-Time Tokens为不同的表单创建不同的伪随机值

39. cookie可以设置什么域？可以设置.com吗

可以通过设置domin来实现

40. 重排和重绘

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

41. 什么情况会触发重排和重绘

添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。

42. proto、prototype、Object.getPrototypeOf()

proto是指内部原型，和Object.getPrototypeOf()结果等价
function f(){}
f.proto === Object.getPrototypeOf(f); //true
f.prototype === Object.getPrototypeOf(f); //false

43.WebSocket

HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

44. forEach和map的区别

45. js加载位置区别优缺点

script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后

46. call()、apply()、bind()区别

47. 如何理解同步和异步？

所有任务都可以分成两种，一种是同步任务（syn），另一种是异步任务（asyn）。同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程，而进入‘任务队列’的任务，只有‘任务对列’通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
运行机制如下：

48. 原型链

49. 谈一谈闭包

50. MVVM和MVC的区别？

（1）MVC中M表示Model模型，V表示view视图， C表示controller控制器；MVVM中M表示model模型，V表示view视图，VM表示viewmodel；
（2）MVC的看法是界面上的每个变化都是一个事件，我们只需要针对每个事件来写一堆代码，来把用户的输入转换成model里的对象，而这段转换的代码就是controller。简言之，MVC是单向通信，view和model必须通过controller来承上启下。


image.png
image.png

各部分之间的通信都是双向的，view与model不发生联系，而通过viewmodel传递，view非常薄，不部署任何业务逻辑，称为‘被动视图’，即没有任何主动性，而viewmodel非常厚，所有的逻辑都部署在那里。
MVVM和MVP的主要区别在于，MVVM采用的是双向绑定，view的变动自动反映在viewmodel上，反之亦然。angular、ember、vue都采用这种模式。

51. 请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

宿主对象是指DOM和BOM等由宿主框架通过某种机制注册到JavaScript引擎中的对象。原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等ECMAScript官方定义的对象。

52. 请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

第一个是定义了一个函数Person
第二个是把Person当普通函数执行，并把返回值赋值给person。
第三个是当做构造函数，通过new关键字创建一个实例对象，赋值给person

53. 请解释 Function.prototype.bind？

Function原型上定义的方法，所有函数都可以访问使用。主要应用场景在绑定函数执行的this，并返回一个新函数，可以在我们要调用的时候才执行。原理是函数的预处理思想，把this当做参数预置。

54. 请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？

特性检测更适合针对实现了特定特性的浏览器进行操作。UA字符串由于被浏览器厂商可以随意修改因此不太靠谱。

55. 使用 Ajax 都有哪些优劣？

56. 你使用过 JavaScript 模板系统吗？

57. 请解释变量声明提升 (hoisting)

作用域内所有变量声明都被提到顶部，被提升的变量初始值为undefined，执行到所在行时才真正赋值。

58. 什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC(Flash Of Unstyled Content)–文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在之间加入一个或者<script>元素就可以了。

第五阶段：Vue

1. Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变
location.href 是页面跳转，刷新页面

2. Vue1.0和2.0的区别

3. vue双向数据绑定的原理

主要是通过object对象的defineProperty属性，重写data的set和get函数来实现的。

4. vue的生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
（1）beforeCreate：el和data未初始化
（2）created：完成了data数据的初始化，el未初始化
（3）beforeMount：el和data已经初始化，还未渲染好，只是使用虚拟DOM把坑先占住。
（4）mounted：完成挂载，已经渲染完成。

上一篇 下一篇

猜你喜欢

热点阅读