web前端面试题 + 必会知识点

最新推荐文章于 2024-08-24 20:01:13 发布

webWangGe

最新推荐文章于 2024-08-24 20:01:13 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： vue.js html html5 node.js css

原文链接：https://www.jianshu.com/p/26cf596f22fa?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

版权

前端专栏收录该内容

14 篇文章 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]-->

html5shiv.js下载地址https://github.com/aFarkas/html5shiv/releases

问题三：被点击过的超链接不再具有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）有哪儿些？

行内元素： a, b, span, img ,input, button, select ,textarea , em
块级元素：div, ul, ol ,li, dl, dt, dd, p ,h1-h6
空元素（没有内容的元素): br, hr, link, meta

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

localStorage和sessionStorage的区别
主要区别sessionStorage与localStorage的生命周期不一样。都属于web Storage存在客户端

sessionStorage：浏览器关闭后其内部setItem的值会被自动删除
localStorage :只要你手动不清缓存或者removeItem,clear等操作。设置的值会一直存在，关闭浏览器后还会存在（前提是你重新打开同样的网址）

cookie和session
cookie和session都是用来跟踪浏览器用户身份的会话方式
区别
(1）保持状态：
cookie保存在浏览器端，session保存在服务器端
(2）使用方式：
一、 cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie，如果在浏览器中设置了cookie的过期时间，cookir被保存在硬盘中，关闭浏览器后，cookie数据仍在，知道过期时间结束才消失
```
  设置cookie的过期时间
  function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      var expires = "expires=" + d.toUTCString();
       document.cookie = cname + "=" + cvalue + "; " + expires+"; path=/"   这个很重要代表在那个层级下可以访问cookie
      console.log(d)
  }
```
二、session机制：服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

四者对比

Cookie(客户端)存储于访问者的计算机中的变量的大小是受限的，大概只允许4k
web storage（客户端） 缓存大小能到5m甚至更大。
这两者都是保存在浏览器端,且同源的
Session 在服务器端，默认被存在在服务器的一个文件里（不是内存），
Session的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏  览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url    中传递 session_id），和sessionStorage不是同一概念的，值得注意。

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

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

方法：

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

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

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

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 可以有哪些用途？

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

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

优点：

（1）iframe能够原封不动的把嵌入的网页展现出来。
（2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
（3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
（4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

（1）搜索引擎的爬虫程序无法解读这种页面
（2）框架结构中出现各种滚动条
（3）使用框架结构时，保证设置正确的导航链接。
（4）frame页面会增加服务器的http请求

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作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

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

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

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

新元素
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section），见11
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；

16. 请阐述table的缺点

太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
灵活性差，比如要将tr设置border等属性，是不行的，得通过td
代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
不够语义

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

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

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新特征？

rgba和透明度
background-image / background-size / background-repeat
word-wrap: break-word (换行)
text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
border-radius 属性用于创建圆角
border-image: url(border.png) 30 30 round; 边框图片
box-shadow: 10px 10px 5px #888888;盒子阴影
@media媒介查询，用于适配不同分辨率下的css样式

6、常见的兼容性问题？

不同浏览器下的margin和padding不一样
```
 * {margin: 0 ; padding: 0;}
```
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
```
-webkit-text-size-adjust: none;
```

7、css伪类和伪元素

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态根据用户行为而动态变化。
伪元素的操作对象是DOM树中已有的元素
伪类和伪元素的区别在于有没有创建一个DOM树之外的元素

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、请列举几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none；元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。
h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

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

px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。
px定义的字体，无法用浏览器字体放大功能。
em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

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

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者浮动元素的边框停留。

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

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

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

添加额外标签，例如
```
 <div style="clear:both"></div>
```
使用br标签和其自身的html属性，例如
```
  <br clear="all" />
```
父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；
父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout
父元素也设置浮动
父元素设置display:table
使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

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

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。

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

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

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

属性(常用)

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
    flex-direction: row | row-reverse | column | column-reverse
     // row（默认值）：主轴为水平方向，起点在左端。
     // row-reverse：主轴为水平方向，起点在右端。
     // column：主轴为垂直方向，起点在上沿。
     // column-reverse：主轴为垂直方向，起点在下沿。
}

flex-wrap属性: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

 .box{
       flex-wrap: nowrap | wrap | wrap-reverse
         // nowrap（默认）：不换行
         // wrap：换行，第一行在上方。
         // wrap-reverse：换行，第一行在下方。
  }

justify-content属性定义了项目在主轴上的对齐方式。

  .box {
       justify-content: flex-start | flex-end | center | space-between | space-around;
        // flex-start（默认值）：左对齐
        // flex-end：右对齐
        // center： 居中
        // space-between：两端对齐，项目之间的间隔都相等。
        // space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
   }

align-items属性定义项目在交叉轴上如何对齐。

   .box {
       align-items: flex-start | flex-end | center | baseline | stretch
        // flex-start：交叉轴的起点对齐
        // flex-end：交叉轴的终点对齐
        // center：交叉轴的中点对齐
        // baseline: 项目的第一行文字的基线对齐
        // stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
   }

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  // flex-start：与交叉轴的起点对齐。
  // flex-end：与交叉轴的终点对齐。
  // center：与交叉轴的中点对齐。
  // space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  // space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  // stretch（默认值）：轴线占满整个交叉轴。
}

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

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

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

