历年前端经典面试题

历年前端经典面试题(一)

一、HTML/CSS篇

1、如何使用 Canvas和HTML5中的SVG画一个矩形？

【仅供参考】
使用SVG绘制矩形的代码如下：
<svg xmlns=http://www./2000/svg  version="1.1">
<rect style="fill:rgb（255,100，0）；"height=200"  width="400"></rect>
</svg>
使用 Canvas绘制矩形的代码如下。
<canvas id="myCanvas" width=500" height="500"></canvas>
var canvas=document.getElementById（'mycanvas'）；
var ctx= canvas.getContext（'2d'）；
 ctx.rect（100,100,300,200）；
ctx fillstyle = 'pink '
ctx. fill()

2、title 与 h1 的区别？

【仅供参考】
title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。

3、HTML5如何实现跨域？

【仅供参考】
在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。
response.setHeader（"Access-Control-Allow-Origin"，"*"）；
response.setHeader （"Access-Control-Allow-Methods"，"POST"）；
response.setHeader（"Access-Control-Allow-Headers"，"x-requested-with, content-type"）；

4、Canvas和SvG的区别是什么？

【仅供参考】
两者的区别如下：
（1）一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。
（2）Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。
（3）因为不需要记住以后事情，所以 Canvas运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较缓慢。
（4）在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
（5）Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无关。

5、HTML5为浏览器提供了哪些数据存储方案？

【仅供参考】
在较高版本的浏览器中，提供了 sessionStorage：和globalStorage。在HTML5规范中，用localStorage取代 globalStorage 。
HTML5中的 Web Storage包括两种存储方式，分别是sessionStorage和 localStorage。
sessionStorage用于在本地存储一个会话（ session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
localStorage和 sessionStorage都具有相同的操作方法，例如 setItem、 getItem和removeltem等

6、HTML5新增了哪些功能AP？

【仅供参考】
新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command API、 Constraint Validation API、 History API

7、标签上 title 与 alt 属性的区别是什么？

【仅供参考】
alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。（因为IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

8、请描述一下 sessionStorage和 localStorage的区别。

【仅供参考】
sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而 localstorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。

9、页面可见性（Page Visibility）API 可以有哪些用途

【仅供参考】
1、通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。
 2、在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

10、如何刷新浏览器的应用缓存？

【仅供参考】
应用缓存通过变更“#”标签后的版本号来刷新，如下所示：
CACHE  MANIFEST
 # version 2.0
/icketang.css
/icketang.js
/icketang. png
NETWORK：
 login. php

11、简述一下你对 HTML 语义化的理解？

【仅供参考】
用正确的标签做正确的事情。
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

12、cookie和 session的区别是什么？

【仅供参考】
区别如下：

（1）cookie数据存放在客户的浏览器上， session数据存放在服务器上。
（2）cookie不是很安全，别人可以分析存放在本地的 cookie并进行 cookie欺骗。考虑到安全问题应当使用 session。
（3）session会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用 cookie。
（4）单个 cookie保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存20个 cookie。
所以个人建议可以将登录信息等重要信息存放在 session中，其他信息（如果需要保留）可以存放在 cookie中。

13、HTML5中的应用缓存是什么？

【仅供参考】
HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。
应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

14、CSS选择器优先级怎样的？如果我在class里面写了三个class，例如<p class="class1, class2, class3">，会最终用那个?

【仅供参考】
!important > [ id > class > tag ]

这个和class1, class2, class3 在元素中顺序无关，而与css文件里面写的顺序有关，css文件里，越后面的优先级越高。

15、哪些 css 属性可以继承？

【仅供参考】
答案：

可继承：text-align、font、color、line-height、letter-spacing、word-spacing、text-indent
不可继承 ：border padding margin width height ;

16、精灵图和 base64 如何选择？

【仅供参考】
精灵图:

优点:
将多个图像加载请求合并为一个请求;
弊端:
难以维护和更新;
增加内存消耗;
base64:

优点:
将多个图像加载请求合并为一个CSS文件请求;
轻松更新生成文件;
弊端:
base64编码比原始二进制表示大约大25%;
IE6或IE7不支持;

17、rgba0和 opacity的透明效果有什么不同？

【仅供参考】
rgba()和 opacity都能实现透明效果，但它们最大的不同是 opacity作用于元素，并且可以设置元素内所有内容的透明度；而 rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果）。

