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.什么闭包,闭包有什么用
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：

函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：

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