2021届前端面试知识点（其他）

1. 什么是“前端工程化”？
2. xss跨站脚本攻击原理？如何进行？防御手段？
3. CSRF跨站请求伪造原理？如何进行？防御手段？
4. Sql脚本注入原理？如何进行？防御手段？
5. web上传漏洞原理？如何进行？防御手段？
6. 前端数据加密
7. 内存泄露
8. HTTP常用状态码及其含义？
9. Http和Https的区别？
10. http请求头content-type是干什么的？
11. 请求头与响应头
12. 轮询、长轮询、长连接、WebSocket即时通讯的区别
13. 什么是会话cookie,什么是持久cookie?
14. cookie和session的区别
15. cookie、localStorage、sessionStorage的区别和使用？
16. 如何实现浏览器内多个标签页之间的通信？
17. GET 和 POST 请求的区别
18. 输入URL发生什么？
19. 浏览器的强制缓存和协商缓存
20. 浏览器渲染的步骤
21. 回流和重绘
22. 页面渲染优化
23. 前端性能优化的七大手段
24. 单页面应用程序（SPA）的优缺点
25. 为什么要使用websocket？
26. 常见的浏览器兼容问题
27. 面向对象和面向过程
28. 封装、继承和多态
29. MVC、MTV、MVVM区别
30. SEO优化方法
31. 浏览器内核

1. 什么是“前端工程化”？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程，"前端工程化"里面的工程指软件工程。

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

2. xss跨站脚本攻击原理？如何进行？防御手段？

跨站脚本攻击，英文全称是Cross Site Script，XSS攻击，通常指黑客通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。实施XSS攻击需要具备两个条件：1、需要向web页面注入恶意html代码；2、这些恶意代码能够被浏览器成功的执行。主要攻击原理就是：过于信任客户端提交的数据。

防御手段如下：最重要的是后端不能信任前端发来的一切数据！

防堵跨站漏洞，阻止攻击者利用在被攻击网站上发布跨站攻击语句不可以信任用户提交的任何内容，首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
Cookie 防盗
首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。
尽量采用POST 而非GET 提交表单
POST 操作不可能绕开javascript 的使用，这会给攻击者增加难度，减少可利用的跨站漏洞。

3. CSRF跨站请求伪造原理？如何进行？防御手段？

CSRF：Cross-site request forgery (跨站请求伪造)，利用网站对已认证的权限去执行未授权的命令的一种恶意攻击，所谓的CSRF就是攻击者利用你的登录信息，然后做了一些没有经过你授权的一些行为。要完成一个 CSRF攻击，需要具备两个条件：1.受害者已经登录到目标网站并且没有退出(保持登录状态）；2.受害者访问了攻击者发布的链接或者表单；二者必须缺一不可。

防御手段如下：

在使用Get请求的时候非常容易伪造链接，所以尽量不要在GET请求里有任务数据修改操作。
目前所有Python主流的web框架所采用的的方式令牌同步。令牌同步(Synchronizer token pattern , 简称STP)：在用户请求的表单中嵌入一个隐藏的csrf_token，服务端验证其是否与cookie中的一致(基于同源策略其他网站是无法获取cookie中的csrf_token)。黑客是拿不到你cookie中的 csrftoken值的，前提是网站本身没有 xss漏洞。
如果是 js 提交需要先从cookie获取csrf_token作为 X-CSRFToken请求头提交。
验证码，强制用户必须与应用进行交互，才能完成最终请求。在通常情况下，验证码能很好遏制CSRF攻击。但是出于用户体验考虑，网站不能给所有的操作都加上验证码。因此验证码只能作为一种辅助手段，不能作为主要解决方案。

4. Sql脚本注入原理？如何进行？防御手段？

SQL注入就是在用户可控参数寻找漏洞进行非法提交SQL语句破坏原SQL语句结构达到程序设计时意料之外结果的操作。漏洞存在的两个原因：1.程序编写者使用字符串拼接的形式编写SQL语句；2.没有对用户提交的数据进行足够的过滤就拼接到SQL语句。可能存在注入漏洞的位置：GET数据；POST数据；Header头数据；COOKIE数据；

防御手段如下：避免数据变成代码被执行，时刻分清代码和数据的界限。

使用预编译，绑定变量（推荐）。现在的数据库系统都提供SQL语句的预编译（prepare）和查询参数绑定功能，在SQL语句中放置占位符’?’，然后将带有占位符的SQL语句传给数据库编译，执行的时候才将用户输入的数据作为执行的参数传给用户。这样的操作不仅使得SQL语句在书写的时候不再需要拼接，看起来也更直接，而且用户输入的数据也没有机会被送到数据库的SQL解释器被编译执行，也不会越权变成代码。
检查数据类型。
过滤特殊字符和语句。

5. web上传漏洞原理？如何进行？防御手段？

用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。

防御手段如下：

最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的’x’权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
单独设置文件服务器的域名。

6. 前端数据加密

处理用户敏感信息：前端一般使用md5、base64加密、sha1加密。

7. 内存泄露

内存泄漏指申请的内存一直得不到释放，GC回收不了。一般在项目中就是，你创建的对象一直保存在内存中，可达但你把它的引用地址搞丢了结果没法操作它，而GC又不会回收这块内存。内存泄漏的危害就是堆积耗尽系统所有内存。

四种常见的内存泄漏：全局变量，未清除的定时器，闭包，以及 dom 的引用

全局变量不用 var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式
被遗忘的定时器和回调函数
闭包
没有清理的 DOM 元素引用

8. HTTP常用状态码及其含义？

1xx：指示信息--表示请求已接收，继续处理2xx：成功--表示请求已被成功接收、理解、接受
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。3xx：重定向--要完成请求必须进行更进一步的操作
302 Found 表示临时性重定向。访问一个Url时，被重定向到另一个url上。常用于页面跳转。与301的区别：301是指永久性的移动，302是暂时性的，即以后还可能有变化。4xx：客户端错误--请求有语法错误或请求无法实现
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。
405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）5xx：服务器端错误--服务器未能实现合法的请求
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。
501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

9. Http和Https的区别？

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前网易官网是http，而网易邮箱是 https 。)
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