18、CSS3 新特性你能说出哪些？

【仅供参考】
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
变形 transform
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);

19、inline-block 之间的间隙如何去掉？

【仅供参考】
两个并列的 inline-block 中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

删除两个标签间的空格，但是这样 html 排版不好
容器元素 font-size: 0 然后再在里面再重新设置字体大小

20、line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

【仅供参考】
带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px

百分比：将计算后的值传递给后代

二、JS/ES6/TS篇

1、说一下innerHTML 与 innerText的作用与区别？

【仅供参考】
作用：都可以获取或者设置元素的内容
区别：innerHTML可以解析内容中的html标签
innerText不能解析内容中的html标签

2、原生对象和宿主对象

【仅供参考】
原生对象：JS内置的对象，比如Array，Date
宿主对象：由宿主环境决定，如果在浏览器运行，会有window及其子对象document，location等，如果在node环境运行，则有globla及其子对象

3、如何使用 JS 删除 cookie

【仅供参考】
如果要删除cookie以便后续尝试读取cookie，则只需将过期日期设置为过去的时间。
咱们应该定义cookie路径以确保删除正确的cookie。
如果未指定路径，某些浏览器将不允许咱们删除cookie

4、函数柯里化

【仅供参考】
概念：把一个接收多个参数的函数变成接收单一参数 并且返回能够接收新参数的函数；比如：
add(1)(2)(3)(4) = 10;

function add(num){
    var sum=num;
    var fn=function(v){
        sum+=v;
        return fn
    };
    fn.toString=function(){
        return sum
    };
    return fn
}
console.log(add(1)(2)(3)(4)) // 10

5、什么是高阶函数？

【仅供参考】
高阶函数是对其他函数进行操作的函数;
高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。
例如，Array.prototype.map，Array.prototype.filter和Array.prototype.reduce 是语言中内置的一些高阶函数。

6、请说出以下结果输出什么？为什么？

【仅供参考】
for(var i = 0; i < 5; i++) {
    setTimeout(function(){
        console.log(i)
    }, 0)
}
答案：5个5
解释：异步代码需要等同步代码先执行，所以当异步定时器执行时，
同步的for循环已经循环完毕

7、如何改变this指针的指向？

【仅供参考】
可以使用apply、call、bind方法改变this指向(并不会改变函数的作用域)。比较如下：
（1）三者第一个参数都是this要指向的对象，也就是想指定的上下文，上下文就是指调用函数的那个对象(没有就指向全局window)；
（2）apply第二个参数都是数组，call和bind接收多个参数并用逗号隔开；
（3）apply和call只对原函数做改动，bind会返回新的函数(要生效还得再调用一次)。

8、请解释一下什么是防抖与节流

【仅供参考】
防抖（debounce）
总结：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n秒内又触发了事件，则会重新计算函数执行时间。
节流（throttle）
总结：就是每次触发事件的隔间至少要大于等于n秒，不会重置计时

9、ajax过程？

【仅供参考】
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

10、数组方法pop() push() unshift() shift()

【仅供参考】
pop()尾部删除
push()尾部添加
unshift()头部添加
shift()头部删除

11、async/await

【仅供参考】
async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。是Generator函数的语法糖，并对Generator函数进行了改进。
改进：

内置执行器，无需手动执行 next() 方法。
更好的语义
更广的适用性：co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即resolved 的 Promise 对象）。
返回值是 Promise，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用。
async 隐式返回 Promise 作为结果的函数，那么可以简单理解为，await后面的函数执行完毕时，await会产生一个微任务(Promise.then是微任务)。

12、DOM 元素e的e.getAttribute(propName)和 e.propName 有什么区别和联系

【仅供参考】
e.getAttribute：获取的是标签上属性
可以通过e.setAttribute(propName, propValue)设置标签上属性
e.propName：获取的是元素对象上属性

13、什么是JS变量提升 与 块级作用域

【仅供参考】
变量提升：就是会把变量定义提升到当前作用域的最上面
块级作用域：JS 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ES6中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量

14、如何阻止事件冒泡

【仅供参考】
ev.stopPropagation();

15、JavaScript 是单线程的，浏览器是多进程的

