HTML

一、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

· 行内元素：a, b, span, img, input, select, strong等；
· 块级元素：div, ul, li, ol, p, h1~h6, dl, dd, dt等；
· 常见空元素：br, hr, img, input, link, meta, area等
· 置换元素：img, input, textarea,select等。

二、HTML5新增了哪些特性？

· 绘画：canvas；
    1、<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器必，须使用脚本来完成实际的绘图任务；
    2、getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性；
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        context.lineTo(x,y);//路径的目标位置的 x，y 坐标
        ctx.fillStyle="#0000ff";  //设置或返回用于填充绘画的颜色、渐变或模式；
        context.fillRect(x,y,width,height);  //矩形左上角的x，y，width,height宽度/高度（px）；
        ctx.clearRect(20,20,100,50);  //清空给定矩形内的指定像素；
        context.arc(x,y,r,sAngle,eAngle,counterclockwise);
        //圆心坐标，半径r，起始角，结束角，counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针；
        
· 媒介：video、audio；
    video支持： MP4, WebM, 和 Ogg:
    audio支持： MP3、Wav、Ogg
    1、video.play()；
    2、video.pause();
    3、video.currentTime;  //视频当前播放时间
    4、video.duration  //视频总时长
    5、video.buffered.end(0)  //视频缓存时长
    6、video.muted  //设置或返回是否关闭声音
    7、video.loop  //设置或返回视频是否应在结束时再次播放
    8、video.addTextTrack()  //向视频添加新的文本轨道。
    9、video.canPlayType()  //检查浏览器是否能够播放指定的视频类型。
    10、video.oncanplay()  //当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
    11、video.playbackRate  //设置或返回视频播放的速度。
    
· 本地存储：localstorage,sessionStorage;
· 语义化标签：header，footer，nav，acticle，section
· 表单控件：date, time, email, search, time, calendar;
· 新技术：webworker，websocket, geolocation;
    webworker：运行在后台的js，独立于其他脚本，不会影响页面的性能
        使用注意点：
        1、同源限制；
        2、dom限制，worker线程无法读取主线程所在网页的dom对象，
        无法使用document、window、parent对象，但是worker线程可以navigator
        对象和location对象；
        3、通信联系：worker线程和主线程不在同一个上下文环境，他们不能直接通信，必须通过
        消息完成；
        4、脚本限制：worker线程不能执行alert，confirm方法，但可以使用XMLHttpRequest对象发出ajax请求。
        5、文件限制：worker线程无法读取本地文件，必须来自网络。
   websocket:
       1、一种网络通信协议；
       2、因为 HTTP 协议有一个缺陷：通信只能由客户端发起；（轮询的效率低，非常浪费资源，必须不停连接，或者 HTTP 连接始终打开）；
       3、最典型的场景就是聊天室。
   service worker:
       1、是一个运行在后台的 Worker 线程，然后它会长期运行，充当一个服务，很适合那些不需要网页或用户互动的功能；
       2、它的最常见用途就是拦截和处理网络请求。

三、canvas VS SVG？

1、SVG：
    SVG 是一种使用 XML 描述 2D 图形的语言。
    SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
    在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
    特点：
       不依赖分辨率
       支持事件处理器
       最适合带有大型渲染区域的应用程序（比如谷歌地图）
       复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
       不适合游戏应用
        <svg width="100%" height="100%"  >
            <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
        </svg>
    
 2、Canvas：
         Canvas 通过 JavaScript 来绘制 2D 图形。
    Canvas 是逐像素进行渲染的。
    在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
    特点：
       依赖分辨率
       不支持事件处理器
       弱的文本渲染能力
       能够以 .png 或 .jpg 格式保存结果图像
       最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
       

四、contenteditable属性

<element contenteditable="true|false">

五、什么是HTML语义化，有什么好处？

    HTML语义化就是用合理、正确的标签来展示内容；
    好处：
    1、有利于浏览器对页面的读取；
    2、利于SEO；
    3、便于团队开发和维护，语义化更具可读性，减少差异化；
    4、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
    5、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页。
    

六、HTML5为什么只需要写 ？

    HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML；
    而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为；
    主要作用是：
        告知浏览器的解析器用什么标准解析这个文档。DOCTYPE不存在或者格式不正确都会导致文档以怪异模式呈现。
        