SSL(Secure Sockets Layer 安全套接字协议)，及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层与应用层之间对网络连接进行加密。

10. http请求头content-type是干什么的？

在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。

常见的媒体格式类型如下：

text/html ：    HTML格式
text/plain ：   纯文本格式
text/xml ：     XML格式
image/gif ：    gif图片格式
image/jpeg ：   jpg图片格式
image/png：     png图片格式

以application开头的媒体格式类型：

application/xhtml+xml ：   XHTML格式
application/xml     ：     XML数据格式
application/atom+xml  ：   Atom XML聚合格式
application/json    ：     JSON数据格式
application/pdf       ：   pdf格式
application/msword  ：     Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

11. 请求头与响应头

请求(客户端->服务端[request])：

GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)
Accept: /(客户端能接收的资源类型)
Accept-Language: en-us(客户端接收的语言类型)
Connection: Keep-Alive(维护客户端和服务端的连接关系)
Host: localhost:8080(连接的目标主机和端口号)
Referer: http://localhost/links.jsp(告诉服务器我来自于哪里)
User-Agent: Mozilla/4.0(客户端版本号的名字)
Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)
If-Modified-Since: Tue, 11 Jul 2017 18:23:51 GMT(缓存时间)
Cookie(客户端暂存服务端的信息)
Date: Tue, 18 Jul 12:15:02 GMT(客户端请求服务端的时间)

响应(服务端->客户端[response])

HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
Location: http://www.baidu.com(服务端需要客户端访问的页面路径)
Server:apache tomcat(服务端的Web服务端名)
Content-Encoding: gzip(服务端能够发送压缩编码类型)
Content-Length: 80(服务端发送的压缩数据的长度)
Content-Language: zh-cn(服务端发送的语言类型)
Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
Last-Modified: Tue, 18 Jul 2017 12:15:02 GMT(服务端对该资源最后修改的时间)
Refresh: 1;url=http://www.helloyoucan.com.(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
Transfer-Encoding: chunked(分块传递数据到客户端）
Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
Expires: -1//3种(服务端禁止客户端缓存页面数据)
Cache-Control: no-cache(服务端禁止客户端缓存页面数据)
Pragma: no-cache(服务端禁止客户端缓存页面数据)
Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)
Date: Tue, 18 Jul 2017 12:18:03 GMT(服务端响应客户端的时间)

12. 轮询、长轮询、长连接、WebSocket即时通讯的区别

轮询

客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。优点：后端程序编写比较容易。缺点：请求中有大半是无用，浪费带宽和服务器资源。这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。实例：短轮询不适用于那些同时在线用户数量比较大，并且很注重性能的Web应用。适于小型应用。

长轮询