【仅供参考】
每打开一个新网页就会创建一个渲染进程
渲染进程是多线程的
负责页面渲染的 GUI 渲染线程
负责JavaScript的执行的 JavaScript 引擎线程，
负责浏览器事件循环的事件触发线程，注意这不归 JavaScript 引擎线程管
负责定时器的定时触发器线程，setTimeout 中低于4ms 的时间间隔算为4ms
负责XMLHttpRequest的异步 http 请求线程
GUI 渲染线程与 JavaScript 引擎线程是互斥的
单线程JavaScript是因为避免 DOM 渲染的冲突，web worker 支持多线程，但是 web worker 不能访问 window 对象，document 对象等。

16、continue 与 break的区别

【仅供参考】
continue：跳过本次循环，直接进入下一次循环
break：直接终止循环

17、TypeScript的优点

【仅供参考】
1.Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。
 2.TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。
 3.TypeScript支持强类型或静态类型
 4.它使用基于类的面向对象编程。
 5.它有助于代码结构。

18、TypeScript中如何实现函数重载？

【仅供参考】
要在 TypeScript 中重载函数，只需创建两个名称相同但参数/返回类型不同的函数。两个函数必须接受相同数量的参数。这是 TypeScript 中多态性的重要组成部分。

例如，你可以创建一个add函数，如果它们是数字，则将两个参数相加，如果它们是字符串，则将它们连接起来。

function add(a:string, b:string):string;
function add(a:number, b:number): number;
function add(a: any, b:any): any {
    return a + b;
}
add("Hello ", "Steve"); // returns "Hello Steve"
add(10, 20); // returns 30

19、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能

【仅供参考】
基本的字符串格式化。
将表达式嵌入字符串中进行拼接。
用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。
ES6反引号(``)就能解决类模板字符串的功能
let name = 'web';
let age = 10;
let str = '你好，${name} 已经 ${age}岁了'
str = str.replace(/\$\{([^}]*)\}/g,function(){
     return eval(arguments[1]);
})
console.log(str);//你好，web 已经 10岁了

20、ES6 中数组新增了哪些方法① forEach()，用于遍历数组，无返回值；

【仅供参考】
② filter()，过滤掉数组中不满足条件的值；
③ map()，遍历数组，返回一个新数组；
④ reduce()，让数组的前后两项进行某种计算，然后返回其值。

三、Vue/React篇

1、如何创建refs？

【仅供参考】
通过React.createRef（）创建的，并通过ref属性附加到react元素，在构造组件中，
通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

2、react生命周期方法有哪些？

【仅供参考】
componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。
componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。
componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染
shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。
componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。
componentDidUpdate：它主要用于更新DOM以响应props或state更改。
componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。

3、什么是 React Context?

【仅供参考】
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性

4、列出 React Router 的优点。

【仅供参考】
就像 React 基于组件一样，在 React Router v4 中，API 是 'All About Components'。可以将 Router 可视化为单个根组件（<BrowserRouter>），其中我们将特定的子路由（<route>）包起来。
无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 <BrowserRouter> 组件中。
包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换

5、什么是虚拟DOM？

【仅供参考】
虚拟DOM是真实DOM在内存中的表示，ul的表示形式保存在内存中，并且与实际的DOM同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和

6、什么是prop drilling，如何避免？

【仅供参考】
在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 prop 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做prop drilling。
prop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。
为了避免prop drilling，一种常用的方法是使用React Context。通过定义提供数据的Provider组件，并允许嵌套的组件通过Consumer组件或useContext Hook 使用上下文数据

7、在 React 中使用构造函数和 getInitialState 有什么区别？

【仅供参考】
构造函数和getInitialState之间的区别就是ES6和ES5本身的区别。在使用ES6类时，应该在构造函数中初始化state，并在使用React.createClass时定义getInitialState方法。

8、如何在 ReactJS 的 Props上应用验证？

【仅供参考】
当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。
下面是一组预定义的 prop 类型:
React.PropTypes.string
React.PropTypes.number
React.PropTypes.func
React.PropTypes.node
React.PropTypes.bool

9、什么是React 路由

【仅供参考】
React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API

10、React有什么特点

【仅供参考】
React的主要功能如下：
它使用虚拟DOM 而不是真正的DOM。
它可以进行服务器端渲染。
它遵循单向数据流或数据绑定。

11、描述一下vue在生命周期的beforeMount阶段时，页面是怎么样的