七、web标准及w3c的理解和认识？

web标准，简单来说就是将页面的结构、表现和行为各自独立实现（结构、表现和行为相分离原则）；
W3C对web标准提出了规范化的要求，在实际编程中，包含一下几点：
1.对结构的要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）标签字母要小写；
2）标签要闭合；
3）标签不允许随意嵌套。
2.对css和js的要求：
1）尽量使用外联css样式表和js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；
2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

八、XHTML和HTML的区别？

· XHTML 元素必须被正确地嵌套。
· XHTML 元素必须被关闭。
· 标签名必须用小写字母。
· XHTML 文档必须拥有根元素。

九、Iframe的作用以及缺点？

优点：

·iframe能够原封不动地把嵌入的网页展示出来；

·提高页面代码的复用性；

·解决加载缓慢的第三方内容，如图标和广告等的加载问题；

·在处理上传或局部刷新时，避免了页面整体刷新；

·iframe解决部分跨域问题；

缺点：

·iframe会阻塞主页面的 onload 事件；
·无法被一些搜索引擎索引到；
·页面会增加服务器的http请求；
·会产生很多页面，不便于管理；
·很多移动设备无法完全显示框架，设备兼容性差；
·会出现区域的上下、左右滚动条，滚动条会挤占页面空间；
·使用框架时，要保证正确的使用导航链接，容易造成链接死循环。

十、HTML文档采用UTF-8编码集的优势是什么？

· utf-8: 使用3个字节表示一个符号, 基本上可以覆盖世界上所有语言；
· 与传统的gb2312,gbk相比, 可识别的字符集更多, 也是行业界推荐。

十一、标签中的title与alt属性的区别是什么？

1、alt：
    · 当图片加载不出来是显示；
    · 搜索引擎可以通过这个值来获取图片信息。
2、title：
    · 标签，显示网页的头部；
    · 当鼠标悬停在某一元素时的显示信息。
    

十二、标签中的href 与 src属性有什么区别？

二者都是引入外部资源。
1、href：
    · 用于超文本或者样式，用在link、a标签上；
2、src：
    · 用于外部资源占位标签上，如：img，iframe，script，video等

十三、什么是置换元素和非置换元素,每种类型至少举出二个案例？

1、置换元素的内容来自外部，该元素只是外部资源的占位符：img ，video， audio
2、非置换元素内容来自当前文档，必须使用双标签：p, h1~h6

十四、form标签中的name属性与表单控件,如中的name有何不同？

· form中的name属性就跟id一样，就是一个唯一标识；
· 表单中的name属性，是提供给服务器应用程序读取表单数据的变量名。

十五、无序列表与有序列表是否可以互相替代, 使用的属性是什么？

可以，type。

十六、script标签为什么要放在body标签的底部，【defer async】？

放在底部是为了尽可能的减少js对页面渲染的影响。
没有defer或async，浏览器在遇到script标签后，会立即加载并执行标签中的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。

有async，加载和渲染后续文档元素的过程将和script.js的加载并行进行（异步），但当script.js加载完后会立即执行，即停止加载和渲染后续文档元素，执行script.js。
·关于defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
·关于async，它的脚本加载顺序是乱序的，谁先加载完执行谁。

十七、页面出现了乱码，是怎么回事？如何解决？

网页乱码出现通常是因为网页开发者没有按照规范来设置网页编码，浏览器打开这类网页的时候自动按照默认的编码来打开导致的。
解决：在文档head中添加对应的编码规范，如：utf-8。

十八、input与textarea的区别？

· <input>是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用；
· <textarea>  是多行文本输入框。

十九、Quirks 模式是什么？它和 Standards 模式有什么区别？

Quirks模式：Quirks模式就是浏览器为了兼容早期针对旧版本浏览器设计、并未遵循W3C标准的网页而产生的一种页面渲染模式，这种模式又被成为“怪异模式”，简单来说就是一个新浏览器故意模拟许多在旧浏览器中存在的bug。

与 Standards 模式的区别：
总体会有布局、样式解析和脚本执行三个方面的区别：