客户端向服务器发送请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接（或到了设定的超时时间关闭连接），客户端处理完响应信息后再向服务器发送新的请求。优点：减少了很多不必要的http请求次数，相比之下节约了资源。缺点：服务器hold连接会消耗资源，需要同时维护多个线程，服务器所能承载的TCP连接数是有上限的，这种轮询很容易把连接数顶满。实例：WebQQ、Facebook IM。

长连接

HTTP1.1通过使用Connection:keep-alive进行长连接，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对每个请求仍然要单独发 header。

websocket

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

比较

兼容性：短轮询>长轮询>长连接>WebSocket

性能：WebSocket>长连接>长轮询>短轮询

13. 什么是会话cookie,什么是持久cookie?

cookie是服务器返回的，指定了expire time（有效期）的是持久cookie，没有指定的是会话cookie。

14. cookie和session的区别

**session 是基于 cookie 实现的。**cookie 保存在客户端浏览器中，而 session 保存在服务器上。cookie 机制是通过检查客户身上的“通行证”来确定客户身份的话，那么 session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

cookie 和 session 的区别：

存在的位置：
cookie 存在于客户端，临时文件夹中；session 存在于服务器的内存中，一个 session 域对象为一个用户浏览器服务。
安全性
cookie 是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放；session 存放于服务器的内存中，所以安全性好。
生命周期(以 20 分钟为例)
cookie 的生命周期是累计的，从创建时，就开始计时，20 分钟后 cookie 生命周期结束；
session 的生命周期是间隔的，从创建时，开始计时如在 20 分钟，没有访问 session，那么 session 生命周期被销毁。但是，如果在 20 分钟内（如在第 19 分钟时）访问过 session，那么，将重新计算 session 的生命周期。关机会造成 session 生命周期的结束，但是对 cookie 没有影响。
访问范围
cookie 为多个用户浏览器共享；session 为一个用户浏览器独享。

15. cookie、localStorage、sessionStorage的区别和使用？

cookie用来保存客户浏览器请求服务器页面的请求信息；
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）；
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。三者的共同点都是保存在浏览器端，且同源。下面是他们之间的区别：生命周期：
cookie：可以通过expires设置失效时间，不设置默认关闭浏览器即失效
localStorage：除非手动清除，否则永久保存
sessionStorage：仅在当前会话时候生效，关闭页面即失效存储大小：
cookie:4KB左右
localStorage、sessionStorage:可以保存5M的信息HTTP请求：
cookie:每次都会携带在http头中，过多使用cookie会带来性能问题
localStorage、sessionStorage:仅在客户端（即浏览器）中保存，不参与和服务器的通信易用性：
cookie:需要程序员自己封装，源生的Cookie接口不友好
localStorage、sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持应用场景：
cookie：适合识别用户登录
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息
localStorage：可以用来跨页面传递参数
sessionStorage：用来保存临时数据，防止用户刷新页面之后丢失参数

16. 如何实现浏览器内多个标签页之间的通信？

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式。这里主要讲解用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。

调用 localStorage：在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。
调用 cookie+setInterval()：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

17. GET 和 POST 请求的区别

GET 参数通过 url 传递，POST 放在 body 中。（http 协议规定，url 在请求头中，所以大小限制很小）
GET 请求在 url 中传递的参数是有长度限制的，而 POST 没有。
GET 在浏览器回退时是无害的，而 POST 会再次提交请求
GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置
GET 比 POST 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息
对参数的数据类型，GET 只接受 ASCII字符，而 POST 没有限制
GET 请求只能进行 url(x-www-form-urlencoded)编码，而 POST 支持多种编码方式
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。对于 GET 方式的请求，浏览器会把 http 的 header 和 data 一并发送出去，服务器响应200（返回数据）。而对于 POST，浏览器先发送 header，服务器响应100 continue，浏览器再发送 data，服务器响应200 ok（返回数据）。

18. 输入URL发生什么？

DNS 域名解析（域名解析成ip地址，走UTP协议，因此不会有握手过程）：浏览器将 URL 解析出相对应的服务器的 IP 地址（1. 本地浏览器的 DNS 缓存中查找 2. 再向系统DNS缓存发送查询请求 3. 再向路由器DNS缓存 4. 网络运营商DNS缓存 5. 递归搜索），并从 url 中解析出端口号
浏览器与目标服务器建立一条 TCP 连接（三次握手）
浏览器向服务器发送一条 HTTP 请求报文
服务器返回给浏览器一条 HTTP 响应报文
浏览器进行渲染
关闭 TCP 连接（四次挥手）