【仅供参考】
beforeMount执行时,数据和虚拟DOM树已经都加载完成,但是这时数据没有渲染

12、组件间通讯方式

【仅供参考】
props / $emit
（1）父组件向子组件传值（props将数据自上而下传递）
（2）子组件向父组件传递数据（$emit和v-on来向上传递信息）

eventBus事件总线（$emit / $on）
通过EventBus进行信息的发布与订阅

vuex:
是全局数据管理库，可以通过vuex管理全局的数据流

ref / $refs
ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

依赖注入（provide / inject）
provide 和 inject 是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法

$parent / $children
使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
使用 $children 可以让组件访问子组件的实例，但是，$children 并不能保证顺序，并且访问的数据也不是响应式的。

$attrs / $listeners
实现组件之间的跨代通信。

13、v-pre的作用

【仅供参考】
可以让元素及元素的子元素不编译解析，这样可以加快vue的解析速度

14、为什么避免 v-if 和 v-for 用在一起

【仅供参考】
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，带来性能方面的浪费。
我们可以把 v-if 移动到父级（容器）元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
或者在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

15、依赖其它数据计算生成一个新的数据属性；

【仅供参考】
2、当里边依赖的其它数据发生改变，就会重新计算，

16、说一下vm.$once()的作用

【仅供参考】
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

17、Vue 中的 key 有什么作用？

【仅供参考】
key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
Vue 的 diff 过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它们会新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较，在比较的过程中，遍历会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。
所以 Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速!

更准确：因为带 key 就不是就地复用了，在 sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，源码如下：
function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

18、watch是什么，有什么用

【仅供参考】
属性监听
作用：当需要一个数据改变,然后去做一些逻辑处理,则可以来使用属性监听

19、说一下v-slot的作用

【仅供参考】
提供具名插槽或需要接收 prop 的插槽。

20、vue 中 key 值的作用

【仅供参考】
需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点
所以一句话，key 的作用主要是为了高效的更新虚拟 DOM

四、Webpack/Rollup篇

1、HMR热模块更新

【仅供参考】
借助webpack.HotModuleReplacementPlugin()，devServer开启hot
场景1：实现只刷新css，不影响js
场景2：js中实现热更新，只更新指定js模块
if (module.hot) {
  module.hot.accept(’./library.js’, function() {
    // Do something with the updated library module…
  });
}

2、常用loader

【仅供参考】
css-loader读取 合并CSS 文件
style-loader把 CSS 内容注入到JavaScript 里
sass-loader 解析sass文件（安装sass-loader，node-sass）
postcss-loader自动添加浏览器兼容前缀（postcss.config配置）
url-loader将文件转换为base64 URI。
vue-loader处理vue文件。

3、webpack的热更新是如何做到的？说明其原理？

【仅供参考】
1、在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 JavaScript 对象保存在内存中。
 2、webpack-dev-server 和webpack 之间的接口交互，而在这一步，主要是 dev-server 的中间件webpack-dev-middleware 和 webpack 之间的交互，webpack-dev-middleware 调用 webpack 暴露的 API对代码变化进行监控，并且告诉 webpack，将代码打包到内存中。
 3、webpack-dev-server 对文件变化的一个监控，这一步不同于第一步，并不是监控代码变化重新打包。当我们在配置文件中配置了devServer.watchContentBase 为 true 的时候，Server 会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器端对应用进行live reload。注意，这儿是浏览器刷新，和 HMR 是两个概念
 4、webpack-dev-server 代码的工作，该步骤主要是通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建立一个 websocket 长连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，
    同时也包括第三步中 Server 监听静态文件变化的信息。浏览器端根据这些 socket 消息进行不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值，后面的步骤根据这一 hash 值来进行模块热替换。
    webpack-dev-server/client 端并不能够请求更新的代码，也不会执行热更模块操作，而把这些工作又交回给了 webpack，webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给它的信息以及dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。HotModuleReplacement.runtime 是客户端 HMR 的中枢，它接收到上一步传递给他的新模块的 hash 值，它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 请求，获取到最新的模块代码。
 5、决定 HMR 成功与否的关键步骤，在该步骤中，HotModulePlugin将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。最后一步，当 HMR 失败后，回退到 live reload 操作，也就是进行浏览器刷新来获取最新打包代码。

4、webpack如何配置多入口文件?

