经典前端面试题

2/22023年经典前端面试题一、HTML/CSS篇1、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？【仅供参考】

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。

<！doctypehtml>

<htmlmanifest="example.appcache">

</html>

与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。2、HTML5为什么只需要写<！doctypehtm>？【仅供参考】

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们的方式来运行）。而HTM4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的类型。3、HTML5的离线储存怎么使用，工作原理能不能解释一下？【仅供参考】

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

创建一个和html同名的manifest文件，然后在页面头部像下面一样加入一个manifest的属性。

<htmllang="en"manifest="index.manifest">

在如下cache.manifest文件的编写离线存储的资源。

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

（3）在离线状态时，操作window.applicationCache进行离线缓存的操作。

如何更新缓存：

1、更新manifest文件

2、通过javascript操作

3、清除浏览器缓存

注意事项：

1、浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5MB）。

2、如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

3、引用manifest的html必须与manifest文件同源，在同一个域下。

4、FALLBACK中的资源必须和manifest文件同源。

5、当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

6、站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。

7、当manifest文件发生改变时，资源请求本身也会触发更新。4、本地存储和会话（事务）存储之间的区别是什么？【仅供参考】

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。5、HTML5应用程序缓存为应用带来什么优势？【仅供参考】

应用程序缓存为应用带来3个优势。

（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。

（2）速度，让已缓存资源加载得更快。

（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。6、如何区别HTML和HTML5？【仅供参考】

用DOCTYPE声明新增的结构元素和功能元素来区别它们。7、如何进行网站性能优化【仅供参考】

content方面

1、减少HTTP请求：合并文件、CSS精灵、inlineImage

2、减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名

3、减少DOM元素数量

Server方面

1、使用CDN

2、配置ETag

3、对组件使用Gzip压缩

Cookie方面

1、减小cookie大小

css方面

1、将样式表放到页面顶部

2、不使用CSS表达式

3、使用<link>不使用@import

Javascript方面

1、将脚本放到页面底部

2、将javascript和css从外部引入

3、压缩javascript和css

4、删除不需要的脚本

5、减少DOM访问

图片方面

1、优化图片：根据实际颜色需要选择色深、压缩

2、优化css精灵

3、不要在HTML中拉伸图片8、HTML5Canvas元素有什么作用？【仅供参考】

Canvas元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作。9、什么是HTML5？【仅供参考】

HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、SilverLight等的额外插件，这些内容来自动画、视频、富GUI等

HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）合作输出的。10、iframe的优缺点？【仅供参考】

优点：

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

Securitysandbox

并行加载脚本

缺点：

iframe会阻塞主页面的Onload事件

即时内容为空，加载也需要时间

没有语意11、为什么HTML5里面不需要DTD（DocumentTypeDefinition，文档类型定义）？如果不放入<！doctypehtml>标签，HTML5还会工作吗？【仅供参考】

HTML5没有使用SGML或者XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅须放置下面的文档类型代码，让浏览器识别HTML5文档。

如果不放入<！doctypehtml>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。12、如果把HTML5看成一个开放平台，它的构建模块有哪些？【仅供参考】

如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如<nav><header><section><footer>。

≤nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确

<header>标签用来定义文档的页眉。

<section>标签用来描述文档的结构。

<footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息13、什么是SVG？【仅供参考】

SVG即可缩放失量图形（ScalableVectorGraphics）。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。14、rgba0和opacity的透明效果有什么不同？【仅供参考】

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

rem:rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em:子元素字体大小的em是相对于父元素字体大小,元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh:全称是ViewportWidth和ViewportHeight，视窗的宽度和高度，相当于屏幕宽度和高度的1%，不过，处理宽度的时候%单位更合适，处理高度的话vh单位更好。

px:px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。16、CSS中，自适应的单位都有哪些？【仅供参考】

自适应的单位有以下几个

百分比：%

相对于视口宽度的单位：ww

