2019前端面试知识点汇总

前言：最近在找工做，本身整理了一些前端面试知识点，在此与你们分享一下！

1.前端须要注意哪些 SEO：
合理的 title、description、keywords：搜索对着三项的权重逐个减少，title 值强调重点便可，重要关键词出现不要超过 2 次，并且要靠前，不一样页面 title 要有所不一样；description 把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面 description 有所不一样；keywords 列举出重要关键词便可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提升网站速度：网站速度是搜索引擎排序的一个重要指标

2.<img>的title和alt有什么区别：
title是global attributes之一，一般当鼠标滑动到元素上的时候显示。
alt是<img>的特有属性，是图片内容的等价描述，用于图片没法加载时显示，搜索引擎会重点分析。

3.什么是 web 语义化,有什么好处：
web 语义化是指经过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。 HTML 标签的语义化是指：经过使用包含语义的标签（如 h1-h6）恰当地表示文档结构 css 命名的语义化是指：为 html 标签添加有意义的 class，id 补充未表达的语义：
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面，有利于收录
便团队项目的可持续运做及维护

4.HTTP method
一台服务器要与 HTTP1.1 兼容，只要为资源实现GET和HEAD方法便可
GET是最经常使用的方法，一般用于请求服务器发送某个资源。
HEAD与 GET 相似，但服务器在响应中值返回首部，不返回实体的主体部分
PUT让服务器用请求的主体部分来建立一个由所请求的 URL 命名的新文档，或者，若是那个 URL 已经存在的话，就用干这个主体替代它
POST起初是用来向服务器输入数据的。实际上，一般会用它来支持 HTML 的表单。表单中填好的数据一般会被送给服务器，而后由服务器将其发送到要去的地方。
TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个 TRACE 响应并在响应主体中携带它收到的原始请求报文。TRACE 方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
OPTIONS方法请求 web 服务器告知其支持的各类功能。能够查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
DELETE请求服务器删除请求 URL 指定的资源

5.从浏览器地址栏输入 url 到显示页面的步骤(以 HTTP 为例)
在浏览器地址栏输入 URL
浏览器查看缓存，若是请求资源在缓存中而且新鲜，跳转到转码步骤
若是资源未缓存，发起新请求
若是已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，不然与服务器进行验证。
检验新鲜一般有两个 HTTP 头进行控制Expires和Cache-Control：
HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期
HTTP1.1 增长了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析 URL获取协议，主机，端口，path
浏览器组装一个 HTTP（GET）请求报文
浏览器获取主机 ip 地址
打开一个 socket 与目标 IP 地址，端口创建 TCP 连接，三次握手以下：

客户端发送一个 TCP 的SYN=1，Seq=X的包到服务器端口
服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
客户端发送ACK=Y+1， Seq=Z

TCP 连接创建后发送 HTTP 请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用 HTTP Host 头部判断请求的服务程序
服务器检查HTTP 请求头是否包含缓存验证信息若是验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备 HTTP 响应，可能须要查询数据库等操做
服务器将响应报文经过 TCP 链接发送回浏览器
浏览器接收 HTTP 响应，而后根据状况选择关闭 TCP 链接或者保留重用，关闭 TCP 链接的四次握手以下：

主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文

浏览器检查响应状态吗：是否为 1XX，3XX， 4XX， 5XX，这些状况处理与 2XX 不一样
若是资源可缓存，进行缓存
对响应进行解码（例如 gzip 压缩）
根据资源类型决定如何处理（假设资源为 HTML 文档）
解析 HTML 文档，构件 DOM 树，下载资源，构造 CSSOM 树，执行 js 脚本，这些操做没有严格的前后顺序，如下分别解释
构建 DOM 树：

解析过程当中遇到图片、样式表、js 文件，启动下载
构建CSSOM 树：

根据 DOM 树和 CSSOM 树构建渲染树:

从 DOM 树的根节点遍历全部可见节点，不可见节点包括：1）script,meta这样自己不可见的标签。2)被 css 隐藏的节点，如display: none
对每个可见节点，找到恰当的 CSSOM 规则并应用
发布可视节点的内容和计算样式

js 解析以下：

浏览器建立 Document 对象并解析 HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate 为 loading
HTML 解析器遇到没有 async 和 defer 的 script 时，将他们添加到文档中，而后执行行内或外部脚本。这些脚本会同步执行，而且在脚本下载和执行时解析器会暂停。这样就能够用 document.write()把文本插入到输入流中。同步脚本常常简单定义函数和注册事件处理程序，他们能够遍历和操做 script 和他们以前的文档内容
当解析器遇到设置了async属性的 script 时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，可是解析器不会停下来等它下载。异步脚本禁止使用 document.write()，它们能够访问本身 script 和以前的文档元素
当文档完成解析，document.readState 变成 interactive
全部defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用 document.write()
浏览器在 Document 对象上触发 DOMContentLoaded 事件
此时文档彻底解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入而且全部异步脚本完成载入和执行，document.readState 变为 complete,window 触发 load 事件

显示页面（HTML 解析过程当中会逐步显示页面）

6.HTTP request 报文结构是怎样的
首行是Request-Line包括：请求方法，请求 URI，协议版本，CRLF（回车换行）
首行以后是若干行请求头，包括general-header，request-header或者entity-header，每一个一行以 CRLF 结束
请求头和消息实体之间有一个CRLF 分隔
根据实际请求须要可能包含一个消息实体

7.HTTP response 报文结构是怎样的
首行是状态行包括：HTTP 版本，状态码，状态描述，后面跟一个 CRLF
首行以后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个 CRLF 空行分隔
最后是一个可能的消息实体

8.如何进行网站性能优化
content 方面
减小 HTTP 请求：合并文件、CSS 精灵、inline Image
减小 DNS 查询：DNS 查询完成以前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询
避免重定向：多余的中间访问
使 Ajax 可缓存
非必须组件延迟加载
将来所需组件预加载
减小 DOM 元素数量
将资源放到不一样的域下：浏览器同时从一个域下载资源的数目有限，增长域能够提升并行下载量
减小 iframe 数量
不要 404

Server 方面
使用 CDN
添加 Expires 或者 Cache-Control 响应头
对组件使用 Gzip 压缩
配置 ETag
Flush Buffer Early
Ajax 使用 GET 进行请求
避免空 src 的 img 标签

Cookie 方面
减少 cookie 大小
引入资源的域名不要包含 cookie

css 方面
将样式表放到页面顶部
不使用 CSS 表达式
使用不使用@import
不使用 IE 的 Filter

Javascript 方面
将脚本放到页面底部
将 javascript 和 css 从外部引入
压缩 javascript 和 css
删除不须要的脚本
减小 DOM 访问
合理设计事件监听器

图片方面
优化图片：根据实际颜色须要选择色深、压缩
优化 css 精灵
不要在 HTML 中拉伸图片
保证 favicon.ico 小而且可缓存

移动方面
保证组件小于 25k
Pack Components into a Multipart Document

9.什么是渐进加强
渐进加强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证全部人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则以下:

全部浏览器都必须能访问基本内容
全部浏览器都必须能使用基本功能
全部内容都包含在语义化标签中
经过外部 CSS 提供加强的布局
经过非侵入式、外部 javascript 提供加强功能

10.web开发中会话跟踪的方法有哪些
cookie
session
url重写
隐藏input
ip地址

11.doctype是什么,举例常见doctype及特色
<!doctype>声明必须处于HTML文档的头部，在<html>标签以前，HTML5中不区分大小写
<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
现代浏览器的html布局引擎经过检查doctype决定使用兼容模式仍是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在HTML4.01中<!doctype>声明指向一个DTD，因为HTML4.01基于SGML，因此DTD指定了标记规则以保证浏览器正确渲染内容
HTML5不基于SGML，因此不用指定DTD