盒模型：在W3C标准中，如果设置了一个元素的高度和宽度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了 padding 和 border ；
设置行内元素的宽高：在 Standars 模式下，给<span>等行内元素设置 width 和 height 都不会生效，而 Quirks 模式下，则会生效；
设置百分比的宽高：在 Standars 模式下，一个元素的高度是其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的；
设置水平居中：在 Standars 模式下可以使用 margin:0px auto 来设置元素水平居中，但是这种设置在 Quirks 模式下是无效的；

二十、请阐述 table 有哪些缺点？

·嵌套层级太深，会导致搜索引擎读取困难，而且会大大增加代码冗余；

·灵活性差，比如要设置tr的border等属性是不行的，要在td上设置border属性；

·代码臃肿，可读性差；

·混乱的 colspan 和 rowspan ，用它们来实现网页布局时，会造成文档顺序混乱；

·不够语义化；

二十一、严格模式和非严格模式的区别？

1、严格模式（strict mode）即在严格的条件下执行JS代码。
2、使用严格模式的理由：
    · 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
    · 消除代码运行的一些不安全之处，保证代码运行的安全；
    · 提高编译器效率，增加运行速度；
    · 为未来新版本的Javascript做好铺垫。
区别：
· 使用未定义的变量或变量会报错；
· 严格模式下不能使用delete字符删除变量或对象；
· 不允许变量重名；
· 不允许使用8进制；
· 不允许使用转义字符；
· 禁止this指向全局。

二十二、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），
以及计算网页的显示方式，然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

二十三、常见的浏览器内核及对应浏览器？

·Trident：IE内核
·Gecko：Firefox内核
·Presto：Opera前内核(已废弃)
·Webkit：Safari内核，Chrome内核原型，开源
·Blink：由Google和Opera Software开发，Chrome（28及往后版本）、
Opera（15及往后版本）和Yandex浏览器中使用

二十四、HTML5的文件离线储存怎么使用，工作原理是什么？

1、作用：
    在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，自动更新缓存数据。
2、原理：
    HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，
    这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，
    浏览器会通过被离线存储的数据进行页面展示。
3、注意：
    它正在处于从Web平台中被删除的过程。请改用Service Workers 代替。
    

二十五、cookie、session、token、localstorage、sessionStorage区别？

1、cookie 和 session区别：
    · cookie会伴随着数据请求穿梭于客户端和服务器之间；
    · cookie数据存放在客户的浏览器上，session数据放在服务器上；
    · cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全
    应当使用session；
    · session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能；
    · 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2、localstorage、sessionStorage：
    · localstorage 如果不手动清除，会一直保留在客户端；大小限制5MB左右；
    · sessionStorage当页面关闭的时候，就会被清除，大小5MB左右；
3、token：
    组成：
        · uid: 用户唯一身份标识
        · time: 当前时间的时间戳
        · sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接
        固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查库
    存放：
        token在客户端一般存放于localStorage，cookie，或sessionStorage中。在服务器一般存于数据库中；
    token认证流程：
        · 用户登录，成功后服务器返回Token给客户端。
        · 客户端收到数据后保存在客户端
        · 客户端再次访问服务器，将token放入headers中
        · 服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码。
        

二十六、label的作用是什么?是怎么用的?

    label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

二十七、webSocket如何兼容低浏览器？

· Adobe Flash Socket；
· ActiveX HTMLFile (IE)；
· 基于 multipart 编码发送 XHR； 
· 基于长轮询的 XHR。

二十八、网页验证码是干嘛的，是为了解决什么安全问题？

· 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
· 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

二十九、title与h1的区别、b与strong的区别、i与em的区别？

1、title与h1的区别：
   · title是网站标题，
   · h1是文章主题。
2、b与strong的区别：
    · b(bold)是实体标签，用来给文字加粗，
    · strong是逻辑标签，作用是加强字符语气。
3、i与em的区别：
    · i(italic)是实体标签，用来使字符倾斜，
    · em(emphasis)是逻辑标签，作用是强调文本内容。
 

三十、介绍一下dl\dt\dd标签？

dl是列表标签，dt和dd须出现在dl中，其中，dt是上层项目，dl是下层项目。
在浏览器渲染时，二者差别体现在dd会因为-webkit-margin-start属性而距离dt的左边有一定的边距。