相对于视口高度的单位：vh

相对于视口宽度或者高度（取决于哪个小）的单位：Vm

相对于父元素字体大小的单位：em

相对于根元素字体大小的单位：rem17、我们会在写css的时候做一些标签选择器的初始化样式？为什么？比如：【仅供参考】

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}

body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-family:"SimSun","宋体","ArialNarrow";}

ul,ol{list-style-type:none;}

select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}

a:link{color:#009;}

a:visited{color:#800080;}

a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

为了保证默认的标签样式在不同浏览器能有一致的效果18、如何实现左边固定宽，右边自适应布局【仅供参考】

//1.圣杯布局

<divid="container">

<divid="center"class="column"></div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

</div>

#container{

padding-left:200px;

padding-right:150px;

}

#container.column{

float:left;

}

#center{

width:100%;

}

#left{

width:200px;

margin-left:-100%;

position:relative;

right:200px;

}

#right{

width:150px;

margin-right:-150px;

}

//2.双飞翼布局

<divid="container"class="column">

<divid="center"></div>

</div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

#container{

width:100%;

}

.column{

float:left;

}

#center{

margin-left:200px;

margin-right:150px;

}

#left{

width:200px;

margin-left:-100%;

}

#right{

width:150px;

margin-left:-150px;

}

//3.等高布局（假等高）互补的内外边距

.parent{

overflow:hidden;

}

.left,.right{

margin-bottom:-10000px;

padding-bottom:10000px;

}

//4.等高布局（真等高）弹性盒子

.parent{

display:flex;

}

.child{

flex:1;

}

//calc

<divid="left"class="column"></div>

<divid="center"class="column"></div>

<divid="right"class="column"></div>

.column{

float:left;

}

#left{

width:100px;

}

#right{

width:200px;

}

#center{

width:calc(100%-100px-200px);

}

//5.浮动

<divid="left"class="column"></div>

<divid="right"class="column"></div>

<divid="center"></div>

#left{

float:left;

width:100px;

}

#right{

float:right;

width:200px;

}

#center{

margin-left:100px;

margin-right:200px;

}19、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）【仅供参考】

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

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

百分比：将计算后的值传递给后代20、标准盒子模型和IE（怪异）盒子模型理解多少？【仅供参考】

box-size：content-box是标准盒子模型，实际的区域是padding+border+content，content区域就是设置的元素宽度，padding和border会占用外部空间

box-size：border-box的话，元素的宽度为padding+border+content，元素设置了宽度，不会占用外部空间。二、JS/ES6/TS篇1、split()join()的区别【仅供参考】

split()：以指定的字符分割字符串返回一个数组,字符串方法

join():以指定的字符连接数组中元素返回一个字符串,数组方法2、documentload事件和documentready事件的区别【仅供参考】

页面加载完成有两种事件

load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行

在原生的jS中不包括ready()这个方法，只有load方法就是onload事件3、foo=foo||bar，这行代码是什么意思？为什么要这样写？【仅供参考】

如果foo转为false,则返回bar；否则直接返回foo

逻辑或：如果第一个值为true，直接返回第一个值；否则直接返回第二个值

逻辑与：如果第一个值为false，直接返回第一个值；否则返回第二个值4、基本数据类型和引用数据类型有什么区别？【仅供参考】

（1）变量直接赋值时：

基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据。

引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据。

（2）两者在内存中的存储位置：

基本数据类型存储在栈中。

引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。5、null和undefined的区别？【仅供参考】

null表示一个对象被定义了，值为“空值”；

undefined表示不存在这个值。

（1）变量被声明了，但没有赋值时，就等于undefined。（2)调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（4）函数没有返回值时，默认返回undefined。6、“===”、“==”的区别？【仅供参考】

==，当且仅当两个运算数相等时，它返回true，即不检查数据类型

===，只有在无需类型转换运算数就相等的情况下，才返回true，需要检查数据类型7、target和currentTarget区别【仅供参考】