19. 浏览器的强制缓存和协商缓存

强制缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码; 控制字段：Expires和Catch-control 。

协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；控制字段：Last-Modified/If-Modified-Since 和 Etag/If-None-Match 。

两者的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。

较为合理的缓存方案：

HTML：使用协商缓存。
CSS&JS&图片：使用强缓存，文件命名带上hash值。

浏览器缓存的优点有：

1.减少了冗余的数据传输，节省了网费。

2.减少了服务器的负担，大大提升了网站的性能。

3.加快了客户端加载网页的速度。

20. 浏览器渲染的步骤

浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
将CSS解析成 CSS Rule Tree 。
根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
再下一步就是绘制，根据计算好的信息进行渲染整个页面，即遍历render树，并使用UI后端层绘制每个节点。

注意： 浏览器解析文档的过程中，如果遇到 script 标签，会立即解析脚本，停止解析文档（因为 JS 可能会改变 DOM 和 CSS, 如果继续解析会造成浪费）。如果是外部 script, 会等待脚本下载完成之后在继续解析文档。现在 script 标签增加了 defer 和 async 属性，脚本解析会将脚本中改变 DOM 和 css 的地方> 解析出来，追加到 DOM Tree 和 Style Rules 上。

21. 回流和重绘

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。
当页面布局和几何属性改变时就需要回流。比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变。
回流往往伴随着布局的变化，代价较大。
重绘只是样式的变化，结构不会变化。

22. 页面渲染优化

HTML 文档结构层次尽量少，最好不深于 6 层
脚本尽量放后边，避免组织页面加载
少量首屏样式可以放在便签内
样式结构层次尽量简单
脚本减少 DOM 操作，减少回流，尽量缓存访问 DOM 的样式信息
尽量减少 JS 修改样式，可以通过修改 class 名的方式解决
减少 DOM 查找，缓存 DOM 查找结果
动画在屏幕外或页面滚动时，尽量停止

23. 前端性能优化的七大手段

减少HTTP请求数量：主要是优化js、css和图片资源三个方面，因为html是没有办法避免的。合并js文件、合并css文件。
减小资源体积：可以通过以下几个方面进行实施：gzip压缩、js混淆、css压缩、图片压缩。gzip压缩主要是针对html文件来说的，它可以将html中重复的部分进行一个打包，多次复用的过程。js的混淆可以有简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)、或者可以使用php对js进行混淆加密。css压缩，就是进行简单的压缩。图片的压缩，主要也是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等的使用。这样子的做法不仅可以加快网页显示，也能减少流量的损耗。
缓存：可以通过以下几个方面来描述：DNS缓存、CDN部署与缓存、http缓存。由于浏览器会在DNS解析步骤中消耗一定的时间，所以，对于一些高访问量网站来说，做好DNS的缓存工作，就会一定程度上提升网站效率。CDN缓存，CDN作为静态资源文件的分发网络，本身就已经提升了，网站静态资源的获取速度，加快网站的加载速度，同时也给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度。http缓存，也是给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复的下载，从而提升整体网页的加载速度。
优化网页渲染：css的文件放在头部，js文件放在尾部或者异步、尽量避免內联样式。css文件放在「头部加载」，可以保证解析DOM的同时，解析css文件。因为，CSS（外链或内联）会阻塞整个DOM的渲染，然而DOM解析会正常进行，所以将css文件放在头部进行解析，可以加快网页的构建速度。假设将其放在尾部，那时DOM树几乎构建，这时就得等到CSSOM树构建完成，才能够继续下面的步骤。「js放在尾部」：js文件不同，将js文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续DOM的解析，后续DOM的渲染也将被阻塞，而且一旦js中遇到DOM元素的操作，很可能会影响。「避免使用内联样式」，可以有效的减少html的体积，一般考虑内联样式的时候，往往是样式本身体积比较小，往往加载网络资源的时间会大于它的时候。
图片加载处理：图片预加载、图片懒加载、首屏加载时进度条的显示。「图片预加载」，预加载的寓意就是提前加载内容。而图片的预加载往往会被用在图片资源比较大，即时加载时会导致很长的等待过程时，才会被使用的。常见场景：图片漫画展示时。往往会预加载一张到两张的图片。「图片懒加载」，懒加载或许你是第一次听说，但是，这种方式在开发中会被经常使用。首先，我们需要明白一个道理：往往只有看到的资源是必须的，其他资源是可以随着用户的滚动，随即显示的。所以，特别是对于图片资源特别多的网站来说，做好图片的懒加载是可以大大提升网页的载入速度的。
```
常见的图片懒加载的方式就是：在最初给图片的src设置一个比较简单的图片，然后将图片的真实地址设置给自定义的属性，做一个占位，然后给图片设置监听事件，一旦图片到达视口范围，从图片的自定义属性中获取出真是地址，然后赋值给src，让其进行加载。
```