三十一、标准模式与怪异模式的区别？

标准模式：浏览器按W3C标准解析执行代码；
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。
区别；
    · 盒子模型
        标准模式：width=content;
        怪异模式：width = padding + border + content;
        **box-sizing: border-box  // width = padding + border + content;
        box-sizing: content-box  // width = content;**
     · 图片元素的垂直对齐方式
         对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值是baseline；
         在怪异模式下，table单元格中的图片的vertical-align属性默认取值是bottom。
         因此在图片底部会有及像素的空间。
     · 元素中的字体
         CSS中，对于font的属性都是可以继承的。
         怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素继承中的得到，
         特别是font-size属性。
     · 内联元素的尺寸
        标准模式下，non-replaced inline元素无法自定义大写；
        怪异模式下，定义这些元素的width、height属性可以影响这些元素显示的尺寸。
     · 元素的百分比高度
         当一个元素使用百分比高度是，标准模式下，高度取决于内容变化；
         怪异模式下，百分比高度被准确应用。
     · 元素溢出的处理
         标准模式下，overflow取值默认为visible；
         在怪异模式在，该溢出会被当做扩展box来对待。
         

三十二、页面重绘和回流以及优化？

1、回流：
    · 元素的规模尺寸、布局、隐藏等改变而需要重新构建。
    · 触发：
        （1）添加、删除、隐藏、显示DOM元素；
        （2）元素位置改变；
        （3）元素尺寸改变——边距、填充、边框、宽度和高度
        （4）内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
        （5）页面渲染初始化；
        （6）浏览器窗口尺寸改变——resize事件发生时；
2、重绘：
    元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局
    (例如：background-color)
3、注意：
    **回流一定会触发重绘，但重绘不一定触发回流。**
4、优化：
    （1）直接改变className，如果动态改变样式，使用cssText(减少设置多项内联样式)；
        // bad
        elem.style.left = x + "px";
        elem.style.top = y + "px";
        // good
        elem.style.cssText += ";left: " + x + "px;top: " + y + "px;";
    （2）不要经常访问会引起浏览器flush队列的属性，确实要访问，利用缓存；
    （3）让元素脱离动画流；
    （4）避免使用table布局；
    （5）避免使用display:none;可使用opacity：0；
    

三十三、png,jpg,gif区别？

· JPG是一种常用于摄影作品或写实作品、有损压缩图形格式；
· PNG是一种清晰、支持透明、无损压缩的位图图形格式；
· GIF是一种色彩效果低、体积小、支持透明的图像文件格式。

三十四、Dom解析过程？/ HTML的渲染过程？

第一步：将载入的HTML文件解析成DOM树（DOM Tree），
并且将各个标记标识解析成DOM树的各个节点；
在解析HTML的同时会将CSS样式解析成CSS规则（CSS Rules）。

第二步：将解析成的DOM树和CSS规则进行关联生成渲染树（Render Tree）。

第三步：进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标
（这一阶段还是渲染树）；

第四步：进入绘制阶段，在这里渲染引擎的工作就结束了，
接下来就给用户界面后端（UI Backend）对渲染树的每个节点进行绘制，
呈现出页面效果。

三十五、DOM节点类型？

https://www.w3school.com.cn/xmldom/dom_nodetype.asp

CSS

一、css的优先级？

!important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认；
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000。

二、CSS选择器有哪些？哪些属性可以继承？

三、css3新增属性？

四、position的值？

五、display的值？

六、什么是 BFC机制？

七、圣杯布局和双飞翼布局？

八、flex布局？

九、grid布局？

十、垂直水平居中？

十一、清除浮动？

十二、三角形&扇形？

· 原理：http://caibaojian.com/css-border-triangle.html
· 三角形：
    div{
      width: 0;
      height: 0;
      border-width: 20px;
      border-style: solid;
      border-color: #31c27c transparent transparent transparent;
    }
· 扇形：
    div{
      width: 0;
      border-style: solid;
      border-color: #31c27c transparent transparent transparent;
      border-width: 50px;
      border-radius: 50%;
    }

十三、1px问题？

· 图片；
· viewport + rem；
· 伪元素 + transform:scale(0.5)
    .m-nav-container:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(.5);
        background-color: #e7e7e7;
    }