都是事件对象上的属性

event.target：返回触发事件的元素

event.currentTarget：返回绑定事件的元素(相当于事件中this)8、数组方法pop()push()unshift()shift()【仅供参考】

pop()尾部删除

push()尾部添加

unshift()头部添加

shift()头部删除9、怎么样删除一个对象的属性【仅供参考】

delete对象.属性名10、可以大量节省内存占用，减少事件注册【仅供参考】

2.可以实现当新增子对象时，无需再对其进行事件绑定11、请解释一下什么是重排与重绘？【仅供参考】

重排：当改变dom结构的时候，就会从dom树开始从新渲染页面，这过程叫重排比如添加或者删除可见的DOM元素、元素尺寸改变、元素内容改变、浏览器窗口尺寸改变等等

重绘：当改变样式（不改变几何结构）的时候，它会从render树开始重新开始渲染页面，这过程叫重绘，比如改变颜色，透明等12、请说出三种减低页面加载时间的方法【仅供参考】

压缩css、js文件

合并js、css文件，减少http请求(精灵图)

外部js、css文件放在最底下

减少dom操作，尽可能用变量替代不必要的dom操作13、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight的区别?【仅供参考】

offsetWidth/offsetHeight返回值包含content+padding+border+包含滚动条，效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content+padding，如果有滚动条，也不包含滚动条

scrollWidth/scrollHeight返回值包含content+padding+溢出内容的尺寸14、JavaScript是单线程的，浏览器是多进程的【仅供参考】

每打开一个新网页就会创建一个渲染进程

渲染进程是多线程的

负责页面渲染的GUI渲染线程

负责JavaScript的执行的JavaScript引擎线程，

负责浏览器事件循环的事件触发线程，注意这不归JavaScript引擎线程管

负责定时器的定时触发器线程，setTimeout中低于4ms的时间间隔算为4ms

负责XMLHttpRequest的异步http请求线程

GUI渲染线程与JavaScript引擎线程是互斥的

单线程JavaScript是因为避免DOM渲染的冲突，webworker支持多线程，但是webworker不能访问window对象，document对象等。15、什么是装饰器，它们可以应用于什么？【仅供参考】

装饰器是一种特殊的声明，它允许你通过使用@<name>注释标记来一次性修改类或类成员。每个装饰器都必须引用一个将在运行时评估的函数。

例如，装饰器@sealed将对应于sealed函数。任何标有的@sealed都将用于评估sealed函数。

functionsealed(target){

//dosomethingwith'target'...

}

它们可以附加到：

类声明

方法

配件

特性

参数

注意：默认情况下不启用装饰器。要启用它们，你必须experimentalDecorators从tsconfig.json文件或命令行编辑编译器选项中的字段16、TypeScript中?.,??,!：,_,**等符号的含义？【仅供参考】

?.可选链

??类似与短路或，??避免了一些意外情况，0，NaN以及"",false被视为false值。只有undefind,null被视为false值。

!.在变量名后添加!，可以断言排除undefined和null类型

_,声明该函数将被传递一个参数，但您并不关心它

!:待会分配这个变量，ts不要担心

**求幂17、枚举和常量枚举的区别？【仅供参考】

枚举会被编译时会编译成一个对象，可以被当作对象使用

const枚举会在typescript编译期间被删除，const枚举成员在使用的地方会被内联进来，避免额外的性能开销18、什么时候应该使用关键字unknown？【仅供参考】

unknown，如果你不知道预先期望哪种类型，但想稍后分配它，则应该使用该any关键字，并且该关键字将不起作用。19、es6中对象新增的方法【仅供参考】

①object.assign()用于合并对象和浅拷贝

②object.keys()返回值是一个数组，数组包含了对象可遍历属性的所有key值（与for..in的区别：for...in会走原型链，他不会走原型链）