24. 单页面应用程序（SPA）的优缺点

我们通常所说的单页面应用程序通常通过前端框架（angular、react、vue）进行开发，单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

优点：

良好的交互体验：单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅，web应用更具响应性和更令人着迷。
良好的前后端工作分离模式：后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
减轻服务器压力：单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

缺点：

首屏加载慢：如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度。解决方法：懒加载、使用CDN加速。
不利于SEO：seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，搜索引擎的基础爬虫的原理就是抓取url，然后获取html源代码并解析。如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。这样就很不利于内容被搜索引擎搜索到。解决方案：
```
- 服务端渲染：服务器合成完整的 html 文件再输出到浏览器
- 页面预渲染
- 路由采用h5 history模式
```
不适合开发大型项目：大型项目中可能会涉及大量的DOM操作、复杂的动画效果，也就不适合使用Vue、react框架进行开发。

25. 为什么要使用websocket？

因为HTTP协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者HTTP连接始终打开）。因此，工程师们一直在思考，有没有更好的方法，WebSocket就是这样发明的。

websocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。其他特点包括：

（1）建立在TCP协议之上，服务器端的实现比较容易。

（2）与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是URL。

26. 常见的浏览器兼容问题

不同浏览器的默认标签的内外边距不同；
在某些浏览器中，图片有默认的间距；
标签最低高度设置min-height不兼容问题；
IE9以下浏览器不能使用opacity透明度；

27. 面向对象和面向过程

面向对象和面向过程的主要区别是面向过程主要是以动词为主，解决问题的方式是按照顺序一步一步调用不同的函数；面向对象主要是以名词为主，将问题抽象出具体的对象，而这个对象有自己的属性和方法，在解决问题的时候是将不同的对象组合在一起使用。
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一步一步依次调用即可；面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描述某个事物在整个解决问题的步骤中的行为。

28. 封装、继承和多态

封装：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口
继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。
多态：一个类实例的相同方法在不同情形下有不同的表现形式。

29. MVC、MTV、MVVM区别

MVC（Model View Controller 模型-视图-控制器）：是一种Web架构的模式。特点：把业务逻辑、模型数据、用户界面分离开来，让开发者将数据与表现解耦。

Model：模型负责业务对象与数据库的对象(ORM)，代表数据存取层；
View：视图负责与用户的交互(页面)，代表的是系统中选择显示什么和怎么显示的部分；

models(数据库，模型);  views(HTML模板);      controllers(业务逻辑处理)  —> MVC
models(数据库，模型);  templates(HTML模板);  views(业务逻辑处理)        —> MTV

MTV（Model Templates View 模型-模板-视图）：MTV是Django独有的模式，MTV模式本质上与MVC模式没有什么差别，也是各组件之间为了保持松耦合关系，只是定义上有些许不同，Django的MTV分别代表：

Model(模型)：负责业务对象与数据库的对象(ORM)，数据存取层。该层处理与数据相关的所有事务：如何存取、如何验证有效，是一个抽象层，用来构建和操作你的web应用中的数据，模型是你的数据的唯一的、权威的信息源。它包含你所储存数据的必要字段和行为。通常，每个模型对应数据库中唯一的一张表
Template(模版)：负责如何把页面展示给用户，即表现层。该层处理与表现相关的决定：如何在页面或其他类型文档中进行显示。模板层提供了设计友好的语法来展示信息给用户。使用模板方法可以动态地生成HTML。模板包含所需HTML 输出的静态部分，以及一些特殊的语法，描述如何将动态内容插入。
View(视图)：业务逻辑层，负责业务逻辑，并在适当的时候调用Model和Template，该层包含存取模型及调取恰当模板的相关逻辑。用于封装负责处理用户请求及返回响应的逻辑。视图可以看作是前端与数据库的中间人，他会将前端想要的数据从数据库中读出来给前端。他也会将用户要想保存的数据写到数据库。
此外，Django还有一个url分发器，它的作用是将一个个URL的页面请求分发给不同的view处理，view再调用相应的Model和Template。