混合：class中的class（将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性）
参数混合：可以将class像函数的参数一样进行传递
嵌套规则：class中嵌套class，从而减少重复的代码（在一个选择器中嵌套另一个选* 择器来实现继承）
运算： css中的数学计算（在css中使用加减乘除进行数学计算，主要运用于属性值和颜色的运算）
颜色功能：可以编辑你的颜色（颜色的函数运算，颜色会被先转化成HSL色彩空间，然后在通道级别操作）
命名空间：样式分组，从而方便被调用（将一些变量或者混合模块打包封装，更好的组织css和属性集的重复使用）
作用域：局部修改样式（先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作用域非常的相似）
js表达式：在css样式中使用js表达式赋值（在less或者sass文件中可以使用js的表达式，用来赋值）

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

他们之间的主要区别在于实现方式不同，less是基于js运行，所以less是在客户端处理；sass是基于ruby的，是在服务器端处理的。
很多开发者不选择less是因为less输出修改过的css到浏览器需要依赖于js引擎，而js引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用less。一旦开发完成，我就复制粘贴less输出到一个压缩器，然后到一个单独的css文件来替代less文件。另一种方式是使用less app来编译和压缩你的less文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持js而可能引起的任何问题。

第四阶段：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.添加删除替换插入到某个接点的方法

1）创建新节点

createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性

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

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

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

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

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

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

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

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

12. null和undefined的区别？

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

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
1）变量被声明了，但没有赋值时，就等于undefined。
2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
3）对象没有赋值的属性，该属性的值为undefined。
4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。

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

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

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

Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上
Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据
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事件委托什么原理，有什么优缺点

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

优点
1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
缺点
事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件.

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

含义
定义：浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
作用
cache的作用：
1、减少延迟，让你的网站更快，提高用户体验。
2、避免网络拥塞，减少请求量，减少输出带宽。
实现手段
Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。
对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

31. 什么是虚拟dom

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际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. 小知识点