③object.values()返回值是一个数组，数组包含了目标对象可遍历的所有键值(与for...of的区别：返回值不一样，for...of可以对遍历的键值进行额外操作，object.values()不行)

④object.entries()返回的是所有可遍历属性键和键值的数组20、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key【仅供参考】

letname=Symbol('name');

letproduct={

[name]:"洗衣机",

"price":799

};

Reflect.ownKeys(product);三、Vue/React篇1、React中的状态是什么？它是如何使用的？【仅供参考】

状态是React组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props不同，它们是可变的，并创建动态和交互式组件。可以通过this.state()访问它们2、什么是Props?【仅供参考】

Props是React中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据3、常用的hooks有哪些？【仅供参考】

》useState：保存组件内部状态的函数，提供了setState改变组件状态。

》uesEffect：在函数组件中执行副作用操作，componentDidMount，componentDidUpdate和componentWillUnmount。

负责对某些值进行实时监控。如果第二个可选参数为空，表明在第一次渲染时进行。

如果是需要清除的副作用，一个return一键清除。【数据请求】

》useContext：跨组件传值

》useReducer：useState的加强版，在某些场景下，useReducer会比useState更适用，例如state逻辑较复杂且包含多个子值，或者下一个state依赖于之前的state等。

》useCallback：和useEffect类似，把函数做为第一个参数，把函数的依赖项作为第二个参数传入，改回调函数只有在函数的依赖项发生改变时才会调用，返回的是一个回调函数。

》useMemo和uesCallback类似......返回的是一个值。

》useRefconstrefContainer=useRef(initialValue);

useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数（initialValue）。返回的ref对象在组件的整个生命周期内持续存在。

本质上，useRef就像是可以在其.current属性中保存一个可变值的“盒子”。

你应该熟悉ref这一种访问DOM的主要方式。如果你将ref对象以<divref={myRef}/>形式传入组件，则无论该节点如何改变，React都会将ref对象的.current属性设置为相应的DOM节点。

然而，useRef()比ref属性更有用。它可以<ahref="https:///p/515755713/edit#is-there-something-like-instance-variables">很方便地保存任何可变值，其类似于在class中使用实例字段的方式。

这是因为它创建的是一个普通Javascript对象。而useRef()和自建一个{current:...}对象的唯一区别是，useRef会在每次渲染时返回同一个ref对象。

请记住，当ref对象内容发生变化时，useRef并不会通知你。变更.current属性不会引发组件重新渲染。如果想要在React绑定或解绑DOM节点的ref时运行某些代码，则需要使用回调ref来实现。

》useImperativeHandleuseImperativeHandle(ref,createHandle,[deps])

useImperativeHandle可以让你在使用ref时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用ref这样的命令式代码。useImperativeHandle应当与forwardRef一起使用：

functionFancyInput(props,ref){

constinputRef=useRef();

useImperativeHandle(ref,()=>({

focus:()=>{

inputRef.current.focus();

}

}));

return<inputref={inputRef}.../>;}

FancyInput=forwardRef(FancyInput);

在本例中，渲染<FancyInputref={inputRef}/>的父组件可以调用inputRef.current.focus()。

》useLayoutEffect

其函数签名与useEffect相同，但它会在所有的DOM变更之后同步调用effect。可以使用它来读取DOM布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect内部的更新计划将被同步刷新。

尽可能使用标准的useEffect以避免阻塞视觉更新。

》useDebugValue可用于在React开发者工具中显示自定义hook的标签。

》useDeferredValueconst[deferredValue]=useDeferredValue(value);

接受一个值并返回该值的新副本，该副本将推迟到更紧急的更新。如果当前渲染是紧急更新的结果（如用户输入），React将返回以前的值，然后在紧急渲染完成后渲染新值。

useDeferredValue只延迟传递给它的值。

如果要防止子组件在紧急更新期间重新呈现，还必须使用React来记忆该组件。记录或反应。使用备忘录：

