文章目录
前端基础题
- 简述css中的animation、transition、transform、translate
- 简述css中translate X与left的区别与使用场景
- 说出3种方法：定义一个长度为100的数组，井且填充值都为1
- 实现Promise .race() polyfill
- 什么是防抖和节流?
- 简述跨域问题与解决方案
- xhr&fetch
React
- React中的setState() 是同步还是异步的?
- 介绍React中的受控组件和非受控组件
HTML
- doctype是什么?
<!doctype>声明必须处于HTML文档的头部，在标签之前。
这玩意不是一个HTML标签，用于告诉浏览器当前的HTML版本， 现代浏览器通过这个标签来决定使用兼容模式还是标准模式对文档进行渲染。HTML5不用指定DTD，HTML4.01中这个标签声明指向一个DTD.
HTML 5这样声明<!doctype html> - < keygen>是正确的HTML 5标签吗?
< keygen>标签规定用于表单的密钥对生成器字段，当提交表单时， 私钥存储在本地，公钥发送到服务器。是HTML 5标签。 - figure标签是啥?
< figure >标签规定独立的流内容(图像、图表、照片、代码等等)， figure元素的内容应该与主内容相关，但如果被删除， 则不应对文档流产生影响， 使用< figcaption>元素为figure添加标题(caption). - HTML 5支持块级超链接吗?
例如：
<article>
<a herf='#'>
<h1>Hello</h1>
<p>I am p </p>
</a>
</article>
HTML5中< a>元素表现为一个超链接， 支持任何行内元素和块级元素。
- < input>和< textarea>有啥区别?
在Chrome上会是inline -block， 但是FF(火狐)上会是block。
< input>是一个单行输入框，有value属性( value属性指定初始值)， 但是它不能自动换行；用来放置字数较少的单行文字内容
是一个多行输入框， 没有value属性， 但是它能自动换行；一般让用户可以输入多行文字， 输入的文字信息量相比较大 - 行内元素有哪些?块级元素有哪些?空(void) 元素有那些?
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h 6、blockquote
空元素：即系没有内容的HTML元素， 例如：br、meta、hr、link、input、img
HTML属性
- img标签的title和alt属性有哈区别?
title为图片添加附加描述信息， 鼻标到图片上会弹出小白框的描述信息，alt是图片的等价描述， 用于图片加载不出来的使用， - HTML中img标签的资源加载会因为CSS藏属性设置而取消吗?
不会， 不论CSS设置元素是否显示隐藏都会触发资源加载， - HTML全局属性
好多， 常用的就class、id、style、title、data -*、drag able等， 看MDN文档悬靠谱。 - bdo标签是否可以改变文本方向?
可以， 标签允许你指定文字方向并载用于文本方向计算的双向算法， 配合dir属性。
text -align(设置对象中文本的对齐方式)
writing -mode(设置文本的书写方向)
dir(direction) 设置文本方向的属性 - 下列代码中scope属性是做什么的?
<article>
<h1>Hello</h1>
<style scoped>
p{
color:'#fff'
}
</style>
<p>I am p </p>
</article>
<article>
<h1>Hello</h1>
<p>I am p </p>
</article>
scoped属性是一个布尔属性， 如果使用属性， 则样式仅仅应用到style元素的父元素及其子元素。
- read - only和disable的区别?
readonly属性规定输入字段为只读，
只读字段是不能修改的。不过， 用户仍然可以使用tab键切换到该字段， 还可以选中或拷贝其文本，disabled属性规定应该禁用input元素。
被禁用的input元素既不可用， 也不可点击， 可以设置disabled属性， 直到满足某些其他的条件为止(比如选择了一个复选框等等)， 然后， 就需要通过JavaScript来删除disabled值， 将input元素的值切换为可用，disabled的值在表单提交中不会传递到后端。 - HTML 5新增了哪些内容或API， 使用过哪些
canvas ， video - HTML 5新特性
面布(Canvas)
地理(Geolocation)
音频、视频(audio，video)
local Storage和session Storage
webworker ，websoket
header、nav、footer、aside、article、section - 用一个div模拟textarea的实现
利用editable属性， 人员选择框， 编标器可能利用了这个属性， 同时结合了textarea - 简述一下src与href的区别
href是指向网络资源所在位置， 建立和当前元素(描点) 或当前文档(链接) 之间的链接， 用于超链接，5rc是指向外部资源的位置， 指向的内容将会嵌入到文档中当前标签所在位置； 在请求src资源时会将其指向的资源下载并应用到文档内， 例如js脚本，img图片和frame等元素。当浏览器解析到该元素时， 会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，学似于将所指向资源嵌入当前标签内，这也是为什么梅js脚本放在底部而不是头部。 - select和input的描述， 以及一些HTML 5新增的类型， 比如number ， Date
HTML语义化等
- 什么是Web语义化， 有啥好处?
一个良好的页面标准是去掉样式之后依旧可读，Web语义化后意味着HTML标记本身包含信息，语盲化意味着CSS命名语义化，HTML标签语义化， 通过恰当正确的使用包含语义的标签， 去掉杨时候页面呈现的结构依旧清浙，盲人读屏器更好阅读，提察引擎更好理解和收录，构建语义网，达成万维网设计的初衷，团队更好运维。 - 如何为有功能限制的浏览提供网页?
两个方案，渐进增强和优雅降级，如果使用渐进增强，意味着我们针对低版本浏览器进行构建出一个具备基本功能的原型，然后再为高级浏览器提供优化以追加功能达到更好的用户体验，优雅降级意味着我们构建是基于高版本的，为低版本只提供功能受限刚好够用的服务，通过特性检测，浏览版本检测来实施。 - title与h1的区别
title描述的是网站的标题， 或音说是当前页面的标题， 会在标签上显示， 放在head标签里面，h1标签一股用来描述文章标题大小 - b与strong的区别
strong用于加粗，b(bold) 二音表现形式都是加粗， 但是一个语义是强调和标明重点， 一个语义就是粗体， 强调的话用斜体也可以表达这个语义，比如i标签
盲人朋友使用阅读设备阅读网络时：<strong会重读，< b>不会， 无障碍浏览 - i与em的区别
i表示强调， 一般用于某些学术名词， 会用斜体字表示， 是italic的筒写，em(emphasize) 也是强调， 但是一般用来强调整段内用，会用斜体表示 - dl、dt、dd语义
< dl>< dt>< dd>是一组合标签， 使用了dt,dd景外层就必须使用dl包裹,默认dd列表内容会一定缩进，dl(definitionlist)，dt( definition title )， 通常用于描述术语定义， 比如词汇表。 - table.tr，th.td语义
与上面类似，tr(table-row)，th( table -head)，td(datacell)
CSS
盒子模型
- box-sizing
因为W3C和IE盒子模型存在差异，W3C盒模型的宽度是内容宽度， IE的宽度包括border-padding-content宽度。 - 垂直居中的方法
·行内元素垂直水平居中：line-height、text-align、vertical-align
text-align：设置块元素中行内元素的水平对齐方式
line-height：通过将其设置为与父容器高度一致从而实现垂直居中
vertical-align：基于基线的垂直对齐 - 块元素垂直水平中：
父容器与子容器宽高未知：absolute+translate。
子容器宽高已知：absolute+margin负边距。 8868
flex设置父容器：justify-content：center；align-items：center；
甚至可以用calc来计算水平垂直偏移 - IFC
- BFC
块级格式化上下文，是页面上一个独立的渲染区域，容器内的子元素不会在布局上影响外面的元素。可以用来清除内部浮动造成的高度坍塌， 清除边距叠加等。通过float、overflow：非visible、display：inline-block/table-cell或position：absolute/fixed可以创建。 - 啥是外边距折叠
相邻两个或多个margin会合并成一个margin， 取其中较大的值， 而不是相加， 解决办法创建BFC。margincollapsing仅仅发生在BFC， IFC不会， 当把元素的float属性设为left， 它们都不在正常流中， 更不在BFC中了，同样不论水平还是竖直方向，都不会发生叠加。 - 浮动清除
三种办法， 新增clear属性标标签， 伪元素设置clear属性， 如clearfix：after{clear：both} ， 触发浮动元素父元素的BFC来闭合浮动。 - position为absolute元素的包含块
position：absolute通过指定元素相对于最近的非static定位祖先元素的偏移
如果是该元素’position：absolute’， 他的包含块是最近的position为absolute、relative、fixed的祖先元素组成(不一定是块元素)
如果最近的position为absolute、relative、fixed的祖先元素是一个行级元素， 那么包含块是围绕着第一行与最后一行的padding boxes构成的一个盒， 还可能受到direction的值影响。
其他情况下(最近的position为absolute、relative、fixed的祖先元素不是一个行级元素) 那么， 包含块为position为absolute、relative、fixed祖先元素的padding边界构成。
最后如果没有找到定位了的祖先元素的话， 那么包含块就是初始包含块( initial containing block) . - 浮动原理
浮动出现的最开始出现的意义是用来让文字环绕图片而已， 浮动会脱离文档流， 创建BFC。 - 为什么浮动会造成高度坍塌?
因为浮动元素脱离文档流， 创造独立BFC， 若盒元素没有高度能撑开容器就会坍塌。
文字排版
- direction属性
direction属性规定文本的方向/书写方向。
·CSS的unicode-bidi属性和direction属性一起决定了如何处理文档中的双向文本( bidirectional text)双向文本，用于处理某教阿拉伯文和希伯来文这种左行的文字和右行文字一起出现时如何处理的问题 - writing-mode(设置文本的书写方向)
writing-mode原本设计的是控制内联元素的显示的(即所谓的文本布局-Text Layout) 。因为在亚洲， 尤其像中国这样的东亚国家， 存在文字的排版不是水平式的， 而是垂直的， 例如中国的古诗古文。writing-mode：vertical-rl(Ir) 。 - baseline
line-height (行高) ， 相邻文本行基线间的距离。那什么是基线呢?对于文字“Benjamin-xx工程师”， 来说基线( baseline) 并不是汉字文字的下端沿， 而是英文字母“x”的下端沿。 - white-space
css属性是用来设置如何处理元素中的空白， 连续的空白符会被合并， 换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。 - word-break
指定了怎样在单词内断行，比如某些情况下单词很长，那么就会出现单独为这个单词设一行，然后上一行单词结尾处留下大段空白的情况，还有写多语言混写情况下的断行。 - 未知宽高居中
- 对栅格的理解
选择器
- CSS选择器有哪些?
通用选择器
#X id选择器
.X class选择器
X Y后代选择器
X元素选择器
·X>Y子元素选择器
·X+Y直接兄弟选择器
.X~Y之后所有兄弟选择器
属性选择器和一些匹配属性选择器
[:checked] 选择框、复选框、下拉框选中状态下的元素
一些伪类选择器
一些伪元素选择器 - 伪类和伪元素的区别
伪类是逻辑上存在但在文档树中没标识的分类，伪元素代表某个元素的子元素但不存在与文档树中，伪元素要用双冒号。 - 选择器的优先级怎么规定呢?
一般而言， 选择器越特殊， 优先级越高， 选择器指向越准确， 优先级越高， !important>ID选择器>类选择器>标签选择器。 - only选择器的作用是?
@media only screen and (max-width：1024px) {argin：0}停止旧版本浏览器解析选择器的其余部分， only用来定某种特定的媒体类型， 可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持MediaType的设备隐藏样式表的。
属性
- em和rem
rem相对根元素的字体大小，em相对当前元素的字体大小。 - postion的值
absolute ，fixed，relative，static， sticky。 - 选择器优先级问题， 比如将style标签写在body后与body前有什么区别， 比如同一dom应用多个class其应该如何表现， 比如class a定义颜色为blue ，classb定义颜色为red，同时应用到dom上，dom作何显示。
style写在body前意味着在浏览器默认样式应用之前生效， 可以避免页面fouc(无样式内容闪烁)， 写在后面就会出问题了。
a，b样式谁前谁后，选择器解析是从右向左的，同优先级后面的样式会要盖前面的。 - css sprite是啥?有什么优缺点
CSS精灵， 减少请求， 但是难维护， 但是更换风格方便，改一张图就行， 图片合并麻烦。 - display：none；与visibility：hidden；的区别
display：none；让元素完全从渲染树中消失，渲染时不占据空间，visibility：hidden；不会让元素从追染树中消失， 只是内容不可见， 但是依旧占据空间，display：none；是非继承属性， visibility是继承的， - css hack原理及常用hack
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器的样式， 常见hack有IE条件注释， 选择器hack、属性hack， - specified value、computed value、used value计算方法
- specified value ：如果样式表设置了值就用样式表的， 没有， 若这个属性是继承的就从父元素继承， 香则就用CSS规范指定的初始值。
- computed value ：根据规范定义的行为进行计算， 如em、rem， 百分比，
- used value ：属性计算后的最终值，大多数可以通过window.getComputedStyle获得。
- link与@import的区别
link是HTML的方式， @import是CSS的方式， link支持最大程度的并行下载， @import过多嵌套会导致串行下载。link优先级更高。 - link的rel=T alternate stylesheet "是啥?
可以用来指定候选样式，通过disabled属性来确定是否生效， 实现皮肤切换， 夜间模式等， - block和inline元素的区别?
block元素处于常规流中， 如果width没有设置，会自动充满父容器， 可以应用margin/padding， 独占一个水平空间，vertical-align无效。
inline元素不会换行，margin/padding垂直方向无效， height由line - height确定， 浮动或者绝对定位会转block ， - PNG、GIF、JPG区别和选择
GIF有动画需求， 支持透明，JPEG有损压缩，不支持透明，适合张片，PNG质量高支持透明，适合图标、背景、按钮， 谷歌家新的webp结合了jpeg和png的优点， - CSS有哪些继承属性
文字排版：font，text-align， vertical -align等，color、cursor、line - height、visibility . - IE 6常见BUG
不支持min- height - 什么是FOUC?如何避免
默认样式先生效， 然后自定义样式表加载后生效造成页面闪一下， 办法就是把样式表放到head，script标签放Body后是为了避免JS的DOM操作堵塞渲染。 - CSS属性区分大小写吗?
HTML，CSS都对大小写不敏感。 - 行内(inline) 元素设置margin -top和margin - bottom是否起作用?
不起作用。 - 对内联元素设置padding -top和padding - bottom是否会增加它的高度?
不起作用。 - 设置p的font-size：10rem，当用户重置或抱曳浏览器窗口时，文本大小是否会也随着变化?
不会
·[:checked] 作用哪些?
选择框(select) 、复选框(checkbox) 、下拉框、radio， - 在HTML文本中， 伪类：root总是指向html元素?
可能不是， 如果是片段HTML的话则为片段的根。 - translate() 方法能移动一个元素在z轴上的位置?
不能， translate) 方法只能改变x轴， y轴上的位移。 - 描述下“reset”CSS文件的作用和使用它的好处
作用以及好处：因为各个浏览器默认对CSS的渲染有差异， “reset"CSS通过重新定义标签样式， 对浏览器进行默认样式“清零”重置， 样式保持一致， 减少程序猿的心里负担， 我没设置就没效果。不足在于增加css文件， 多此一举。 - 如何优化网页的打印样式?
< link rel="stylesheet"type="text/css"media="print"href=“yyy.css”/>打印样式表中最好不要用背景图片， 因为打印机不能打印CSS中的背景。 - 书写高效CSS时会有哪些问题需要考虑?
样式是：从右向左的解析一个选择器， ID最快， Universal最慢有四种类型的key selector， 解析速度由快到慢依次是：ID、class、tag和universal， - 你最喜欢的图片香换方法是什么?
icon font， 伪元素， backgroud 38 - CSS实现列表逆序
col reversed>使用reversed属性， 仅H 5支持， - CSS做埋点追踪分析
简单来说就是通过一些特殊的选择器或者CSS的一些媒体查询等与语法还有Hack来判断状态， 利用资源请求的跨域性向后端发信息， - display：table-cell作用
设置了display：table-cell的元素对宽度高度敏感， 对margin值无反应， 响应padding属性， 基本上就是活脱脱的一个td标签元素了- display：table-cell与大小不固定元素的垂直居中
text-align：center；vertical-align：middle；display：table-cell； - display：table-cell与两栏自适应布局
ie6使用display：inline-block替代 - .display：table-cell下的等高布局
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以， 很多时候， 我们需要等高布局的时候， 就可以借助display：table-cell属性， 说到table-cell的布局， 不得不说一下“匿名表格元素创建规则”： - display：table-cell下的列表布局，可以替代float
使用table-cell还可以实现很多的布局， 需要自己去发挥想象。总结下来也就需要记住几点， 设置了display：table-cell的元素具有以下特性。- text-align、vertical-align等对齐属性起作用， margin不起作用。宽高百分比值不起作用。
- 会生成虚拟的table、tr把自己包裹住， 如果有相邻的兄弟元素也被设置了table-cell， 则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住， 并一行等高显示
- 多个table-cell元素会占满被设置了display：table的元素的宽度， 如果一个元素被设置了宽度， 那么其他剩余的table-cell元素会占满剩下的宽度， 当然， 如果只有一个table-cell元素， 就算设置了宽度也会占满table元素的宽度。
- 对设置了float、absolute的元素不起作用。且IE 6、7不支持
这就是所谓的table布局大法。
- display：table-cell与大小不固定元素的垂直居中
CSSOM
- window .getComputedStyle( element， [pseudoElt] )
Window .get Computed Style) 方法给出应用活动样式表后的元素的所有CSS属性的值， 并解析这些值可能包含的任何基本计算， 这些值是实时的， 第二个参数可以传伪元素标签， 浏览器F 12里面童看CSS模型的值应该就是这样来的。get Computed Style的返回值是resolved values， 通常跟CSS2.1中的computed values是相同的值。但对于一些旧的属性， 比如width， height， padding它们的值又为used values。 - Element .getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置。 - Element . getClientRects()
方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。就是Text Rectangle List对象。Text Rectangle对象包含了top left bottom right width height六个属性。 - offset Width/client Width/scroll Width区别
offset包括content+padding+border
client包括content+padding
scroll包括content+padding+溢出内容的尺寸 - HTMLElement.offsetLeft
是一个只读属性， 返回当前元素左上角相对于HTMLElement . offset Parent节点的左边界偏移的像素值，
JS基础
理解几个重要概念，闭包、作用域、原型链
JS类型相关问题
- symbol、map、set
对象的key只能是字符串和symbol， 而map的key可以是任意值。set允许存储任何类型的唯一值， set对象是值的集合， 而且值都是唯一的。symbol是一种特殊的不可变数据类型， 可以作为对象属性的标识符使用。symbol在for in中不可枚举。for of用来遍历类数组对象， set、map字符串都可以遍历， for in遍历对象， - apply、call、bind区别
apply、call都是把一个函数应用到其他对象上， 都是修改函数的上下文(this指向) ， 并且立即执行， bind返回一个指向新上下文的函数， 不是立即执行。apply接受数组参数， call接受逗号分割的参数列表。 - typeof操作符返回值有那些?
JS分两种类型， 基本类型和对象， type of返回undefined、boolean、string、number、object、function、symbol。
对于Array、function等对象一律返回object， 对于undefined返回undefined、null返回object(虽然null是基本类型， 但是会返回object， 这事遗留Bug) 、NaN返回number， - NaN是什么?它是什么类型?如何检测一个变量是不是NaN?
NaN即Not A Number， 但实际上它是Number类型type of NaN将会返回Number
NaN=== NaN//falseisNaN(bar) 来判断。 - 有几种办法定义对象?
3种， 对象字面量， 构造函数， Object.create() - ===的判断流程是怎么样的?
类型不相同，不相等，类型相同是基础类型就判断字面量咯，是对象等引用类型就判断引用是否相等。 - == 判断流程
= =会做类型转换， 转成原始值， 然后判断， 比如null==undefined， 某些字符串和数字相等， JS的万恶之源。 - 什么是类数组对象
有length属性和索引属性的对象， 可以通过Array . from() 转。 - 原型链的顶端是Object再往上就是undefiend。
- instance of、isPrototypeOf如何确定原型和实例之间的关系
通过回溯obj.proto.proto…==Constructor . prototype来验证obj是否是Constructor的实例,instanceOf只能用于判断对象和函数，不能用来判断字符和数字。
isPrototypeOf用来检测一个对象是不是在另一个对象的原型链上， - 实现一个类型判断函数， 需要鉴别基本类型、function、null、NaN、数组、对象
type of只能返回基本类型， 进一步判断需要instanceOf， Object.prototype.toString()或者Array.is Array等方法。 - 在条件判断时， 除了undefined，null， false，NaN， " "，0,-0, 其他所有值都转为true，包括所有对象，
- 对象在转换基本类型时， 首先会调用valueOf然后调用toString， 并且这两个方法你是可以重写的， 也可以重写Symbol . to primitive， 该方法在转基本类型时调用优先级最高。
语法
- let、const、var区别
let、const是块级作用域，var是函数作用域，let不存在变量提升， 必须先声明后使用，const类似， 但const必须在声明时就赋值， 且不可改变， 指的是引用的地址不可变。let、const、class声明的全局变量不是全局对象的属性。 - 箭头函数
箭头函数的this是绑定词法作用域的， 而且不能通过bind、call、apply改变， 没有一般函数的arguments隐藏对象，不能当作generator使用， - js严格模式下有什么不同?
。不能使用with语句
。匿名函数的this不会指向window而是undefined
。不能使用var创建全局变量
。不可以在if内部声明函数
。对象属性名必须唯一
。不可对变量使用delete
。不可对对象的只读属性赋值
。函数中不可以有重名参数
。arguments .callee和arguments . caller - setTimeout和setInterval区别?
setTimeout只会执行一次，不会造成内存泄漏， setInterval每隔一段时间调用，忘了清除则可能造成内存泄漏， 而且不会计算代码的执行时间， 因此setInterval可能会同时多次执行，用setTimeout可以模拟setInterval ， - js继承
js可以使用原型来继承， 但是原型可以直接修改导致继承链终端， 继承的实现无外乎利用prototype或call ，apply，bind改变调用时的上下文 - 懒加载
一般用于图片或者文章列表的加载，触发一般通过滚动，滑动到底部来触发以此来获得更好的用户体验，同时要配合节流函数，我们也可以通过IntersectionObserver函数监控某个DOM进入视窗从而出发加载的回调函数。同样思路也可以实现无限滚动之类的。 - 函数节流(throttle) 和防抖(debounce)
- 什么是深度拷贝，什么是浅拷贝?
Object .assigin() 是浅拷贝， 意味对于对象只会拷贝第一层的值， 引用对象也是拷贝的引用， 只是复制对象的引用， 而深拷贝是把所有对象都复制一遍， 包括引用的， 简单的可以直接JSON.stringify 0取巧深度拷贝， 复杂的就要自己写递归函数历了， - 原生的字符串方法有哪些?
substr、slice、replace、split、toLowerCase、toUpperCase等方法，看MDN文档最靠诺。 - SVG和Canvas区别?
SVG用xml绘制，Canvas用js绘制。 - service worker
代理前端请求，多线程 - mouseover/ mouse out与mouseenter / mouse level区别
mouseover / mouse out是标准事件， 目泡，enter/level不冒泡。 - js有几种方法定义函数?
4种， 函数声明， new Function构造， function操作符， 箭头函数 - arguments是啥?
是函数内部的局部变量， 是实参的列表， 可以获取实参的个数， length只能获取形参个数， 这个变量在箭头函数里面没有。 - Web Socket
Web Socket使用ws或者wss协议，Web Socket是一个持久化的协议， 再整个连接期间任意时刻， 客户端和服务端都可以相互推送消息，WebSocket不限于Ajax通信，Web Socket可以跨域通信 - new操作符具体做了什么
创建空对象， 设置这个空对象的obj.proto为target Obj.prototype， return target Obj.call(obj.args) 。 - 作用域与sit Timeout考察
异步
- async、promise、generator、Co
- 哪些场景是异步的?
- 事件监听
- 定时器
- Ajax请求
- 函数回调
实现
- Promise实现原理
- 如何实现一个双向数据绑定?
Object.defineProperty,Object.proxy， 脏检查 - 如何实现一个前端模板引擎?
- JS编写数组去重的方法?
a.可以用ES6的最简单方法[…newSet()]
b.也可以采用另外的写法
[3， 2， 2， 1， 1] . filter((e， i， arr) =>arr. index of(e) ==i?true：false)
- 统计页面用了多少种不同的标签?去重变种问题
- a.面试官最期待的答案
[...newSet([...document. query Selector All(“*") ] .map(e=>e. nodeName) ) ] . length
* b.也可以遍历检测HTML规范定义的标签， 这样就可以完全抛开页面DOM节点的数量， 但是对自定义标签无解
* c.暴力遍历DOM树， 塞入集合去重然后再统计
- JS实现图片中取特定颜色的色块坐标
先要求运行环境提供这个图片的像素ByteArray(在web运行环境下即是context.getImageData()) ， 然后循环取各像素的色值，得出红块的坐标区域。 - 希望获取到页面中所有的checkbox怎么做?(原生JS)
checkbox是一种input元素， 拿到所有input元素后遍历判断其type是否为checkbox， - JSONP的原理， post Message原理
- 如何编写一个上传组件
- 如何用promise实现一个信号灯
使用递归或promise的finally， finally是ES 2018引入的标准 - 实现一个网页加载进度条?
页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页(特别是网页游戏)的应用特别重要； 晦涩是因为web的特性， 各种零散资源决定它很难是“真实”的进度， 只能是一种“假”的进度，至少在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况，
所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验，使用户不至于在打开页面之后长时间面对一片空白，导致用户流失，
既然是“假”的，我们就要做到“仿真”才有用。仿真是有意义的，事实上用户并不在乎某一刻你是不是真的加载到了百分之几， 他只关心你还要load多久。所以接 - 实现图片懒加载
- setTimeout何时执行， request Animation Frame的优点
- 手写parselnt的实现
要求简单一些， 把字符串型的数字转化为真正的数字即可， 但不能使用JS原生的字符串转数字的API， 比如Number)
浏览器
原生DOM操作
在浏览器中实际有3中事件模型， 一种是DOM 0级事件模型， 即直接绑定声明在HTML节点上的事件， 或者JS代码指定属性值绑定事件处理方式。
* 节点获取的方法有 getElementById/ClassName/TagName/Name、querySelector、querySelectorAll
* 对元素属性进行操作的有 getAttribute，setAttribute，removeAttribute 方法。
* 节点进行增删改查的有 appendChild、insertBefore，replaceChild、removeChild、createElement。
* 替换 HTML DOM 中的元素用 replaceChild(newNode, oldonde)
* 从父元素中删除子元素 parent.removeChild(child)
* insertBefore(newItem, existingItem) 在指定已有节点前插入新的子节点
* appendChild(newListItem) 向元素添加新的子节点
事件
<input type="button" onclick="func()">
btn.onclick = func
IE事件模型
这个模型共两个过程， 事件处理阶段， 事件冒泡阶段， 使用attach Event ) 绑定监听函数。
DOM 2级模型
属于W3C标准，现代浏览器，IE8以上都支持，该模型中有三个过程。
1.事件捕获阶段， 时间从document一直向下传播到目标元素， 依次检童经过的节点是否绑定了事件监听函数，如果有则执行，
2.事件处理阶段，事件达到目标元素，触发目标元素的监听函数
3.事件冒泡阶段， 事件冒泡阶段从目标元素冒泡到docuemnt ， 依次检查经过的节点是否绑定了事件监听函数，
问题
- addEventListener第三个参数默认是false及冒泡阶段捕获， 那么同时绑定冒泡和捕获的回调函数， 哪个会先触发?
直觉上，应该是捕获阶段先触发， 冒泡其次触发， 但是如果一个DOM同时绑定了冒泡和捕获， 那就应该就谁先定义谁先出发， - 事件对象是什么?
当DOM上触发某个事件的时候会生成一个event对象， 这个对象包含事件的一些信息， 比如触发事件的DOM， 事件的类型， 事件的相关信息， 其中比较重要的有
preventDefault function取消事件默认行为
stopPropagation function取消事件冒泡
e.target指向触发事件监听的对象，(不变)
e.current Target指向添加监听事件的对象。(会因为绑定的事件函数不同而不同） - JS事件target与current Target区别
e. target指向触发事件监听的对象，
e. current Target指向添加监听事件的对象。
target是事件流的目标阶段， current Target是捕获阶段， 只有事件流在目标阶段时二者才一致。 - 不会冒泡的事件
blur：失去焦点时候触发，不会冒泡
focus：获取焦点时候触发，不会冒泡 - 如何阻止默认事件和冒泡?
stop Propagation) ，preventDefaultO，IE下设置cancel Buble=true来阻止冒泡， returnValue=false阻止默认事件。 - addEventListener有哪些参数
三个参数，addEventListener(， [true|false] ) ， 第三个参数用来设置冒泡阶段还是捕获阶段处理，add Event Li sterner第三个参数也可以是一个对象， 可以设置这些属性：
capture ， 布尔值， 和usecapture作用一样
once ， 布尔值， 值为true表示该回调只会调用一次， 调用后会移除监听
passive ， 布尔值， 表示永远不会调用prevent Default - 事件捕获的应用
全局性的事件拦截
·事件委托
如果子元素是动态生成的， 利用事件冒泡机制，我们可以把事件加到父级上， 通过event .target. nodeName判断子元素。这样节省内存，也不需要给子元素注销事件绑定。 - 事件队列
- Load和DOM Content Loaded区别
Load事件触发代表页面中的DOM，CSS，JS，图片已经全部加载完毕。
DOM Content Loaded事件触发代表初始的HTML被完全加载和解析，不需要等待CSS，JS，图片加载 - js自定义事件实现
a.原生提供了3个方法实现自定义事件
b.createEvent， 设置事件类型， 是html事件还是鼠标事件
c.init Event初始化事件， 事件名称， 是否允许冒泡， 是否阻止自定义事件
d. dispatchEvent触发事件
网络
1. Restful
Restful(Representational State Transfer ) 表征状态转移，是充分利用HTTP方法实现风格统一的接口服务的方法论。主要CRUD对应POST、GET、PUT、DELETE四个方法，GET应该是霉等的，FACEBOOK又出新玩意了GraphQL。
2.怎么解决跨域问题
- 同源策源， 同端口， 同域名、同协议，script、image、iframe、src不受同源策略影响，因此有JSONP， 原理是动态创建script标签， 返回的JSON数据被包在返回的回调函数里， 缺点是只支持Get。
- document . domain跨子域源的更改
- CORS
- 后端反向代理
- post Message(这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息， 另一个页面判断来源并接收消息
3.fetch和ajax有什么不同
ajax是XHR请求， 本质就是XMLHtppRequest，fetch是fetch请求类型， 返回的是Promise对象，是全新的webAPI， 对async、generator友好， 面向未来， 相对而言接口更友好
4. script标签中的async和defer的区别
defer和async都是并行下载， 下载过程不会产生堵塞， 区别在于async是加载完后就自动执行，defer需要等待页面完成后执行， 即DOMContentLoaded事件触发之前， 所有元素解析完成之后。
5. cookie属性
- httpOnly：告知浏览器该cookie不能通过document.cookie、XMHttpRequest和RequestAPI访问， 防止跨站脚本攻击(XSS) 。
- domain ：指定cookie可送达的主机名， 默认是当前文档地址中的主机部分(不含子域名)， 假定指定域名就相当与各子域名也包含在内， 属性设置多个web服务器共享cookie。
- path：指定一个URL路径， 只要该路径匹配请求的资源路径才发送Cookie首部。
- secure：只允许HTTPS/SSL协议时才发送cookie ， 所以保密信息尽量不要在cookie中存储。
- expires：是一个符合HTTP- date规范的时间戳，是一个绝对时间， 没设置就意味着这是一个会话期
- cookie ， 如果客户端和服务端时间不同步就会出现问题。
- max-age：是一个以秒为单位的数字， 设置为cookie失效之前要经过的秒数，是一个相对文档被访问后的时间。
6.ajax原理
就是newXMLHTTPRequest() 然后绑定stateChange事件。
7.ajax的readySate有几个状态?
5个吧， 0代表还没open ， 4代表接收完成。
缓存
1. 强缓存和协商缓存的区别
强缓存不发送请求到服务端，协商缓存会发，如字面意思，与服务端协商
2. F5和ctrl+F5的区别
F5无论如何都会发送请求到服务器，服务器看情况返回304触发协商缓存。
Ctrl+F 5不会发送If-Modified-Since和If-None-Match(Etag) ， 甚至还会加Pragma：no-cache、max-age=0
让缓存强制失效，连协商缓存都不要，找服务器重新要一份数据。
3. 缓存，存储相关(cookie,webStorage,session)
cookie和session区别， 一个存客户端， 一个存服务端。一般建立session需要两个一起用， 如果用户没有cookie则可以把session放到url上， 通过path Rewrite保持。cookie有数量和长度限制， 20条， 每条4kb，容易被拦截。
local Storage可以在同源文档之间共享， session Storage不能共享。
4. 页面缓存的原理
框架与工具
前端框架原理
事件合成层
原生 React 有一套事件系统，它在最顶层监听所有的浏览器事件，之后将它们转化为合成事件（syntheticEvent），传递给我们在 Virtual DOM 上定义的事件监听者。
MVVM 实现 View 与 Model 绑定的方法
- 脏检查，循环遍历所有观察者，检测到变化就更新，至少两次检查，它不关心数据是怎么改变的
- 数据劫持
- Proxy 与 Object.defineProperty，defineProperty 只能对属性进行数据劫持，需要深度遍历整个对象，不支持数组，proxy 可以直接对整个对象监听，而且不仅限于 set、get
- DOM Diff 算法和 Vitrual DOM
这两个技术的应用意味着不论状态如何变换，总能以最小的代价更新 DOM，即每次只更新发生变化的 DOM 。DOM Diff 算法需要依赖 Key 来保证效率，Vitrual DOM 的出现主要是避免频繁操作真实 DOM 导致的性能问题。
标准的的Diff算法复杂度需要O(n^3)，这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的，势必需要对算法进行优化。这看上去非常有难度，然而Facebook工程师却做到了，他们结合Web界面的特点做出了两个简单的假设，使得Diff算法复杂度直接降低到O(n)- 两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构；
- .对于同一层次的一组子节点，它们可以通过唯一的id进行区分。
所以 Diff 算法就分为了两步
首先从上至下，从左往右遍历对象，也就是树的深度遍历，这一步中会给每个节点添加索引，便于最后渲染差异
一旦节点有子元素，就去判断子元素是否有不同
路由原理
-
基于 HTML5 新增的两个 API：history.pushState 和 history.repalceState，两个 API 都会操作浏览器的历史记录，而不会引起页面刷新。
-
还有一个就是 Hash 路由，监听 hashchange 时间即可，window.location 处理哈希时不会导致页面重新渲染。这样做的好处很多，页面不刷新意味着不会向后端发送请求，从而减少服务器压力，提升用户体验，前后端分离。
AMD/CMD区别
- AMD 依赖前置， CMD 依赖后置，就近依赖
- ES6 module 和 require/exports 的区别
- ES6 module 是静态的，import 必须放在文件最顶部，导入导出是建立符号映射，便于依赖分析和优化。commonJS 是运行时的，导入导出是通过值复制来达成。
commonJS和ES6区别
- 前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
- 前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大，而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用导入会对渲染有很大影响
- 前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次，但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化，后者会编译成 require/exports 来执行的
webpack
loader 和 plugin 的区别
loader 用于资源转换，只关注转换文件，plugin 用于扩展 webpack 功能，不仅局限于资源加载，loader 只能处理单一文件的输入输出，而 plugin 可以对整个打包过程进行处理，从而获得更多灵活性。
什么是 chunk
webpack 加载的模块单位， 可以从过 Code Splitting 功能分割模块，可以通过 requre.ensure 定义分割点从而实现按需加载。
如何开发一个 loader ?
a loader is a node module exporting a function。
打包原理
webpack 打包最基本的实现方式，是把所有模块代码放到一个数组里，通过数组 ID 来引用不同的模块。webpack 通过 webpack_require 方法引用不同的索引函数。
webpack 和 gulp 的区别
webpack 是一个模块化的打包工具， gulp 提供的是一个工作流平台，但是 webpack 可以通过 plugin 和 loader 做到同样的事情。
webpack 打包后体积太大？打包太慢？
抽取公共代码模块，提取第三方库打包，代码压缩，使用 cdn，source-map 打进 js 也会很慢，打生产包可以去掉，使用 Vue 的话用 Only-Rutime 生产版本，使用 dllPlugin 避免一些不变的内容重复打包。
打包太慢可以使用多线程 loader 如 happyPack，webpack2 针对不同 loader 自动采用多线程编译了，dllPlugin 避免不不要的打包，使用 hot reload，开发环境避免一些不要的东西打进去。
React和Vue
react 和 vue 的区别
二者都是数据驱动，都只提供视图层，都支持服务端渲染，都有 Virtual DOM，前者使用 JSX 组织代码，后者使用 .vue 文件组织代码， HTML、CSS、JS 分开写在不同的标签内，而 JSX 都写在一起，前者推崇函数式编程，不可变状态，Vue 更倾向命令式编程。 Vue 数据是双向绑定，React 单向数据流。
jsx 的优点？
表达能力与简单的模板语言不一样，具备完全的编程能力，本质是对 JS 的一种扩展，可以对 UI 的渲染做非常精细的控制，最终会被编译成 CreateElement。
jsx 的缺点？
与传统的 web 开发理念相悖，HTML、CSS、JS 混写到了 JSX 内，结构、样式、行为关注点没有分离，不易阅读理解。
React，Vue 中父子组件通信
从父组件 => 子组件 通过属性传递消息，子组件 => 父组件通过父组件传入的回调函数通信，或者通过触发事件来通信，比如 Vue 中的 emit 方法，组件层级太深的节点间通信需要上 Redux 等状态管理库，在 Vue 可以考虑创建 Event Bus。兄弟组件不能直接通信，但可以依赖父组件共享数据。
无状态组件或者函数式组件
指的是没有内部状态组件，组件的表现由传入的 Props 唯一确定，就是一个纯粹的 Render 函数。无状态组件不会创建对象，故比较省内存，没有复杂的生命周期方法调用，故流程简单，能用无状态组件的地方就用无状态组件。
高阶组件（HOC）
如果把组件看作一个函数，则高阶组件就是高阶函数，其入参是一个函数，出参也是一个函数，类似与装饰器。取代取代了一部分 mixin 的场景。
React、Vue 的合成事件层和传统事件层的区别
React 和 Vue 都各自实现了一套合成事件层机制，以保证该事件模型与 W3C 标准一致，消除了 IE 与 W3C 标准之间的兼容问题，所以不用担心啥诡异的用法。
React 自己实现了一套事件冒泡机制，所以不能用 event.stopPropagation() 来停止事件传播，应该使用event.preventDefault()。React 的所有事件都绑定到了 document 节点，而不是组件对应的节点，简化了 DOM 原生事件，减少了内存开销。
React setState 异步
setState 只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。
setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。
React、Vue 生命周期与组件更新
componentWillReceiveProps(nextProps) ，只要 父组件 render 触发，这个方法都会被调用，不论是否 props 是否更新，SetState() 触发的更新不会调用此方法。
Vue 双向绑定机制的原理
Vue 采用数据劫持方式，结合发布订阅者模式，通过 Object.DefineProperty() 来劫持各个属性的 setter，getter 以监听属性变化，数据变化时发布消息给订阅者，触发相应的监听回调，后面据说会改用 Proxy 。
Vue 的虚拟 DOM 和 React 的区别
Vue 会跟踪依赖变化，不会重新渲染整个子组件树，React 会，或者需要手动通过ShouldComponentUpdate 去控制。
v-if 和 v-show 的区别
v-show 只是设置了 display: none; 属性，节点还存在内存中，v-if 会把节点从 dom 里干掉。
Vue 的组件通信
非父子组件通信考虑引入 Vuex， 或者 EventBus，也可以使用this. r e f s ， t h i s . refs，this. refs，this.parent 但是要考虑其代价，或者 $emit 。
如何评价 Vue
Vue 这个框架不错，下限低，上限高，即使初次接触前端 MVVM 的人也能很快入手，而不会像 React 那样撞到编程范式转换的墙上，取各家之所长，本身只专注 View 层，即便不上全家桶，也可以把它当作一个简单 Library 使用，上手曲线平滑。
MVVM 的理解
VM(ViewModel) 是一个同步 Model => View 的对象，核心是思想是数据驱动视图，而这个驱动是框架本身提供的能理，让用户只关注数据的变化，从手动操纵
DOM 的工作中解放出来。
为什么选择 Vue
下限低，利于传统的前端开发人员上手，其本身开发模式也不像 React 那样走向函数式编程的极端，而且很多语法糖指令，单文件的组织方式很爽，HTML/CSS/JS
依旧是关注点分离的。
Vue 中 mixin 和 extend 的区别
mixin 用来分发组件中可复用的功能，mixin 可以包含任意组件选项，混合组件中同名钩子函数会变成数组，都会被调用，并且混合对象的钩子函数会在组件自身钩子函数之前被调用。值为对象的属性，如 methods , components，directives 将被混合为同一个对象，键名冲突时，取组件属性对象的键值对。混合可以对单个组件混合，也可以全局混合，这样将影响之后所有创建的对象，谨慎使用，可以考虑用 Plugins 机制。extends 仅用于扩展另一个组件，主要是便于扩展单文件组件，和 mixins 类似，区别在于组件自身的选项会被要扩展的源组件具备更高的优先级，Vue.extend()也使用同样的策略进行合并。
单向数据绑定和双向绑定的优缺点
双向绑定不需要去操行那些 CRUD 操作，特别是在输入类控件需要实时响应的场景上非常方便。双向绑定的状态是自动管理的，在实际需要手动处理状态变化的逻辑时就难搞了，而且状态的变化不易追踪，导致数据问题的源头难以定位。二者差别只在于双向绑定把数据变更的操作用一套固定的逻辑隐藏在框架内部，让操作者不能直接感知，但是 Vue 同样可以使用 Vuex 来做单向数据流， v - model 的逻辑可以自己定义。
谈谈对组件的看法
一个组件应该具备可组合性，可重用性，可维护性，可测试性。
babel 原理
和编译器类似，source code -> AST -> generator -> source code。
JQuery操作是一个怎样的过程
前端单元测试
Mocha，Jest
HTTP协议
1.HTTP2和HTTPS
- HTTP2采用二进制格式，而非文本格式，解析效率更高。
- HTTP2完全多路复用，即一个TCP连接上允许跑多个HTTP请求。
- 报头压缩，降低了传输开销
- HTTP2让服务器可以响应主动“推送”到客户端缓存中，支持服务端推送，就是说服务器可以对一个客户端请求发送多个响应。
- HTTPS协议由SSL+HTTP协议构建的加密传输、身份认证网络协议。TLS/SSL中使用了非对称加密，对称加密以及HASH算法，比HTTP协议更安全。
2.什么是keep-alive模式
保持连接，持久连接，连接复用，当出现对服务器的后继请求时，keep-alive可以避免连接的重复建立。
3.GET， POST， PUT， DELETE
- GET查询数据使用，厚等，使用URL传递参数，有长度限制，2000个字符。
- POST想服务器发送数据，相对安全，但不会被缓存。
- PUT修改数据内容，不新增内容。
- Delete用来删除操作
4.GET和POST的区别
传递数据的方式不一样，一个放在URL一个放在HTTPBody，相对来说安全，GET请求一般要求幂等，所以建议用在资源请求时。
5.HTTP状态码
- 2是成功状态，3重定向，缓存4客户端错误，5服务器错误。
- 200请求成功。
- 301永久重定向。
- 304内容没变，你从缓存取吧
- 400错误请求
- 401未授权
- 403拒绝
- 404未找到
- 405方法禁用
- 500内部错误
- 501服务器不具备完成请求的功能
- 502网关或者代理错误
- 503服务不可用
- 504超时
6.HTTP请求报头有哪些
- Accept
- Cache-Control
- Host
- User-Agent
- Accenp-Language
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
name=qiu&age=25
首行是请求方法， 请求URL， 协议版本， 然后是若干请求头， 比如是否保持连接， 缓存控制， 请求资源类型， 浏览器版本， 源， 编码，语言，Cookie等
7.HTTP响应报头
- Cache-Control：max-age
- Content- Type
- Date
- Expires
- Last- Modified
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1
{"name": "qiu", "age": 25}
首行状态行， 版本号， 状态码状态描述， 然后是日期， 服务器， 资源的最后修改时间，Etag， 内容长度， 过期时间内容类型
8.HTTP method有哪些?
除了常见的增删改查四个(GET、POST、PUTDELETE )， 还有HAD E返回报文头部， OPTIONS和TRACE。
性能优化
1. 页面DOM节点太多，会出现什么问题，如何优化？
渲染满，DOM操作导致重绘或重排会卡顿
2. CDN工作原理
CDN做两件事情，让用户访问最近节点和从缓存活着源站获取资源，原理是通过CDN服务器实现优质节点的选择，通过缓存减少源站压力。
3. 网络优化和性能优化
性能优化无外乎，减少请求数量，压缩请求体积，代码优化
- 减少请求数量：合并CSS，JS ，图片，开启缓存，开CDN
- 减少请求体积：压缩CSS，JS,图片 或转Base64,开gzip
- 代码优化：DNS预解析，预连接，页面预加载，预渲染，适当使用懒加载和预加载技术，少用全局变量，减少作用域查找，缓存DOM查找结果，避免使用with,eval等，减少DOM操作次数，尽量使用css动画代替JS动画，用innerHTML代替DOM操作，减少DOM操作次数，优化js性能，减少IO读取操作
- 服务端使用CDN,加Cache-control,减少Cookie的大小，资源下放到不同域名去。
4. 首屏优化
适当加一些loading和transtion效果，避免白屏，内联css渲染，懒加载和预加载，服务端渲染
5. 前端渲染优势
局部刷新，懒加载，富交互，节约服务器成本
6. 服务端渲染
更好的SEO，首屏性能好，不需要下载一堆JS和css,减少客户端耗电。
网络安全
1.TCP协议
2.代理和反代理
3.XSS和CSRF的区别
XSS和CSRF都是跨站攻击，XSS本质是让对方浏览器执行你插入的js,从而获取cookie等信息，CSRF借助用户身份，向服务器发送请求，XSS分为存储型和反射型
4.XSS防范
- 输入白名单，只允许合法输入其他一律过滤掉
- 对用户输入做变换，去掉高危险节点，对URL参数过滤
- 设置CSP策略，CSP(content-Security-Policy)本质上也是建立白名单，规定了浏览器只能够执行特定来源的资源。
5.CSRF防范
- 验真Http Referer字段，判断请求来源
- 加token验证，在每个请求中加token,token不存在cookie中，敏感cookie设置httpOnly
- GET请求不对数据进行修改
- 在http头中加自定义属性验证，比如把token放自定义头属性中去
- 使用手机验证码
- 用post请求
6.密码安全
- 加盐，增加原密码的字符串长度。
异常监控
1.前端异常监控思路
浏览器提供了window.onerror方法，error.stack,压缩过后的代码利用sourceMap,支持自定义上报异常（常常与try…catch配合），Ajax.error通过axios做全局Hook
浏览器原理
浏览器渲染原理解析
- 处理HTML标记并构建DOM树
- 处理CSS标记并构建CSSOM树
- 将DOM和CSSOM合并成一颗渲染树
- 根据渲染树来布局，以计算每个节点的几何信息.
- 将各个节点绘制到屏幕上。(paint)
positon属性设为absolute或fixed等使得元素脱离文档流，它的变化不会影响其他元素，这样就可以避免重排，从而减少重绘（Repaint）
其他
1.SPA应用的优点
- 页面不用频繁刷新，因而没有白屏堵塞，用户体验好，减少后端压力，提高性能，
- 前后端分离
- SPA应用的缺点
- 不利于SEO， 因为蜘蛛不会执行JS， 但是可以通过服务端渲染解决
- 初次加载耗时多
- 页面开发复杂度提升，需要学习一些技术框架和状态管理的工具
- 导航不可用，但是有解决方法
2.关于前端工程化的理解
将优秀的实践规范化，标准化，流程化，自动化，这意味着制定开发规范，采用模块化开发，组件化开发，使用构建工具，持续集成工具，自动化测试，性能优化，部署，敏捷开发，脚手架等。
3.什么是同构
前后端运行同一套代码， 一般后端指的是Node.js。比如前后端都用JS、TS、Clo jure。
4.浏览器内核有那些?
webKit对应cr home， safari， Gecko对应firefox， Presto对应Opera。
5.介绍下PWA
用了webService代理了前端所有请求， 将大部分内容直接从本地缓存取， 以此获得和非常快的用户体验， 加上浏览器支持，可以添加快捷方式到桌面。加强版的微信小程序，也许未来会取代它。
6.chrome的JS引擎是啥?做了哪些优化为什么快?
用C++开发的， JIT(just-in-time) 实时编译成机器语言， 不会产生中间码， 垃圾回收算法用了精确回收很吊，属性访问很快
7.将静态资源放到其他域名的目的是什么?
避免DNS污染， 请求是不会发cookie节省流量， cookie默认是会发给子域名的， 浏览器对同一域名会有请求次数限制。
8.UV和PV的统计?
UV分析IP日志， PV分析页面url日志
9.从输入URL到页面发生了啥?
10.移动端遇到的一些诡异问题?
移动端的touch会默认触发一些mouse的事件， 而且移动端点击是有多点触控的， 选择事件时要找到对应的触发点。
11.移动端Click 300毫秒点击延迟
iphone设计了双击放大显示的功能–这就是300ms延迟的来源：如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