1）dom节点的根节点是不是body
回答：不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)
2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性返回 null。
3）[1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串
4）li标签的祖级元素可以为li，父级元素也可以为例
回答：错误

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

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层；http属于应用层。
表现层

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

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

37. websocket长连接原理是什么

含义
Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
原理
类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息

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

1.XSS，也就是跨站脚本注入

攻击方法：

手动攻击:

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

自动攻击

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

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

2.SQL注入
攻击方法：

编写恶意字符串，比如‘ or  1=1--等，
手动测试目标网站上所有涉及数据库操作的地方

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

3.CSRF，也就是跨站请求伪造

  就是攻击者冒用用户的名义，向目标站点发送请求

防范方法：
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的区别

相同点
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
都有兼容问题
不同点
map速度比foreach快
map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
map因为返回数组所以可以链式操作，foreach不能

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

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。
其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效

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

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

概念：
（1）call()、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数，简单来说就是让函数在某个指定的对象下执行。
（2）bind()就是将某个函数绑定到某个对象上。
（3）三个方法的作用都是改变函数的执行上下文。
区别：
（1）call和apply的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。他们的区别在于参数不同，call第一个参数之后的其他所有参数就是传入该函数的值，以逗号分隔；apply只有两个参数，第二个是数组，这个数组就是该函数的参数。
（2）bind和两者的区别在于bind方法会返回执行上下文被改变的函数而不会立即执行，前两者是直接执行该函数。bind的参数和call相同。

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

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

（1）所有同步任务都在主线程上执行，形成一个执行栈
（2）主线程外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件
（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务就会结束等待状态，而进入执行栈，开始执行
（4）主线程上不断重复上面三步。

48. 原型链

（1）、构造函数、原型、实例的关系
构造函数都有一个proptotype属性；
原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数；
实例对象都有一个proto属性，该属性也指向构造函数的原型对象，他是一个非标准属性，不可以用于编程，是浏览器自己使用的。
（2）prototype和proto关系
prototype是构造函数的属性，proto是实例对象的属性。这两者都指向同一个对象。
（3）原型链属性搜索（什么是原型链）？
在访问对象的某个成员的时候，会先从对象本身进行查找，如果对象中查找不到，那么就会去它的构造函数的原型对象中进行查找，如果没有找到，那么就会去它的原型对象的原型对象中查找，这样一层一层往上查找，直到object的原型对象的原型是null为止。

49. 谈一谈闭包

闭包的概念：
闭包就是能够读取其他函数内部变量的函数。在js中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解为‘定义在一个函数内部的函数’。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
闭包的用途：
（1）可以读取函数内部的变量
（2）让这些变量的值始终保持在内存中，因为这些变量始终被引用着，所以不会被垃圾回收机制回收
闭包的注意点：
（1）由于闭包使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页性能问题，在IE中可能导致内存泄漏。解决办法：在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时候要小心，不能随便改变父函数内部变量的值。

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来承上启下。

各部分之间的通信都是双向的，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 都有哪些优劣？

优势
无刷新在页面与服务器通信，更新页面，用户体验好。
异步与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
前端和后端负载平衡。
界面与应用分离
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
AJAX干掉了Back和History功能，即对浏览器机制的破坏。
AJAX的安全问题
Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等
对搜索引擎支持较弱。
客户端过肥，太多客户端代码造成开发上的成本。
违背URL和资源定位的初衷,采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。

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

Mustache
Underscore Templates
Embedded JS Templates(ejs)
HandlebarsJS
Jade templating

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的区别

（1）生命周期
2.0生命周期变得更加语义化了，增加了beforeUpdate、updated等，删除了attached、detached。
（2）过滤器
2.0将1.0所有自带的过滤器都删除了，我们需要自己定义过滤器：
```
Vue.filter('toDou', function(n, a, b) {
    return n < 10? n + a + b : '' + n;
})
```
如果想展示JSON数据，不需要调用过滤器了，框架会自动帮我们解析出来；
2.0过滤器的传参方式不是以前的方式，是以函数传参的方式：
```
//1.0 {{ msg | mimi '12' '5' }}
//2.0 {{ msg | mimi('12', '5') }}
```
（3）循环
在Vue2.0中丢弃了 key，将track-by替换成key属性，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。
（4）片段代码
在编写template的时候，2.0必须要用一个根元素（如div）将代码片段包裹起来，否则报错。1.0则不需要。
（5）el属性绑定的元素，限制为一个普通的元素，不能再绑定再body、html元素上。
（6）v-model增加了.trim、.number等后缀修饰符

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：完成挂载，已经渲染完成。