functionTypeahead(){

constquery=useSearchQuery('');

constdeferredQuery=useDeferredValue(query);

//Memonizing告诉React仅在延迟查询更改时重新呈现，

//当查询发生变化时不会。

constsuggestions=useMemo(()=>

<SearchSuggestionsquery={deferredQuery}/>,

[deferredQuery]

);

return(

<>

<SearchInputquery={query}/>

<Suspensefallback="Loadingresults...">

{suggestions}

</Suspense>

</>

);}

记住子对象会告诉React，它只需要在延迟查询更改时重新呈现它们，而不需要在查询更改时重新呈现它们。这个警告并不是useDeferredValue独有的，它与使用去抖动或节流的类似钩子使用的模式相同。

》useTransitionconst[isPending,startTransition]=useTransition();

返回转换挂起状态的有状态值，以及启动转换的函数。

startTransition允许您将提供的回调中的更新标记为转换：

》useIdconstid=useId();

useId是一个钩子，用于生成跨服务器和客户端稳定的唯一ID，同时避免不匹配。

例如，将id直接传递给需要它的元素：

》useSyncExternalStore

conststate=useSyncExternalStore(subscribe,getSnapshot[,getServerSnapshot]);

是一个推荐用于读取和订阅外部数据源的钩子，其方式与选择性水合和时间切片等并发渲染功能兼容。

》useInsertionEffectuseInsertionEffect(didUpdate);

签名与useEffect相同，但它在所有DOM突变之前同步激发。在useLayoutEffect中读取布局之前，使用此选项将样式注入DOM。由于这个钩子的作用域有限，所以这个钩子不能访问refs，也不能安排更新。4、useEffect的回调函数为什么无法使用async？【仅供参考】

React本身并不支持这么做，理由是effectfunction应该返回一个销毁函数（effect：是指return返回的cleanup函数），如果useEffect第一个参数传入async，返回值则变成了Promise，会导致react在调用销毁函数的时候报错：function.applyisundefined。5、列出Redux的组件【仅供参考】

Action–这是一个用来描述发生了什么事情的对象。

Reducer–这是一个确定状态将如何变化的地方。

Store–整个程序的状态/对象树保存在Store中。

View–只显示Store提供的数据。6、类组件和函数组件之间的区别是什么？【仅供参考】

类组件可以使用其他特性，如状态和生命周期钩子，并且他有this

函数组件只能接收props渲染到页面，无状态组件，没有this，不能使用生命周期钩子

函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件7、常用的hooks【仅供参考】

useState：定义state的数据，参数是初始化的数据，返回值两个值1.初始化值，2.修改的方法

useEffect：副作用函数，顾名思义，副作用即只有使用过后才会产生副作用

当作生命周期来使用：第二个参数如果没写的话，页面一更新触发，compoentDidMountcompoentDidUpdate

第二个参数如果空数组的话，只执行一次，compoentDidMount

数组中跟某些变量，当作监听器来使用，监听数据的变化，

useEffect是一个副作用函数，组件更新完成后触发的函数

如果我们在useEffect返回一个函数的，组件被销毁的时候触发

useMemo：用来计算数据，返回一个结果，监听数据的变化，第二个参数就是监听的数据，具有缓存性

useMemo和useEffect相比较来说，useMemo是组件更新的时候触发生命周期

useCallback：当父组件向子组件传递函数的时候，父组件的改变会导致函数的重新调用产生新的作用域，所以还是会导致子组件的更新渲染，这个时候我们可以使用useCallback来缓存组件

useRef：相当于createRef的使用，创建组件的属性信息

useContext：相当在函数组件中获取context状态数的内容信息

useReducer：useReducer是用来弥补useState的补不足，可以把数据进行集中式的管理，单独处理数据的逻辑信息8、如何创建refs？【仅供参考】

通过React.createRef（）创建的，并通过ref属性附加到react元素，在构造组件中，