· 使用box-shadow模拟边框
    .box-shadow-1px {
        box-shadow: inset 0px -1px 1px -1px #c8c7cc;
    }
    

十四、伪类和伪元素？

十五、哪些属性可以继承？

十六、多行显示？

十七、object-fit?

十八、CSS中 link 和@import 的区别是什么？

十九、transition和animation、transform的区别？

二十、使元素消失的方法?

二十一、如何让一段文本中的所有英文单词的首字母大写？

二十二、在手机端，滑动卡顿？

二十三、自适应布局？

二十四、判断是否为横屏或者竖屏？

@media screen and (orientation: portrait) {/*竖屏...*/} 
@media screen and (orientation: landscape) {/*横屏...*/}

二十五、左侧（右侧）固定宽度，右（左侧）自适应？

二十六、瀑布流布局？

二十七、

JS

一、防抖与截流

1、防抖（debounce）
    定义：
        指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
    也就是说只执行n秒内的最后一次操作。
    适用场景：
        input输入框，拖拽。
    实现：
       let debounce = function(fn,delay) {
           let timer = null;
           return function() {
               let self = this;
               if(timer){
                   clearTimeOut(timer);
               }
               timer = setTimeOut(() => {
                   timer = fn.apply(self, arguments);
               },delay)
           }
2、截流（throttle）
    定义：
        连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
    适用场景：
        窗口缩放， 滚动， 连续点击；
    实现：
        时间戳， 定时器， 时间戳+定时器；
        时间戳：
            let throttle = function(fn,delay){
                let startTime = 0;
                return function(){
                    let self = this;
                    let currentTime = Date.now();
                    if(currentTime - startTime >= delay){
                        fn.apply(self, arguments);
                        startTime = currentTime;
                    }
                }
            }
         定时器：
             let throttle = function(fn,delay){
                 let timr = null;
                 return function(){
                     let self = this;
                     if(!timer) {
                         timer = setTimeout(function(){
                             fn.apply(self, arguments);
                             timer = null;
                         },delay)
                     }
                 }
             }
         时间戳 + 定时器：
             let throttle = function(fn, delay) {
                 let timer = null;
                 let startTime = Date.now();
                 return function(){
                     let self = this;
                     let currentTime = Date.now();
                     let remaing = delay - (currentTime - startTime);
                     if(remaing <= 0) {
                         fn.apply(self, argument);
                         startTime = Date.now();
                     }else{
                         timer = setTimeout(self, remaing);
                     }
                 }
             }

二、导致setTimeout和setInterval时间不准确的问题？

原因：
    因为javascript是单线程编程，它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。
    setTimeout执行只是把任务放到代码中，没有立马去执行，所以说接下去的代码接着跑，直到js这个任务执行完成，才有可能往下执行。
解决方案：
    1、动态计算时差 （仅针对循环定时，只起修正作用 ）：
        在定时器开始前和运行时动态获取当前时间，在设置下一次定时时长时，
        在期望值基础上减去当前时延，以获得相对精准的定时运行效果。
    2、使用 Web Worker：
        将一些计算密集型或高延迟的任务，被 Worker 线程负担了。
        
**HTML5标准规定**：
    setTimeout的最短时间间隔是4毫秒；
    setInterval的最短间隔时间是10毫秒。
    也就是说，小于10毫秒的时间间隔会被调整到10毫秒

三、js中函数事如何调用的？

前端视频直播技术。参考：

https://www.cnblogs.com/dreamsqin/p/12557070.html

TS

Webpack

一、webpack与grunt、gulp的不同？

grunt和gulp是基于任务和流的，找到一个或者一类文件，对其做一系列的链式操作，更新到流上的数据，整条链式操作就构成了一个任务，多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动的递归解析肉蔻所需要加载的所有资源文件，然后会用不同的loader来处理不同的文件，用plugin来扩展webpack的功能。
总结：
1.从构建思路来说：
	gulp和grunt需要开发者将整个前端构建过程拆分成多个‘task’，并合理的控制多个‘task’之间的调用关系；webpack只需要找到入口，并清楚不用的资源用不同的loader去处理。
2.从知识北京来说：
	gulp更像后台开发者，需要对整个流程了如指掌；webpack更倾向于前端开发者。   

二、与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？

同于基于入口的打包工具：
· webpack
· rollup
· parcel

从应用场景来看：

    · webpack适用于大型复杂的前端站点构建
    · rollup适用与基础库的打包：如：vue，react
    · parcell 适用于简单的实验性项目，它可以满足低门槛的快速查看效果。
原因：
    · 大多数团队在开发新项目是会紧跟时代，都会采用“模块化+新语言+新框架”，webpack为这些新项目提供了一站式的解决方案；
    · webpack有良好的生态链和维护团队，能提供良好的开发体验并保证质量；
    · webpack被全世界大量的web开发者所使用和验证，能找个各个层面的教程和经验分享。

三、有哪些常见的loader，他们解决什么问题？

    · file-loader ： 把文件输出到一个文件夹中，在代码中通过相对url引入，去输出的文件。
· url-loader ： 和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。
· source-map-lader： 加载额外的Source Map文件，以方便断点调试。
· iamge-loader ： 加载并压缩资源文件。
· babel-loader： 将es6转换为es5
· css-loader： 加载css代码，支持模块化、压缩、文件导入等。
· style-loader：把css代码注入到js中去，通过dom操作加载css样式。
· cache-loader: 允许缓存以下loader到（默认）磁盘活数据库中。

四、常见的plugin，他们解决什么问题？

五、loader和plugin的区别？

**不同的作用：**
	· loader 直译为“加载器”。webpack将文件视为模块，但是webpack本身只能解析js文件，如果想要解析其他类型的文件，就需要loader，loader可以让webpack拥有加载和解析非js文件的能力。
    · plugin 直译为“插件”。可以扩展webpack的功能。让webpack更具有灵活性。在webpack的生命周期中，plugin可以播放和监听一些事件，在合适的机会通过webpack提供的api来改变输出结果。
**不同的用法：**
	· loader在module.rules中配置，类型为数组，每一项都是一个object，里面描述了用于什么类型的文件（test），使用什么加载loader和使用什么参数（options）；当对一类文件配置多个loader时，是从右往前的顺序一次执行。
    · plugin在plugins中配置，类型为数组，每一项是一个plugin实例，参数通过构造函数传入。

六、webpack的构建流程？

1、初始化参数：从配置文件和shell语句中，读取和合并参数，并得到最终的参数；
2、开始编译： 用第一步得到的参数来初始化compiler对象，加载所有的配置插件，执行对象的run方法开始执行编译；
3、确定入口：根据配置中的entry来确定入口文件；
4、编译模块：从入口文件出发，调用所有配置的loader，对模块进行编译，再找出该模块依赖的模块，再递归本步骤，直到所有的依赖都经过了本步骤处理；
5、完成模块编译：再经过第四步使用loader编译万所有模块后，得到了每个模块被编译后的最终内容以及他们之间的依赖关系；
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换称一个单独的文件加入到输出列表，**这步是可以修改输出内容的最后修改机会**；
7、输出完成：再确定好输出内容后，根绝配置确定输出的路径和文件名，把内容写入到系统中。

在以上过程中，webpack会在特定的事件点广播出特定的事件，插件在监听到感兴趣的事件后进入执行特定的逻辑，并且插件可以调用webpack的api修改运行结果。

七、是否写过loader和plugin？描述一下思路？

loader：
	· 编写loader要遵循单一原则，每个loader只干一种工作。每个loader拿到的是源文件内容，可以通过返回值	的方式将处理的结果输出，也可以通过this.callback()方法，返给webpack
plugin：
	- 通过钩子机制实现
	- 插件必须是一个函数或包含apply方法的对象
	- 在方法体内通过webpack提供的API获取资源做响应处理
	- 将处理完的资源通过webpack提供的方法返回该资源

八、webpack的热更新原理？

webpack的热更新又叫热替换（hot module replacement），缩写HMR。这个机制可以做到不用刷新浏览器而将新变更的模块去替换旧模块。
原理：

九、import moduleName from 'xxModule'和import('xxModule')经过webpack编译打包后最终变成了什么？在浏览器中是怎么运行的？

import经过webpack打包以后变成一些Map对象，key为模块路径，value为模块的可执行函数；

代码加载到浏览器以后从入口模块开始执行，其中执行的过程中，最重要的就是webpack定义的__webpack_require__函数，负责实际的模块加载并执行这些模块内容，返回执行结果，其实就是读取Map对象，然后执行相应的函数；

当然其中的异步方法（import('xxModule')）比较特殊一些，它会单独打成一个包，采用动态加载的方式，具体过程：当用户触发其加载的动作时，会动态的在head标签中创建一个script标签，然后发送一个http请求，加载模块，模块加载完成以后自动执行其中的代码，主要的工作有两个，更改缓存中模块的状态，另一个就是执行模块代码。

九、如果利用webpack来做性能优化？

十、如果提高webpack的构建速度？

十一、怎么配置单页应用？怎么配置多页应用？

十二、npm打包时需要注意哪些？如果利用webpack来更好的构建？

十三、webpack4.x和webpack5.x的区别？，webpack3.x VS webpack4.x？

十四、webpack打包原理？

十五、babel的原理？

十六、npm i会在package.json的何种设定下自动更新新的版本的npm package?

由于npm默认的都是^符号，导致每次项目构建时，自动更新组件版本。
    指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。（例如"vue": "2.6.10",）
    
波浪号~（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。(例如"vue": "~2.6.10",)

插入号^（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。（例如"vue": "^2.6.10",）

Node

React

一、在React中实现和Vue一样舒适的keep-alive？

1、在vue中有天然的keep-alive这个功能实现,react也有一个库,react-keep-alive，但是这个库是直接进行dom操作,会导致数据驱动失效,断层；（借助React.createPortal实现）
2、手动保存：
    手动保存状态，是比较常见的解决方式，可以配合 React 组件的 componentWillUnmount 生命周期通过 redux 之类的状态管理层对数据进行保存，通过 componentDidMount 周期进行数据恢复；
    在需要保存的状态较少时，这种方式可以比较快地实现我们所需功能，但在数据量大或者情况多变时，手动保存状态就会变成一件麻烦事了
3、跟后台合作
    后端定义一些接口，比如我页面加载5页的数据，先缓存5这个页码，当返回重新加载的时候，可以直接全部拉取这5页的数据，并做相应的滚动，接下来滚动逻辑再按照分页逻辑去做。
4、react-activation
    https://blog.csdn.net/petertanjinjie/article/details/107398782

一、为什么 React 选择使用 JSX ？

二、setState 到底是同步的，还是异步的？

三、React 事件与 DOM 事件有什么区别？

四、为什么 React 要加入 Hook ?

五、说一下你对 diff 算法的理解？

六、谈一谈 React 的数据流管理？

七、react diff造成的非预期更新如何解决

只采取删除和创建节点操作，不执行移动操作。

Redux

PWA

一、什么是PWA？

PWA全称Progressive Web App，即渐进式WEB应用。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题？

·可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
·实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
·实现了消息推送

它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生 App。
https://segmentfault.com/a/1190000012353473

微前端

Node

前端安全

设计模式

工程化

移动端

场景实现题

Vue

vue的diff算法

https://juejin.cn/post/6971622260490797069

vuem面试

https://juejin.cn/post/6961222829979697165#heading-35

Vuex

React VS Vue

Electron

http

性能优化

数据结构和算法

Flutter

小程序

框架集合

React

React Design

开发中遇到的问题

一、由于react和react-dom的分离，如果只更新react 可能会导致setstate出问题。

在前端进阶公众号看过

二、在reacthooks，改动数组里面的对象属性，会改不过来

三、const [test, setTest] = useState

setTest可以传一个函数作为参数

**// 第一种，直接使用背景图，使用story_id作为key值，不存在默认封面图片，直接渲染。

// 第二种，使用默认封面，使用story_id作为key值，在使用定时器，2s后换成网络图片，可以达到懒加载的视觉效果。 // 第三种，使用默认封面，加上getboundingClientRect()来实现懒加载,不过存在性能上问题(for循环)，有待解决。还有一个问题就是如果图片 // 加载失败怎么办(已解决，可使用两个div，一个是默认封面，一个是真实的。让他们重合在一起)。**