【仅供参考】
entry: {
 home: resolve(__dirname, "src/home/index.js"),
 about: resolve(__dirname, "src/about/index.js")
}
用于描述入口的对象。你可以使用如下属性：
dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename: 指定要输出的文件名称。
import: 启动时需加载的模块。
library: 指定 library 选项，为当前entry 构建一个 library。
runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址

5、怎么配置单页应用？怎么配置多页应用？

【仅供参考】
单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可，这里不再赘述
多页应用的话，可以使用webpack的AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的是：
每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置

6、Webpack的打包过程/打包原理/构建流程？

【仅供参考】
初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler
编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理
输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中
细节：
Webpack CLI 通过 yargs模块解析 CLI 参数，并转化为配置对象option（单入口：Object，多入口：Array），调用 webpack(option) 创建 compiler 对象。
如果有 option.plugin，则遍历调用plugin.apply()来注册 plugin，
判断是否开启了 watch，如果开启则调用compiler.watch，否则调用 compiler.run，开始构建。
创建 Compilation 对象来收集全部资源和信息，然后触发 make 钩子。
make阶段从入口开始递归所有依赖，
每次遍历时调用对应Loader翻译文件中内容，然后生成AST，遍历AST找到下个依赖继续递归，
根据入口和模块之间关系组装chunk，输出到dist中的一个文件内。
在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果

7、什么是模热更新？有什么优点？

【仅供参考】
模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。
在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。
优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

8、webpack的工作原理?

【仅供参考】
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

9、什么是长缓存？在webpack中如何做到长缓存优化？

【仅供参考】
浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。
在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

10、谈谈你对Webpack的理解（Webpack是什么？）

【仅供参考】
Webpack 是一个 模块打包器，可以分析各个模块的依赖关系，最终打包成bundle静态文件（js、css、jpg）。
webpack 是一个静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。
webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。

11、webpack，rollup和parcel对比？

【仅供参考】
webpack 为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活，插件多
rollup 用标准化的格式（es6）来写代码，通过减少死代码（tree-shaking）尽可能地缩小包体积
parcel 超快的打包速度，多线程在多核上并发编译，不用任何配置

webpack和rollup都需要配config文件，指明entry, output, plugin，transformations
二者的细微区别在于：
rollup 有对import/export所做的node polyfills，webpack没有
rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join
两者实现tree-shaking的方式也不一样，这是个面试点，会问到，实现方式，哪个体积更小更彻底，为什么
parcel则是完全开箱可用的，不用配置

12、Loader机制的作用是什么？

【仅供参考】
webpack默认只能打包js文件，配置里的module.rules数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换打包成js。
注意：
use属性的值需要是一个由 Loader 名称组成的数组，Loader的执行顺序是由后到前的；
每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如css-loader?minimize中的minimize告诉css-loader要开启 CSS 压缩。

13、有哪些常见的Plugin？他们是解决什么问题的？

【仅供参考】
html-webpack-plugin：可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）
clean-webpack-plugin：重新打包自动清空 dist 目录
mini-css-extract-plugin：提取 js 中的 css 成单独文件
optimize-css-assets-webpack-plugin：压缩css
uglifyjs-webpack-plugin：压缩js
commons-chunk-plugin：提取公共代码
define-plugin：定义环境变量

14、如何解决循环依赖问题

【仅供参考】
Webpack 中将 require 替换为webpack_require，会根据 moduleId 到installedModules 找是否加载过，加载过则直接返回之前的 export，不会重复加载。

15、你是如何提高webpack构件速度的?

【仅供参考】
多入口情况下，使用CommonsChunkPlugin来提取公共代码
通过externals配置来提取常用库
利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们
引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。
原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
使用Tree-shaking和Scope Hoisting来剔除多余代码

16、Tree Shaking技术

【仅供参考】
从技术实现上来说，它是依托于ES6提供的模块系统对代码进行静态分析,并将代码中的死代码（dead code)移除的一种技术。因此，利用Tree Shaking技术可以很方便地实现我们代码上的优化，减少代码体积。
。Tree Shaking，从这个技术的命名十分形象，直译过来就是“摇树”的意思。在去除代码冗余的过程中，程序会从入口文件出发扫描所有的模块依赖，以及模块的子依赖，然后将它们链接起来形成一个“抽象语法树”(AST)。随后，运行所有代码，查看哪些代码是用到过的，做好标记。最后，再将“抽象语法树”中没有用到的代码“摇落”。这样一个过程后，就去除了没有用到的代码。