通常将Refs分配给实例属性，以便可以在整个组件中引用它们。9、react生命周期方法有哪些？【仅供参考】

componentWillMount:在渲染之前执行，用于根组件中的App级配置。

componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM的操作或状态更新以及设置事件监听器。

componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染

shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在state或props更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。

componentWillUpdate：在shouldComponentUpdate返回true确定要更新组件之前件之前执行。

componentDidUpdate：它主要用于更新DOM以响应props或state更改。

componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。10、vue-cli工程升级vue版本【仅供参考】

在项目目录里运行npmupgradevuevue-template-compiler，不出意外的话，可以正常运行和build。如果有任何问题，删除node_modules文件夹然后重新运行npmi即可。

（简单的说就是升级vue和vue-template-compiler两个插件）11、v-html与v-text区别【仅供参考】

答案：

v-html:可以转义标签和渲染数据

v-text：不能转义标签只能渲染数据

v-text展示效果：<strong>Hello</strong>Vue!

v-html展示效果：HelloVue!12、为什么避免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循环13、vue2和vue3的响应式原理都有什么区别呢？【仅供参考】

vue2用的是Object.defindProperty但是vue3用的是Proxy

Object.defindProperty缺点：

一次只能对一个属性进行监听，需要遍历来对所有属性监听

对于对象的新增属性，需要手动监听

对于数组通过push、unshift方法增加的元素，也无法监听

Proxy就没有这个问题，可以监听整个对象的数据变化，所以用vue3.0会用Proxy代替definedProperty。14、Vue框架怎么实现对象和数组的监听？【仅供参考】

Vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。

即：

输入框内容变化时，Data中的数据同步变化。即View=>Data的变化。

Data中的数据变化时，文本节点的内容同步变化。即Data=>View的变化。

其中，View变化更新Data，可以通过事件监听的方式来实现，所以Vue的数据双向绑定的工作主要是如何根据Data变化更新View。

Vue主要通过以下4个步骤来实现数据双向绑定的：

实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利用Object.defineProperty()对属性都加上setter和getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

实现一个解析器Compile：解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者Watcher：Watcher订阅者是Observer和Compile之间通信的桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性值变化的消息时，触发解析器Compile中对应的更新函数。

实现一个订阅器Dep：订阅器采用发布-订阅设计模式，用来收集订阅者Watcher，对监听器Observer和订阅者Watcher进行统一管理。15、Vuex是通过什么方式提供响应式数据的？【仅供参考】

在Store构造函数中通过newVue({})实现的。

利用Vue来监听state下的数据变化，

给状态(数据)添加getter、setter可以监听数据改变。16、v-cloak可以解决什么问题【仅供参考】

v-cloak指令解决vue屏幕闪屏

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。17、0修改了组件的声明方式，改成了类式的写法，这样使得和TypeScript的结合变得很容易。【仅供参考】

此外，vue的源码也改用了TypeScript来写。其实当代码的功能复杂之后，必须有一个静态类型系统来做一些辅助管理。

现在vue3.0也全面改用TypeScript来重写了，更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

（4）其它方面的更改

vue3.0的改变是全面的，上面只涉及到主要的3个方面，还有一些其他的更改：

支持自定义渲染器，从而使得weex可以通过自定义渲染器的方式来扩展，而不是直接fork源码来改的方式。

支持Fragment（多个根节点）和Protal（在dom其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。

基于treeshaking优化，提供了更多的内置功能。18、Vue组件间通信有哪几种方式？【仅供参考】

Vue组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对Vue掌握的越熟练。

Vue组件间通信只要指以下3类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props/$emit适用父子组件通信

这种方法是Vue组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref与$parent/$children适用父子组件通信

ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例

$parent/$children：访问父/子实例

（3）EventBus（$emit/$on）适用于父子、隔代、兄弟组件通信

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners适用于隔代组件通信

