面试题随记（1）
1、行内元素和块级元素有什么区别？各自有哪些代表性的标签？
行内元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、 button。
块级元素： div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer。
行内元素和块级元素的区别
1、 行内元素不会占据整行，在一条直线上排列，都是同一行，水平方向排列；
块级元素会占据一行，垂直方向排列。
2、 块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
3、 行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
行内元素和块级元素的相互转换
行内元素转化为块元素： display:block;
块元素转化为行内元素： display:inline;
2、怎么理解 HTML 的语义化？
1、什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、写HTML代码时应注意什么？
尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
3、Doctype的作用是什么？
doctype 是html5标准网页声明，且必须声明在html文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响浏览器对于 CSS代码甚至javascript脚本的解析。
- 文档解析类型有：
BackCompat：怪异模式，
浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE,默认就是这个模式）。
CSS1Compat：
标准模式，浏览器使用W3C的标准解析渲染模式。
- 还有一种近乎模式
这三种模式的区别是什么？
标准模式：(standards mode）：页面按照HTML与CSS的定义渲染。
怪异模式：(quirks mode)模式 ：会模拟更旧的浏览器行为。
近乎模式：（almost standards）模式：会实施了一种表单元格尺寸的怪异模式
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 4.01 与 HTML5 之间的差异
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种：
提示和注释
注释：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。
提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！
4、HTML与XHTML有什么区别?
其基础语言不同
1、XHTML是基于可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。
语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
5、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？
HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和 JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
6、为什么HTML5里面不需要DTD（ Document Type Definition，文档类型定义）？如果不放入<！doctype html>标签，HTML5还会工作吗？
HTML5没有使用SGML或者 XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅须放置下面的文档类型代码，让浏览器识别HTML5文档。
如果不放入<！doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。
HTML5为什么只需要写<！doctype htm>？
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要 DOCTYPE来规范浏览器的行为（让浏览器按照它们的方式来运行）。而HTM4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的类型。
7、请描述一下 sessionStorage和 localStorage的区别。
sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。（目前最大的应该是支持5M的最大容量。）
而 localstorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。
8、localStorage和 cookie的区别是什么？
localStorage的概念和cookie相似，区别是 localStorage是为了更大容量的存储设计的。cookie的大小是受限的，并且每次请求一个新页面时， cookie都会被发送过去，这样无形中浪费了带宽。另外， cookie还需要指定作用域，不可以跨域调用。
除此之外， localStorage拥有 setlten, getItem、 removeltem、 clear等方法， cookie则需要前端开发者自己封装 setCookie和 get Cookie。但 cookie也是不可或缺的，因为 cookie的作用是与服务器进行交互，并且还是HTP规范的一部分，而 localStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。
9、请你谈谈 cookie的特点。
cookie虽然为持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有以下局限性。
（1）每个特定的域名下最多生成20个 cookie。
（2）IE6或更低版本最多有20个 cookie。
（3）IE7和之后的版本最多可以有50个 cookie。
（4） Firefox最多可以有50个 cookie。
（5） Chrome和 Safari没有做硬性限制。
IE和 Opera会清理近期最少使用的 cookie, Firefox会随机清理 cookie。
cookie最大为4096字节，为了兼容性，一般不能超过4095字节。
IE提供了一种存储方式，可以让用户数据持久化，叫作 userdata，从IE5.0就开始支持此功能。每块数据最多128KB，每个域名下最多1MB。这个持久化数据放在缓存中，如果缓存没有被清理，就会一直存在。
优点如下：
（1）通过良好的编程，控制保存在 cookie中的 session对象的大小。
（2）通过加密和安全传输技术（SSL），降低 cookie被破解的可能性。
（3）只在 cookie中存放不敏感数据，即使被盗也不会有重大损失。
（4）控制 cookie的生命周期，使之不会永远有效。数据偷盗者很可能得到一个过期的 cookie。
缺点如下：
（1）“ cookie”的数量和长度有限制。每个 domain最多只能有20条 cookie，每个cookie的长度不能超过4KB，否则会被截掉。
（2）安全性问题。如果 cookie被别人拦截了，就可以取得所有的 session信息。即使加密也于事无补，因为拦截者并不需要知道 cookie的意义，他只要原样转发 cookie就可以达到目的。
（3）有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果把这个计数器保存在客户端，那么它起不到任何作用
10、cookie和 session的区别是什么？
区别如下：
（1） cookie数据存放在客户的浏览器上， session数据存放在服务器上。
（2） cookie不是很安全，别人可以分析存放在本地的 cookie并进行 cookie欺骗。考虑到安全问题应当使用 session。
（3） session会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用 cookie。
（4）单个 cookie保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存20个 cookie。
所以个人建议可以将登录信息等重要信息存放在 session中，其他信息（如果需要保留）可以存放在 cookie中
11、防抖和节流
一、防抖 （多次触发 只执行最后一次）
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。
1. 防抖的应用场景
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存
一、节流 （规定时间内 只触发一次）
节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。
1. 节流的应用场景
鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
浏览器播放事件，每个一秒计算一次进度信息等。
12、闭包
什么是闭包？闭包的作用？闭包的缺点
1、闭包是定义在函数内部的函数，可以访问函数的内部变量。
2、作用： （1）可以读取函数内部变量 （2） 让这些变量的值始终保持在内存中
3、由于闭包会使得函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页性能问题。在ie中可能会造成内存泄漏。解决方案是：在退出函数前，将不使用的局部变量删除。
13、DNS域名解析
1. 域名解析协议
将域名和 IP 地址相互映射，将域名映射成 IP 地址称为正向解析，将 IP 地址映射成域名称为反向解析。DNS 协议可以使用 UDP 或者 TCP 进行传输，使用的端口号都为 53。但大多数情况下 DNS 都使用 UDP 进行传输。
2. 域名详解
- 根域名
ICANN 管理着所有的顶级域名，所以它是最高一级的域名节点，被称为根域名（root domain）。在有些场合，www.xxx.com被写成www.xxx.com.，即最后还会多出一个点。这个点就是根域名。 - 顶级域名
顶级域名（TLD），即最高层级的域名。简单说，就是网址的最后一个部分。比如，网址www.baidu.com的顶级域名就是.com。 - 通用顶级域名（gTLD），比如
.com - 国家顶级域名（ccTLD），代表不同的国家和地区，比如
.cn（中国）
- 二级域名
二级域名(Second Level Domain,SLD) 在通用顶级域名或国家顶级域名之下具有不同的意义： - 通用顶级域名下的二级域名：一般是指域名注册人选择使用的网上名称，如
yahoo.com（商业组织通常使用自己的商标、商号或其他商业标志作为自己的网上名称，如baidu.com） - 国家顶级域名下的二级域名：一般是指类似于通用顶级域名的表示注册人类别和功能的标志。例如，在
.com.cn域名结构中，.com此时是置于国家顶级域名.cn下的二级域名，表示中国的商业性组织，以此类推。
- 三级域名
三级域名是形如www.baidu.com的域名，可以当做是二级域名的子域名，特征为域名包含两个.。对于域名所有者/使用者而言，三级域名都是二级域名的附属物而无需单独费用。三级域名甚至不能称为域名，一般称之为域名下的 “二级目录”。
完整域名解析过程
以正向解析为例（域名解析成 IP 地址）：
1）首先搜索浏览器的 DNS 缓存，缓存中维护一张域名与 IP 地址的对应表；
2）若没有命中，则继续搜索操作系统的 DNS 缓存；
3）若仍然没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器查询自己的 DNS 缓存，查找成功则返回结果（注意：主机和本地域名服务器之间的查询方式是递归查询）；
4）若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行查询，通过以下方式进行迭代查询（注意：本地域名服务器和其他域名服务器之间的查询方式是迭代查询，防止根域名服务器压力过大）：
- 首先本地域名服务器向根域名服务器发起请求，根域名服务器是最高层次的，它并不会直接指明这个域名对应的 IP 地址，而是返回顶级域名服务器的地址，也就是说给本地域名服务器指明一条道路，让他去这里寻找答案
- 本地域名服务器拿到这个顶级域名服务器的地址后，就向其发起请求，获取权限域名服务器的地址
- 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址
4）本地域名服务器将得到的 IP 地址返回给操作系统，同时自己将 IP 地址缓存起来
5）操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起来
6）至此，浏览器就得到了域名对应的 IP 地址，并将 IP 地址缓存起来
Http (HTTP-Hypertext transfer protocol) 是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。
Https（全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯，例如交易支付等方面 。
区别：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
http核心：
http本身是一种协议，也是一种请求。每次发送一次请求，无论是get请求还是post请求，它都需要两部分组成：头部和身体。
传输量：get请求传输量较小，post请求传输量较大
安全性：get不安全，post相对安全
缓存方式：get请求过程中会有缓存，而post是没有缓存的
http的特点：
1、简单快速：请求服务时，只需传送请求方式和路径
2、较灵活：http允许传输任意类型的数据对象
3、无连接：发送一次请求后，服务端和客户端就会自动断开连接
4、无状态：传输时不会记录当前的一些信息
https的核心：
https是以http为基础，SSL加密的一种协议
作用：不仅能够保证数据传输的安全，而且能够确认网站的真实性。
https的特点：
优点：安全性比较高、能够提供更幼稚的加密服务、使用的规模不断增大
缺点：技术门槛比较高、成本较高、https在加密的同时，增加了服务器的压力，降低了服务器的访问速度。
http2.0的核心
http2.0协议在http1.1 http1.0及以前的版本基础上，进行相应的修改
http2.0的特点：
二进制协议：使用二进制传输数据
多工：客户端和服务端能够同时发送多个请求或响应，避免了“堵塞”。
头信息压缩：头部使用gzip压缩后在进行发送，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段，只发送索引号，这样就提高速度了
服务器推送：允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送。
15、GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。
为什么要使用Graphql：
- 接口数量众多维护成本高
- 接口扩展成本高
- 接口响应的数据格式无法预知
- 减少无用数据的请求， 按需获取
- 强类型约束（API的数据格式让前端来定义，而不是后端定义）
获取对象所有键的方法有两种： Object.getOwnPropertyNames() ; Object.keys() ;
17、后端渲染、前端渲染、同构渲染
后端渲染：传统的 ASP、Java 或 PHP 的渲染机制
优势：
- 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
- SEO
- 服务端渲染不用关心浏览器兼容性问题（随着浏览器发展，这个优点逐渐消失）
- 对于电量不给力的手机或平板，减少在客户端的电量消耗很重要
前端渲染：使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用
优势：
- 局部刷新。无需每次都进行完整页面请求
- 懒加载。如在页面初始时只加载可视区域内的数据，滚动后 rp 加载其它数据，可以通过 react-lazyload 实现
- 富交互。使用 JS 实现各种酷炫效果
- 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
- 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
- JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用
同构渲染
同构渲染简单来说就是一份代码，服务端先通过服务端渲染(server-side rendering)，生成html以及初始化数据，客户端拿到代码和初始化数据后，通过对html的dom进行patch和事件绑定对dom进行客户端激活(client-side hydration)，这个整体的过程叫同构渲染。
优点：
- 有助于 SEO
- 提高首屏性能
缺点：
- 性能
- 不容忽视的服务器端和浏览器环境差异
服务端渲染：
简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，当用户第一次请求页面时，客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。
优点：
- 首屏渲染快
- 利于SEO
- 可以生成缓存片段，生成静态化文件
缺点:
- 服务端压力较大
- 开发条件受限
- 学习成本相对较高
18、diff算法
前端的diff算法是通过以下步骤来实现的
步骤一：用JS对象模拟DOM树 步骤二：比较两棵虚拟DOM树的差异 步骤三：把差异应用到真正的DOM树上
同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比 首先对根元素进行对比，如果根元素发生改变就直接对根元素替换 如果根元素没有发生改变的话，再对下一层元素进行对比，如果对比发现元素发生删除，就执行删除，发现元素被替换就执行替换，发现添加了新的元素就执行添加 对比的同时，会通过key值来判断元素是否发生改变，判断元素是仅仅位置发生改变还是需要整个替换或删除 如果不是元素发生改变的话，再对内容进行对比，如果是内容发生改变的话，就直接修改内容 其实就是进行逐层对比，再通过不同的对比来判断执行不同的操作
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
- 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
- 确定入口：根据配置中的 entry 找出所有的入口文件；
- 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
- 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
不同的作用
- Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到
loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 - Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法
- Loader在
module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options） - Plugin在
plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
什么是函数重载？
浙公网安备 33010602011771号