在MVVM里，Controller的存在感被降低了。在MVVM中，Controller不再像MVC那样直接持有Model了。想象Controller是一个Boss，数据是一堆文件（Model），如果现在是MVC，那么数据解析（比如整理文件）需要由Boss亲自完成，然而实际上Boss需要的仅仅是整理好的文件而不是那一堆乱七八糟的整理前的文件。所以Boss招聘了一个秘书，现在Boss就不再需要管理原始数据（整理之前的文件）了，他只需要去找秘书：你帮我把文件整理好后给我。那么这个秘书就首先去拿到文件（原始数据），然后进行整理（数据解析），接下来把整理的结果给Boss。所以秘书就是VM了，并且Controller（Boss）现在只需要直接持有VM而不需要再持有M了。如果再进一步理解C、VM、M之间的关系：因为Controller只需要数据解析的结果而不关心过程，所以就相当于VM把“如何解析Model”给封装起来了，C甚至根本就不需要知道M的存在就能把工作做好，前提它需要持有一个VM。那么我们MVVM中的持有关系就是：C持有VM，VM持有M。这里有一个比较争议的地方：C该不该持有M。我的答案是不该。为什么呢，因为C持有M没有任何意义。就算C直接拿到了M的数据，它还是要去让VM进行数据解析，而数据解析就需要M，那么直接让VM持有M而C直接持有VM就足够了。

MVVM组成：

M：model 数据模型，专门用来操作数据，数据的CRUD。
V：view 视图，就是我们在浏览器中所看到的页面。
VM：ViewModel 视图模型，这个是数据的核心。

MVC模式需要频繁的操作DOM，这样页面就有大量DOM绑定与监听类的操作；MVVM通过数据双向绑定让数据自动地双向同步，view修改数据自动同步model、model修改数据自动同步到view；整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。

30. SEO优化方法

SEO（Search Engine Optimization）：译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

选取正确的关键字和布局：关键字分为核心关键字，核心关键字的变体(同义词，近义词，简写，拼写错误)一级关键词，二级关键词，长尾词。一切的搜索引擎都是基于关键字进行索引。放置关键字的区域有：网站标题，网站描述，网站的元标签(这个权重几乎忽略不计)网站页面的内容。一个网站一般来讲，首页的权重是最高的，所以不要在首页上堆砌关键字，反而要集中关键字来优化。首页的关键字一般是核心关键字和主关键字为主，而类似二级关键词，长尾词等我们可以把他们放在内页里面进行优化，这样的布局是搜索引擎比较喜欢的，给以的排名也会更高。
网站内页的优化：内页优化包括标题优化，页面中的关键字布局，Alt标签，加粗，斜体，nofollow/dofollow.标签用要合理使用，你不能再写一篇文章的时候大量的出现H标签，H标签主要是用来突出主题，不可滥用，加粗标签也要节制的使用，一般一篇文章出现到3-5个就够了，Alt描述和结合实际图片展开，切勿过多堆积关键词。Nofollow的使用是很重要的，对于网站中不想分散权重的链接和页面要及时的进行Nofollow掉，使网站的权重集中起来，比如在contact us，about，支付信息都可以把这些进行Nofollow。
持续的高质量的原创文章：现在SEO的玩法更多是输出有质量的文章，毕竟是内容为王时代!而且一定要保证你的网站文章是持续，高质量，原创的文章! 要知道搜索引擎是为了及时的解决用户的需要问题，是要提高用户的体验度。所以你的文章可以围绕用户的需求来写，及时的向用户展示高质量的原创文章。
内部链接要设置好：做内链最重要指标是网站各个链接有没有出现死链接、有没有404页面?网址是否规范化?网页URL设置是否正确?robots文件是合理相互精准链接。同时要记住页面内不能用同一个锚文本进行链接，要多样化。
运用工具：例如百度统计是百度推出的一款免费的专业网站流量分析工具，能够告诉用户访客是如何找到并浏览用户的网站，在网站上做了些什么，有了这些信息，可以帮助用户改善访客在用户的网站上的使用体验。其中的优化分析还可以对你的网站进行跑分，通过它给出的结果可清晰的得知那些地方还可完善。

31. 浏览器内核

IE --> Trident
Chrome --> Webkit(Blink)
Safari --> Webkit
Firefox --> Gecko
Opera --> Presto

================================================================
以上为个人学习笔记总结，参考了许多网上大神的文章，供大家学习参考交流，如有版权问题请联系我，侵删。