17、gulp和webpack区别

【仅供参考】
gulp：是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
（1）构建工具
（2）自动化
（3）用于：提高效率——能够优化前端工作流程，提高工作效率
（4）自动刷新页面，雪碧图，压缩css、js，编译less，检查语法等
（5）使用gulp可以配置你需要的插件，把以前需要手工做的事情让它帮你做了
webpack：是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
（1）打包工具
（2）模块化识别
（3）用于：编译模块代码方案
两者不是一个工具，不具有可比性，更不冲突

18、webpack的作用是什么，谈谈你对它的理解？

【仅供参考】
现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。
所以现代化的前端已经完全依赖于webpack的辅助了。
现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。
react.js+WebPack
vue.js+WebPack
AngluarJS+WebPack

19、webpack3和webpack4的区别

【仅供参考】
mode/–mode参数，新增了mode/–mode参数来表示是开发还是生产（development/production）production 侧重于打包后的文件大小，development侧重于goujiansud移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替支持es6的方式导入JSON文件，并且可以过滤无用的代码

20、常见Plugins

【仅供参考】
HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle.js
cleanwebPackPlugin打包自动删除上次打包文件

五、性能/浏览器/其他篇

1、什么是web worker，为什么我们需要他们web worker？

【仅供参考】
什么是web worker :
web worker是一种开启线程方式;
使用Web workers的原因：
通过使用Web Worker， 我们可以在浏览器后台运行Javascript， 而不占用浏览器自身线程（Web work实现多线程）。
Web Worker可以提高应用的总体性能，并且提升用户体验。
可以在主线程的下面通过web worker开启一个子线程
子线程的执行不会阻塞主线程执行
当我们需要去代码一些高运算的代码时，为了不阻塞主线程，
这个时则就可以开启一个子线程去做这个事件

2、图片懒加载？

【仅供参考】
当页面滚动的时间被触发 -> 执行加载图片操作-> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片

3、node 是单线程，为什么能处理高并发

【仅供参考】
每个Node.js进程只有一个主线程在执行程序代码，形成一个执行栈（execution context stack)。
主线程之外，还维护了一个"事件队列"（Event queue）。当用户的网络请求或者其它的异步操作到来时，node都会把它放到Event Queue之中，此时并不会立即执行它，代码也不会被阻塞，继续往下走，直到主线程代码执行完毕。
主线程代码执行完毕完成后，然后通过Event Loop，也就是事件循环机制，开始到Event Queue的开头取出第一个事件，从线程池中分配一个线程去执行这个事件，接下来继续取出第二个事件，再从线程池中分配一个线程去执行，然后第三个，第四个。主线程不断的检查事件队列中是否有未执行的事件，直到事件队列中所有事件都执行完了，此后每当有新的事件加入到事件队列中，都会通知主线程按顺序取出交EventLoop处理。当有事件执行完毕后，会通知主线程，主线程执行回调，线程归还给线程池。
主线程不断重复上面的第三步。
单线程的好处：
多线程占用内存高
多线程间切换使得CPU开销大
多线程由内存同步开销
编写单线程程序简单
线程安全
单线程的劣势：
CPU密集型任务占用CPU时间长（可通过cluster方式解决）
无法利用CPU的多核（可通过cluster方式解决）
单线程抛出异常使得程序停止（可通过try catch方式或自动重启机制解决）

4、AST是什么

【仅供参考】
在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
babel-cli开始读取我们的参数(源文件test1.js、输出文件test1.babel.js、配置文件.babelrc)
babel-core根据babel-cli的参数开始编译
Babel Parser 把我们传入的源码解析成ast对象
Babel Traverse（遍历）模块维护了整棵树的状态，并且负责替换、移除和添加节点(也就是结合我们传入的插件把es6转换成es5的一个过程)
Babel Generator模块是 Babel 的代码生成器，它读取AST并将其转换为代码和源码映射（sourcemaps）。

5、如何对网站的文件进行优化？

【仅供参考】
可以进行文件合并、文件压缩使文件最小化；可以使用CDN托管文件，让用户更快速地访问；可以使用多个域名来缓存静态文件。