12.如何进行网站性能优化
content方面：
减小HTTP请求：合并文件、CSS精灵、inline Image
减小DNS查询：DNS查询完成以前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
避免重定向：多余的中间访问
使Ajax可缓存
非必须组件延迟加载
将来所需组件预加载
减小DOM元素数量
将资源放到不一样的域下：浏览器同时从一个域下载资源的数目有限，增长域能够提升并行下载量
减小iframe数量
不要404

Server方面：
使用CDN
添加Expires或者Cache-Control响应头
对组件使用Gzip压缩
配置ETag
Flush Buffer Early
Ajax使用GET进行请求
避免空src的img标签

Cookie方面：
减少cookie大小
引入资源的域名不要包含cookie

css方面：
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

Javascript方面：
将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不须要的脚本
减小DOM访问
合理设计事件监听器

图片方面：
优化图片：根据实际颜色须要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片
保证favicon.ico小而且可缓存

移动方面：
保证组件小于25k
Pack Components into a Multipart Documentary

13.HTTP状态码及其含义
1XX：信息状态码
2XX：成功状态码
200 OK：请求成功，请求所但愿的响应头或数据体将随此响应返回
3XX：重定向
4XX：客户端错误
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
5XX: 服务器错误
500 Internal Server Error:

14.css sprite是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。经过background-position和元素尺寸调节须要显示的背景图案。
优势：
减小HTTP请求数，极大地提升页面加载速度
增长图片信息重复度，提升压缩比，减小图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能须要重新布局整个图片，样式

15.display: none;与visibility: hidden;的区别
联系：它们都能让元素不可见
区别：
display:none;会让元素彻底从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失因为元素从渲染树消失形成，经过修改子孙节点属性没法显示；visibility: hidden;是继承属性，子孙节点消失因为继承了hidden，经过设置visibility: visible;可让子孙节点显式
修改常规流中元素的display一般会形成文档重排。修改visibility属性只会形成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

16.css hack原理及经常使用hack
原理：利用不一样浏览器对CSS的支持和解析结果不同编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释

17.link与@import的区别
link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套致使串行下载，出现FOUC
link能够经过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可使用@import对老浏览器隐藏样式
@import必须在样式规则以前，能够在css文件中引用其余文件
整体来讲：link优于@important

18.PNG,GIF,JPG的区别及如何选择正确的图片格式
GIF:
8位像素，256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画
JPEG：
颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG：
有PNG8和truecolor PNG
PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮

19.什么是FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。解决方法：把样式表放到文档的head

20.sessionStorage,localStorage,cookie区别
都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，做为会话标识，服务器可修改cookie；web storage不会发送到服务器
cookie有path概念，子路径能够访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其余文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每一个cookie不能超过4k。web storage大小支持能达到5M

20.javascript跨域通讯
同源：两个文档同源需知足
协议相同
域名相同
端口相同
跨域通讯：js进行DOM操做、通讯时若是目标与当前窗口不知足同源条件，浏览器为了安全会阻止跨域操做。跨域通讯一般有如下方法
若是是log之类的简单单项通讯，新建<img>,<script>,<link>,<iframe>元素，经过src，href属性设置为目标url。实现跨域请求
若是请求json数据，使用<script>进行jsonp请求
现代浏览器中多窗口通讯使用HTML5规范的targetWindow.postMessage(data, origin);其中data是须要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
内部服务器代理请求跨域url，而后返回数据
跨域请求数据，现代浏览器可以使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *便可像普通ajax同样访问跨域资源

21.javascript有哪几种数据类型
六种基本数据类型

undefined
null
string
boolean
number
symbol(ES6)
一种引用类型

Object

22.什么闭包,闭包有什么用
闭包是在某个做用域内定义的函数，它能够访问这个做用域内的全部变量。闭包做用域链一般包括三个部分：

函数自己做用域。
闭包定义时的做用域。
全局做用域。
闭包常见用途：

建立特权方法用于访问控制事件处理程序及回调