$attrs：包含了父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件。通常配合inheritAttrs选项一起使用。

$listeners：包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件

（5）provide/inject适用于隔代组件通信

祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。provide/injectAPI主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex适用于父子、隔代、兄弟组件通信

Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。19、什么是Proxy？【仅供参考】

Proxy：代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

Proxy：对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。

Proxy是ES6中新增的一个特性JavaScript中用来表示由它来’代理’某些操作

Proxy是ES6中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。Proxy让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

使用Proxy的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。20、说一下v-slot的作用【仅供参考】

提供具名插槽或需要接收prop的插槽。四、Webpack/Rollup篇1、webpack的工作原理?【仅供参考】

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

gulp：是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作

（1）构建工具

（2）自动化

（3）用于：提高效率——能够优化前端工作流程，提高工作效率

（4）自动刷新页面，雪碧图，压缩css、js，编译less，检查语法等

（5）使用gulp可以配置你需要的插件，把以前需要手工做的事情让它帮你做了

webpack：是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

（1）打包工具

（2）模块化识别

（3）用于：编译模块代码方案

两者不是一个工具，不具有可比性，更不冲突3、有哪些常见的Loader？他们是解决什么问题的？【仅供参考】

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件

url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去

source-map-loader：加载额外的SourceMap文件，以方便断点调试

image-loader：加载并且压缩图片文件

babel-loader：把ES6转换成ES5

css-loader：加载CSS，支持模块化、压缩、文件导入等特性

style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。

eslint-loader：通过ESLint检查JavaScript代码4、Webpack中Loader和Plugin的区别【仅供参考】

运行时机1.loader运行在编译阶段2.plugins在整个周期都起作用

使用方式Loader:1.下载2.使用Plugin:1.下载2.引用3.使用5、Webpack的基本功能有哪些？【仅供参考】

代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等等

文件优化：压缩JavaScript、CSS、html代码，压缩合并图片等

代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件

自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过

自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。6、什么是模热更新？有什么优点？【仅供参考】

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。

在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式7、npm打包时需要注意哪些？如何利用webpack来更好的构建？【仅供参考】

Npm是目前最大的JavaScript模块仓库，里面有来自全世界开发者上传的可复用模块。

你可能只是JS模块的使用者，但是有些情况你也会去选择上传自己开发的模块。

关于NPM模块上传的方法可以去官网上进行学习，这里只讲解如何利用webpack来构建。

NPM模块需要注意以下问题：

要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则。

Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。

Npm包大小应该是尽量小（有些仓库会限制包大小）

发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。

UI组件类的模块应该将依赖的其它资源文件，例如.css文件也需要包含在发布的模块里。8、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。在webpack5.43.0之后可将其设为false以避免一个新的运行时chunk。

publicPath:当该入口的输出文件在浏览器中被引用时，为它们指定一个公共URL地址9、plugin的作用【仅供参考】

plugin是一个类，类中有一个apply()方法，主要用于Plugin的安装，可以在其中监听一些来自编译器发出的事件，在合适的时机做一些事情。10、有哪些常见的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：定义环境变量11、常见Plugins【仅供参考】

HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle.js

cleanwebPackPlugin打包自动删除上次打包文件12、Webpack的打包过程/打包原理/构建流程？【仅供参考】

初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler

编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理

输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中

细节：

WebpackCLI通过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的运行结果13、webpack是解决什么问题而生的?【仅供参考】

如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less,sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。14、loader的作用【仅供参考】

webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函数会以源码作为参数，比如，将ES6转换为ES5，将less转换为css，然后再将css转换为js，以便能嵌入到html文件中。15、Plugin（插件）的作用是什么？【仅供参考】

Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它给Webpack带来了很大的灵活性。

Webpack是通过plugins属性来配置需要使用的插件列表的。plugins属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。16、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全。【仅供参考】

Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数；

开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；

确定入口：根据配置中的entry找出所有的入口文件；