6、对package.json里面的dependencies, devDependencies, peerDependencies的理解？

【仅供参考】
dependencies：
项目要跑起来必须依赖的包
devDependencies：
开发过程中用到的辅助包，比如插件，babel等
peerDependencies：
是用来防止多次引入相同的库，如果在package1和package2中都加上dependencies的packageBase，那么package1和package2会再下载一遍packgeBase

7、移动端性能优化？

【仅供参考】
尽量使用css3动画，开启硬件加速
适当使用touch时间代替click时间
避免使用css3渐变阴影效果
可以用transform: translateZ(0) 来开启硬件加速
不滥用float。float在渲染时计算量比较大，尽量减少使用
不滥用web字体。web字体需要下载，解析，重绘当前页面
合理使用requestAnimationFrame动画代替setTimeout
css中的属性（css3 transitions、css3 3D transforms、opacity、webGL、video）会触发GUP渲染，耗电

8、大文件上传断点续传

【仅供参考】
大文件上传
前端上传大文件时使用 Blob.prototype.slice 将文件切片，并发上传多个切片，最后发送一个合并的请求通知服务端合并切片
服务端接收切片并存储，收到合并请求后使用流将切片合并到最终文件
原生 XMLHttpRequest 的upload.onprogress 对切片上传进度的监听
使用 Vue 计算属性根据每个切片的进度算出整个文件的上传进度
断点续传
使用 spark-md5 根据文件内容算出文件 hash
通过 hash 可以判断服务端是否已经上传该文件，从而直接提示用户上传成功（秒传）
计算 hash耗时的问题，不仅可以通过 web-workder，还可以参考 React的 FFiber架构，通过requestIdleCallback来利用浏览器的空闲时间计算，也不会卡死主线程
通过 XMLHttpRequest 的 abort 方法暂停切片的上传
上传前服务端返回已经上传的切片名，前端跳过这些切片的上传

9、HTTP常见的状态码？

【仅供参考】
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

10、性能优化六大指标

【仅供参考】
六大指标基本囊括大部分性能优化细节，可作为九大策略的补充。笔者根据每条性能优化建议的特征将指标划分为以下六方面。
「加载优化」：资源在加载时可做的性能优化
「执行优化」：资源在执行时可做的性能优化
「渲染优化」：资源在渲染时可做的性能优化
「样式优化」：样式在编码时可做的性能优化
「脚本优化」：脚本在编码时可做的性能优化
「V8引擎优化」：针对V8引擎特征可做的性能优化

11、你做过哪些网站重构，及性能提升方面的优化相关工作

【仅供参考】
之前react用的class component，现在全部转成function component了
之前都是javascript，现在全部转成typescript
ajax调用之前都写在具体文件，现在都抽离在对应的api文件
对所有的Exception都加上了handle的逻辑
websocket多并发造成页面卡死
script脚本简化log日志

12、浏览器缓存优化

【仅供参考】
为了让浏览器缓存发挥最大作用，该策略尽量遵循以下五点就能发挥浏览器缓存最大作用。

「考虑拒绝一切缓存策略」：Cache-Control:no-store
「考虑资源是否每次向服务器请求」：Cache-Control:no-cache
「考虑资源是否被代理服务器缓存」：Cache-Control:public/private
「考虑资源过期时间」：Expires:t/Cache-Control:max-age=t,s-maxage=t
「考虑协商缓存」：Last-Modified/Etag
缓存策略通过设置HTTP报文实现，在形式上分为**「强缓存/强制缓存」和「协商缓存/对比缓存」**。为了方便对比，笔者将某些细节使用图例展示，相信你有更好的理解。
整个缓存策略机制很明了，先走强缓存，若命中失败才走协商缓存。若命中强缓存，直接使用强缓存；若未命中强缓存，发送请求到服务器检查是否命中协商缓存；若命中协商缓存，服务器返回304通知浏览器使用本地缓存，否则返回最新资源。
有两种较常用的应用场景值得使用缓存策略一试，当然更多应用场景都可根据项目需求制定。
「频繁变动资源」：设置Cache-Control:no-cache，使浏览器每次都发送请求到服务器，配合Last-Modified/ETag验证资源是否有效
「不常变化资源」：设置Cache-Control:max-age=31536000，对文件名哈希处理，当代码修改后生成新的文件名，当HTML文件引入文件名发生改变才会下载最新文件