编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

完成模块编译：在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。17、babel相关:polyfill以及runtime区别，ESstage含义，preset–env作用等等【仅供参考】

polyfill以及runtime区别

babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。

babel-runtime它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。

babel-polyfill它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Atotype.find方法，引入polyfill,我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。

babel-runtime:它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要importPromisefrom'babel-runtime/core-js/promise'即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

stage-x：指处于某一阶段的js语言提案

Stage0-设想（Strawman）：只是一个想法，可能有Babel插件。

Stage1-建议（Proposal）：这是值得跟进的。

Stage2-草案（Draft）：初始规范。

Stage3-候选（Candidate）：完成规范并在浏览器上初步实现。

Stage4-完成（Finished）：将添加到下一个年度版本发布中。18、lazyloading（模块懒加载）【仅供参考】

借助import()语法异步引入组件，实现文件懒加载：prefetch,preloading

webpack提倡多写异步代码，提升代码利用率，从而提升页面性能

先加载主业务文件，prefetch利用网络空闲时间，异步加载组件

import(/*webpackPrefetch:true/‘LoginModal’);

preload和主业务文件一起加载，异步加载组件

import(/webpackPreload:true*/‘ChartingLibrary’);19、ExtractTextPlugin插件的作用【仅供参考】

ExtractTextPlugin插件的作用是提取出JavaScript代码里的CSS到一个单独的文件。

对此你可以通过插件的filename属性，告诉插件输出的CSS文件名称是通过[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名称，[contenthash:8]代表根据文件内容算出的8位hash值，还有很多配置选项可以在ExtractTextPlugin的主页上查到。20、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文件，并且可以过滤无用的代码五、性能/浏览器/其他篇1、缓存机制，主要是问304和强缓存,协商缓存【仅供参考】

cache-control:max-age="xxxx"算是强缓存的一个标志。强缓存(max-age="设置缓存的时间")。意思就是只要时间没超时，就会在请求的时使用缓存的文件，不会重新请求资源。浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。（强缓存）

若未命中强缓存，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304，浏览器从缓存中加载资源（协商缓存）

如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。（新的请求）

协商缓存：它的触发条件有两点、

第一点是Cache-Control的值为no-cache，则会促发协商缓存。

第二点是max-age过期了，触发协商缓存。

后端需要怎么设置

以nodejs为例，如果需要浏览器强缓存，可以这样设置：

res.setHeader('Cache-Control','public,max-age=xxx');

如果需要协商缓存，则可以这样设置：

res.setHeader('Cache-Control','public,max-age=0');

res.setHeader('Last-Modified',xxx);

res.setHeader('ETag',xxx);2、如何优化服务器端的接口？【仅供参考】

具体方法如下。

（1）接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成一个以减少HTTP请求数。

（2）减少数据量：去掉接口返回的数据中不需要的数据。

（3）缓存数据：首次加载请求后，缓存数据；对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度。3、浏览器线程有哪些：【仅供参考】

浏览器的渲染进程是多线程的。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引擎执行。4、HTTP和HTTPS，为什么HTTPS安全？【仅供参考】

HTTP协议通常承载与TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS

默认HTTP的端口号为80，HTTPS的端口号为443

因为网络请求需要中间有很多的服务器路由的转发，中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有，https之所有说比http安全，是因为他利用ssl/tls协议传输。包含证书，流量转发，负载均衡，页面适配，浏览器适配，refer传递等，保障了传输过程的安全性5、移动端性能优化？【仅供参考】

尽量使用css3动画，开启硬件加速

适当使用touch时间代替click时间

避免使用css3渐变阴影效果

可以用transform:translateZ(0)来开启硬件加速

不滥用float。float在渲染时计算量比较大，尽量减少使用

不滥用web字体。web字体需要下载，解析，重绘当前页面

合理使用requestAnimationFrame动画代替setTimeout

css中的属性（css3t