13、请说一下你用过的浏览器存储，并说出它们的区别?

【仅供参考】
sessionStorage
localStorage
cookie
相同点 : 三者都是在浏览器本地存放数据;

区别 :
sessionStorage：数据只存在于会话期间
localStorage：数据永久存储
cookie：数据默认会话结束时过期，但可以设置过期时间，在请求服务端，浏览器会默认把cookie数据发送给服务器，cookie能存放的数据相对较小

14、列举你知道的Web性能优化方法。

【仅供参考】
具体优化方法如下。
（1）压缩源码和图片（ JavaScript采用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩为50%~70%，把PNG图片从24色压缩成8色以去掉一些PNG格式信息等）。
（2）选择合适的图片格式（颜色数多用JPG格式，而很少使用PNG格式，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式）。
（3）合并静态资源（减少HTTP请求）
（4）把多个CSS合并为一个CSS，把图片组合成雪碧图。
（5）开启服务器端的Gzip压缩（对文本资源非常有效）。
（6）使用CDN（对公开库共享缓存）。
（7）延长静态资源缓存时间。
（8）把CSS放在页面头部把 JavaScript代码放在页面底部（这样避免阻塞页面渲染而使页面出现长时间的空白）

15、谈谈你对重构的理解。

【仅供参考】
网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说，重构通常包括以下方面。
把表格（ table）布局改为DV+CSS。
使网站前端兼容现代浏览器。
对移动平台进行优化。
针对搜索引擎进行优化。
深层次的网站重构应该考虑以下方面。
减少代码间的耦合
让代码保持弹性。
严格按规范编写代码。
设计可扩展的API。
代替旧的框架、语言（如VB）
增强用户体验。
对速度进行优化。
压缩 JavaScript、CSS、 image等前端资源（通常由服务器来解决）。
优化程序的性能（如数据读写）。
采用CDN来加速资源加载。
优化 JavaScript DOM。
缓存HTTP服务器的文件。

16、对web的安全性方面的了解？比如xss，xsrf/csrf

【仅供参考】
跨站脚本攻击（也称为XSS（cross-site scripting 的缩写），为了和 CSS 区分，故叫它XSS）
指利用网站漏洞从用户那里恶意盗取信息。它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码、CSS样式和客户端脚本js。
跨站点请求伪造（也称为XSRF或CSRF（Cross-site request forgery））
指的是黑客诱导用户点击链接，打开黑客的网站，然后黑客利用用户目前的登录状态发起跨站请求。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。

17、针对CSS，如何优化性能？

【仅供参考】
具体优化方法如下。
（1）正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。
display:inline后不应该再使用 width、height、 margin、 padding和float 。
display:inline- block后不应该再使用 float。
display:block后不应该再使用 vertical-align。
display:table-*后不应该再使用 margin或者float。
（2）不滥用 float。
（3）不声明过多的font-size。
（4）当值为0时不需要单位。
（5）标准化各种浏览器前缀，并注意以下几方面。
浏览器无前缀应放在最后。
CSS动画只用（ -webkit-无前缀）两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用blink内核，所以-0-被淘汰）
（6）避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。
（7）尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）
（8）尽量使用CSS3动画。
（9）减少重绘和回流。

18、HTTP 和 HTTPS，为什么HTTPS安全？

【仅供参考】
HTTP协议通常承载与 TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
默认HTTP的端口号为80，HTTPS的端口号为443
因为网络请求需要中间有很多的服务器路由的转发，中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有，https之所有说比http安全，是因为他利用ssl/tls协议传输。包含证书，流量转发，负载均衡，页面适配，浏览器适配，refer传递等，保障了传输过程的安全性

19、浏览器线程有哪些：

【仅供参考】
浏览器的渲染进程是多线程的。js是阻塞单线程的。
浏览器包含有以下线程：
 1.GUI渲染线程
负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
 2.JS引擎线程
也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
JS引擎线程负责解析Javascript脚本，运行代码。
JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。
 3.事件触发线程
归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）
 4.定时触发器线程
传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
 5.异步http请求线程
在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

20、哪些方法可以提升网站前端性能？

【仅供参考】
精灵图合并，减少HTTP请求；压缩HTML、CSS、JavaScript文件；使用CDN托管静态文件；使用 localstorage缓存和 mainfest应用缓存。