历年前端1~5年经验面试题

历年前端（1~5年经验）面试题

（一）

一、HTML/CSS篇

1、href与src区别？【仅供参考】href（HypertextReference）指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址）srcsource（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置href与src的区别请求资源类型不同href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系在请求src资源时会将其指向的资源下载并应用到文档中，比如JavaScript脚本，img图片；作用结果不同href用于在当前文档和引用资源之间确立联系；src用于替换当前内容；浏览器解析方式不同当浏览器解析到src会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容这也是为什么建议把js脚本放在底部而不是头部的原因

2、HTML5为什么只需要写!doctypehtm【仅供参考】HTML5不基于SGML因此不需要对DTD进行引用，但是需要D0CTYPE来规范浏览器的行为（让浏览器按照它们的方式来运行）而HTM

4.01基于SGML所以需要对DTD进行引用，才能告知浏览器文档所使用的类型

3、行内元素有哪些？块级元素有哪些？空（void）元素有那些？【仅供参考】定义CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block，则为“块级”元素;span默认display属性值为inline”是“行内”元素行内元素有abspanimginputselectstrong（强调的语气）使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快W3c标准使网站容易维护、有利于搜索引擎查找

13、TypeScript中的类型断言？【仅供参考】类型断言可以手动指定一个值的类型//第一种letemployeeCode=numbercode;〃第二种letemployeeCode=codeasnumber

14、TypeScript中？.，？？，！，_**等符号的含义？【仅供参考】.可选链类似与短路或，？避免了一些意外情况，0NaN以及〃[false被视为false值只有undefindnull被视为false值!.在变量名后添加！，可以断言排除undefined和null类型一，声明该函数将被传递一个参数，但您并不关心它!待会分配这个变量，ts不要担心**求嘉

15、TypeScript的as语法是什么？【仅供参考】as是TypeScript中类型断言的附加语法，引入as-语法的原因是原始语法与JSX冲突letempCode:any=111;letemployeeCode=codeasnumber;

16、枚举和常量枚举的区别？【仅供参考】枚举会被编译时会编译成一个对象，可以被当作对象使用const枚举会在typescript编译期间被删除，const枚举成员在使用的地方会被内联进来，避免额外的性能开销

17、TypeScript与JavaScript有什么不同【仅供参考】TypeScript支持ES6它支持强类型或静态类型、模块、可选参数等它支持面向对象的编程概念，如类、接口、继承、泛型等TypeScript有可选的参数特性它编译代码并在开发期间突出显示错误TypeScript支持模块TypeScript在编译时提供了错误检查功能它将编译代码，如果发现任何错误，它将在运行脚本之前突出显示这些错误

18、Promise中reject和catch处理上有什么区别【仅供参考】reject是用来抛出异常，catch是用来处理异常reject是Promise的方法，而catch是Promise实例的方法reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch网络异常比如断网，会直接进入catch而不会进入then的第二个回调

19、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能【仅供参考】基本的字符串格式化将表达式嵌入字符串中进行拼接用${}来界定在ES5时我们通过反斜杠来做多行字符串或者字符串一行行拼接ES6反引号、就能解决类模板字符串的功能letname=web;letage=10;letstr=你好，${name}已经${age}岁了str=str.replace/\$\{[}]*\}/gfunction{returnevalarguments

[1];consolelogstr;〃你好，web已经10岁了

20、什么时候不使用箭头函数？说出三个或更多的例子【仅供参考】使用函数作为构造函数时箭头函数没有构造函数要在函数中使用this/arguments时，由于箭头函数本身不具有this/arguments因此它们取决于外部上下文当想要函数被提升时（箭头函数是匿名的）当我们希望函数中的this指向调用这个函数的对象时，也不用箭头函数，因为咱们无法保证this即对象本身

三、Vue/React篇

1、什么是ReactFiber【仅供参考】Fiber是React16中新的协调引擎或重新实现核心算法它的主要目标是支持虚拟DOM的增量渲染ReactFiber的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语ReactFiber的目标是增强其在动画、布局和手势等领域的适用性它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中

2、React中的合成事件是什么？【仅供参考】合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象它们将不同浏览器的行为合并为一个APE这样做是为了确保事件在不同浏览器中显示一致的属性

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

4、为什么ReactRouterv4中使用switch关键字【仅供参考】虽然＜P＞用于封装Router中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用“switch”关键字使用时，＜switch＞标记会按顺序将已定义的URL与己定义的路由进行匹配找到第一个匹配项后，它将渲染指定的路径从而绕过其它路线

5、什么是高阶组件？【仅供参考】高阶组件HOC是接受一个组件并返回一个新组件的函数基本上，这是一个模式，是从React的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为HOC可以用于以下许多用例代码重用、逻辑和引导抽象渲染劫持state抽象和操作props处理

6、Vue组件间通信有哪几种方式？【仅供参考】Vue组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对Vue掌握的越熟练Vue组件间通信只要指以下3类通信父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信props/$emit适用父子组件通信这种方法是Vue组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍ref与$parent/$children适用父子组件通信ref如果在普通的D0M元素上使用，引用指向的就是D0M元素；如果用在子组件上，引用就指向组件实例Sparent/$children访问父/子实例EventBus$emit/$on适用于父子、隔代、兄弟组件通信这种方法通过一个空的Vue实例作为中央事件总线事件中心，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件$attrs/$listeners适用于隔代组件通信Sattrs包含了父作用域中不被prop所识别（且获取）的特性绑定（class和style除外）当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定（class和style除外）并且可以通过v-bind=$attrs”传入内部组件通常配合inheritAttrs选项一起使用Slisteners包含了父作用域中的（不含.native修饰器的）v-on事件监听器它可以通过v-on=$listeners”传入内部组件provide/inject适用于隔代组件通信祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量provide/injectAPI主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系Vuex适用于父子、隔代、兄弟组件通信Vuex是一个专为Vue.js应用程序开发的状态管理模式每一个Vuex应用的核心就是store（仓库）“store”基本上就是一个容器，它包含着你的应用中大部分的状态（state）oVuex的状态存储是响应式的当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新改变store中的状态的唯一途径就是显式地提交（commit）mutation这样使得我们可以方便地跟踪每一个状态的变化

7、Vuex是通过什么方式提供响应式数据的？【仅供参考】在Store构造函数中通过newVue（｛｝）实现的利用Vue来监听state下的数据变化，给状态（数据）添加getter、setter可以监听数据改变

8、vue.js的两个核心是什么？【仅供参考】数据驱动和组件化思想

9、ObjectdefineProperty怎么用，三个参数？，有什么作用啊【仅供参考】Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象obj需要定义属性的对象prop需要定义的属性{}要定义或修改的属性描述符value:〃18〃，//设置默认值与get互斥enumerable:true〃这一句控制属性可以枚举enumerable改为true就可以参与遍历了默认值falsewritable:true//该属性是否可写默认值false与set互斥configurable:true//该属性是否可被删除默认值falseget//当有人读取prop的时候get函数就会调用，并且返回就是sss的值set//当有人修改prop的时候set函数就会调用，有个参数这个参数就是修改后的值

10、说一下Vue生命周期四个初始化阶段方法【仅供参考】beforeCreate{}创建vue之前执行数据和虚拟D0M树还没有加载完成created{}创建vue之前执行数据已经加载好，虚拟D0M树没有加载完成beforeMount0{}页面渲染之前执行数据和虚拟D0M树都已经加载好，但数据这时并没有填充mounted{}页面渲染之后数据已经填充完成

11、v-pre的作用【仅供参考】可以让元素及元素的子元素不编译解析，这样可以加快vue的解析速度

12、响应式原理变化侦测【仅供参考】使用发布订阅模式将数据劫持和模板编译结合，实现双向绑定

1、observer:封装Object.defineProperty方法用来劫持对象属性的getter和setter以此来追踪数据变化

2、读取数据时触发getter来收集依赖Watcher到Dep

3、修改数据时触发setter并遍历依赖列表，通知所有相关依赖Watcher

4、Dep类为依赖找一个存储依赖的地方，用来收集和管理依赖，在getter中收集，在setter中通知

5、Watcher类就是收集的依赖，实际上是一个订阅器，Watcher会将自己的实例赋值给windowtarget全局变量上，然后去主动访问属性，触发属性的gettergetter中会将此Watcher收集到Dep中，Watcher的update方法会在Dep的通知方法中被调用，触发更新

6、Observer类用来将一个对象的所有属性和子属性都变成响应式的，通过递归调用defineReactive来实现

7、由于无法侦测对象上新增/删除属性，所以提供$set和$deleteAPI

513、说一下V-bind是什么，有什么用？【仅供参考】v-bind绑定属性

14、说一*下vm.$mount的作用【仅供参考】手动地挂载一个未挂载的实例

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

16、谈谈你对keep-alive的了解？【仅供参考】keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性一般结合路由和动态组件一起使用，用于缓存组件；提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高；对应两个钩子函数activated和deactivated当组件被激活时，触发钩子函数activated当组件被移除时触发钩子函数deactivatedo

17、v-cloak指令的作用【仅供参考】用于防止闪屏，防止页面出现{{}}

18、说一下你对组件的理解【仅供参考】对页面某一个区域进行封装，这个区域可以很小，也可以就是整个页面组件本身就是一个Vue实例对象组件必须有且只有一个根元素

1、就是一个可复用的vue实例，可以作用组件对页面进行封装，可以把页面的某一个区域封装成一个组件，然后复用封装的区域可以就是一个标签，也可以是整个页面

2、组件就是一个可复用的vue实例，则vue中有的东西，组件中都可以使用比如属性计算，监听，生命周期但是组件没有el这个选项，并且data是一个函数

3、组件必需要有一个根元素标签不能有两个

19、举例说明vue事件绑定中有哪些修饰符，分别作用是什么【仅供参考】stop-调用event.stopPropagation0prevent-调用event.preventDefaultocapture-添加事件侦听器时使用capture模式self-只当事件是从侦听器绑定的元素本身触发时才触发回调{keyCode|keyAlias-只当事件是从特定键触发时才触发回调.native-监听组件根元素的原生事件once-只触发一次回调left-

2.

2.0只当点击鼠标左键时触发right-

2.

2.0只当点击鼠标右键时触发middle-

2.

2.0只当点击鼠标中键时触发passive-

2.

3.0以{passive:true}模式添加侦听器

20、v-model的原理？【仅供参考】我们在vue项目中主要使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定，我们知道v-model本质上不过是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件text和textarea元素使用value属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件以input表单元素为例inputv-model=，something相当于inputv-bind:value=/，something/zv-on:input二〃something;$event.targetvalue”〉如果在自定义组件中，v-model默认会利用名为value的prop和名为input的事件，如下所示父组件ModelChildv-model=z/messagez//ModelChild子组件div{{value}}/divprops:{value:String}methods:{testl{this.$emitinput5小红}

四、Webpack/Rollup篇

1、webpackrollup和parcel对比？【仅供参考】webpack为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活，插件多rollup用标准化的格式es6来写代码，通过减少死代码tree-shaking尽可能地缩小包体积parcel超快的打包速度，多线程在多核上并发编译，不用任何配置webpack和rollup都需要配config文件，指明entryoutputplugintransformations二者的细微区别在于rollup有对import/export所做的nodepolyfillswebpack没有rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join两者实现tree-shaking的方式也不一样，这是个面试点，会问到，实现方式，哪个体积更小更彻底，为什么parcel则是完全开箱可用的，不用配置

2、Webpack的基本功能有哪些？【仅供参考】代码转换TypeScript编译成JavaScript、SCSS编译成CSS等等文件优化压缩JavaScript、CSS、html代码，压缩合并图片等代码分割提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载模块合并在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件自动刷新监听本地源代码的变化，自动构建，刷新浏览器代码校验在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统

3、Webpack的打包过程/打包原理/构建流程？【仅供参考】初始化启动构建，读取与合并配置参数，加载plugin实例化Compiler编译从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module递归的进行编译处理输出将编译后的Module组合成Chunk将Chunk转换成文件，输出到文件系统中细节WebpackCLI通过yargs模块解析CLI参数，并转化为配置对象option单入口Object多入口:Array调用webpackoption创建compiler对象如果有optionplugin则遍历调用plugin.apply来注册plugin判断是否开启了watch如果开启则调用compilerwatch否则调用compiler.run开始构建创建Compilation对象来收集全部资源和信息，然后触发make钩子make阶段从入口开始递归所有依赖，每次遍历时调用对应Loader翻译文件中内容，然后生成AST遍历AST找到下个依赖继续递归，块级元素有divulollidldtddhlh2h3h4…p空元素常见brhrimginputlinkmeta不常见areabasecolcommandembedkeygenparamsourcetrackwbr

4、请你说一下WebWorker和WebSocket的作用【仅供参考】WebWorker的作用如下1通过worker=newWorkerurl加载一个JavaScript文件，创建一■个Worker同时返回一个Worker实例2用worker.postMessagedata向Worker发送数据3绑定workeronmessage接收Worker发送过来的数据4可以使用workerterminate终止一个Worker的执行WebSocket的作用如下它是Web应用程序的传输协议，提供了双向的、按序到达的数据流它是HTML5新增的协议，WebSocket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询

5、HTML5应用程序缓存为应用带来什么优势？【仅供参考】应用程序缓存为应用带来3个优势1离线浏览，让用户可在应用离线时网络不可用时使用它们2速度，让已缓存资源加载得更快3减少服务器负载，让浏览器将只下载服务器更新过的资源

6、介绍一下你对浏览器内核的理解？【仅供参考】主要分成两部分渲染引擎layoutengineer或RenderingEngine和JS引擎渲染引擎负责取得网页的内容HTML、XML、图像等等、整理讯息例如加入CSS等，以及计算网页的显示方式，然后渲染到用户的屏幕上JS引擎则解析和执行javascript来实现逻辑和控制D0M进行交互最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎根据入口和模块之间关系组装chunk输出到dist中的一个文件内在以上过程中，webpack会在特定的时间点使用tapable模块广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果

4、webpack的作用是什么，谈谈你对它的理解？【仅供参考】现在的前端网页功能丰富，特别是SPAsinglepagewebapplication单页应用技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决ScssLess……新增样式的扩展写法的编译工作所以现代化的前端已经完全依赖于webpack的辅助了现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具react.js+WebPackvue.js+WebPackAngluarJS+WebPack

5、HMR热模块更新【仅供参考】借助webpack.HotModuleReplacementPlugindevServer开启hot场景1实现只刷新css不影响js场景2js中实现热更新，只更新指定js模块ifmodulehot{modulehot.acceptC./libraryjsfunction{//Dosomethingwiththeupdatedlibrarymodule…}；

6、webpack的工作原理？【仅供参考】WebPack可以看做是模块打包机它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言SassTypeScript等，并将其转换和打包为合适的格式供浏览器使用在

3.0出现后，Webpack还肩负起了优化项目的责任

7、有哪些常见的Plugin他们是解决什么问题的【仅供参考】html-webpack-plugin可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）clean-webpack-plugin重新打包自动清空dist目录mini-css-extract-plugin提取js中的css成单独文件optimize-css-assets-webpack-plugin压缩cssuglifyjs-webpack-plugin压缩jscommons-chunk-plugin提取公共代码define-plugin定义环境变量

8、常见Plugins【仅供参考】HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle.jscleanwebPackPlugin打包自动删除上次打包文件

9、前端为什么要进行打包和构建？【仅供参考】代码层面体积更小（Tree-shaking、压缩、合并），加载更快编译高级语言和语法（TS、ES

6、模块化、scss）兼容性和错误检查（polyfillpostcsseslint）研发流程层面统

一、高效的开发环境统一的构建流程和产出标准集成公司构建规范（提测、上线）

10、webpack的核心概念【仅供参考】Entry入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.jsoutput出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./distModule模块，在Webpack里一切皆模块，一个模块对应着一个文件Webpack会从配置的Entry开始递归找出所有依赖的模块Chunk代码块，一个Chunk由多个模块组合而成，用于代码合并与分割Loader模块转换器，用于把模块原内容按照需求转换成新内容Plugin扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件插件可以监听这些事件的发生，在特定时机做对应的事情

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

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

13、有哪些常见的Loader他们是解决什么问题的？【仅供参考】file-loader把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件url-loader和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去source-map-1oader加载额外的SourceMap文件，以方便断点调试image-loader加载并且压缩图片文件babel-loader把ES6转换成ES5css-loader加载CSS支持模块化、压缩、文件导入等特性style-loader把CSS代码注入到JavaScript中，通过D0M操作去加载CSSoeslint-loader通过ESLint检查JavaScript代码

14、什么是Tree-sharking【仅供参考】指打包中去除那些引入了但在代码中没用到的死代码在wepack中jstreeshaking通过UglifyJsPlugin来进行，css中通过purify-CSS来进行

15、理解babel-preset-env可以将es6的代码编译成es

5.可以将es7的代码编译为es

6.可以将es8的代码编译为es

7.支持现有所有ECMAScript版本的新特性

16、babel相关polyfill以及runtime区别，ESstage含义preset-env作用等等【仅供参考】polyfill以及runtime区别babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容babel-runtime它是将es6编译成es5去执行我们使用es6的语法来编写，最终会通过babel-runtime编译成es

5.也就是说，不管浏览器是否支持ES6只要是ES6的语法，它都会进行转码成ES

5.所以就有很多冗余的代码babel-polyfill它是通过向全局对象和内置对象的prototype上添加方法来实现的比如运行环境中不支持Arrayprototype.find方法，引入polyfill我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染babel-runtime:它不会污染全局对象和内置对象的原型，比如说我们需要Promise我们只需要importPromisefrom5babel-runtime/core-js/promise即可，这样不仅避免污染全局对象，而且可以减少不必要的代码stage-x指处于某一阶段的js语言提案Strawman只是一个想法，可能有Babel插件Proposal这是值得跟进的Draft初始规范Candidate完成规范并在浏览器上初步实现Finished将添加到下一个年度版本发布中

17、plugin的作用【仅供参考】plugin是一个类，类中有一个apply（）方法，主要用于Plugin的安装，可以在其中监听一些来自编译器发出的事件，在合适的时机做一些事情

18、Plugin（插件）的作用是什么？【仅供参考】Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它给Webpack带来了很大的灵活性Webpack是通过plugins属性来配置需要使用的插件列表的plugins属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性

19、什么是bundle什么是chunk什么是module【仅供参考】bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块module是开发中的单个模块

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

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

1、如何设置DNS缓存【仅供参考】在浏览器地址栏中输入URL以后，浏览器首先要查询域名（hostname）对应服务器的IP地址，一般需要耗费20~120nls的时间DNS查询完成之前，浏览器无法识别服务器IP因此不下载任何数据基于性能考虑，ISP运营商、局域网路由、操作系统、客户端（浏览器）均会有相应的DNS缓存机制

（1）正IE缓存30nlin可以通过注册表中DnsCacheTimeout项设置

（2）Firefox混存1min通过network.dnsCacheExpiration配置

（3）在Chrome中通过依次单击“设置”一“选项”一“高级选项”，并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间

2、如何优化服务器端的接口？【仅供参考】具体方法如下

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

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

（3）缓存数据首次加载请求后，缓存数据；对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度

3、列举你知道的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代码放在页面底部（这样避免阻塞页面渲染而使页面出现长时间的空白）

4、如果一个页面上有大量的图片（大型电商网站），网页加载很慢，可以用哪些方法优化这些图片的加载，从而提升用户体验？【仅供参考】对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载如果图片为CSS图片，可以使用CSSSprite、SVGsprite、Iconfont、Base64等技术如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了

5、如何优化服务器端？【仅供参考】具体方法如下1启用Gzip压缩2延长资源缓存时间，合理设置资源的过期时间，对于一些长期不更新的静态资源过期时间设置得长一些3减少cookie头信息的大小，头信息越大，资源传输速度越慢4图片或者CSS、JavaScript文件均可使用CDN来加速

6、常见的浏览器内核有哪些？【仅供参考】主要分成两部分渲染引擎layoutengineer或RenderingEngine和JS引擎渲染引擎负责取得网页的内容HTML.XML、图像等等、整理讯息例如加入CSS等，以及计算网页的显示方式，然后会输出至显示器或打印机浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核JS引擎则解析和执行javascript来实现网页的动态效果最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎常见内核Trident内核IEMaxThonTTTheWorld360搜狗浏览器等[又称MSHTML]Gecko内核Netscape6及以上版本，FFMozillaSuite/SeaMonkey等Presto内核0pera7及以上[Opera内核原为Presto现为Blink;]Webkit内核SafariChrome等[Chrome的BlinkWebKit的分支]

7、你知道哪些优化性能的方法【仅供参考】具体方法如下1减少HTTP请求次数控制CSSSprite、JavaScript与CSS源码、图片的大小，使用网页Gzip、CDN托管、data缓存、图片服务器2通过前端模板JavaScript和数据，减少由于HTML标签导致的带宽浪费，在前端用变量保存Ajax请求结果，每次操作本地变量时，不用请求，减少请求次数3用innerhTML代替DOM操作，减少DOM操作次数，优化JavaScript性能4当需要设置的样式很多时，设置className而不是直接操作Style5少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作6避免使用CSS表达式，它又称动态属性，7预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳8避免在页面的主体布局中使用表，表要在其中的内容完全下载之后才会显示出来，显示的速度比DIV+CSS布局慢

8、axios和fetch区别对比【仅供参考】axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征从浏览器中创建XMLHttpRequest支持PromiseAPI客户端支持防止CSRF提供了一些并发请求的接口重要，方便了很多的操作从nodejs创建http请求拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据fetch优势语法简洁，更加语义化基于标准Promise实现，支持async/await同构方便使用isomorphic-fetch更加底层，提供的API丰富requestresponse脱离了XHR是ES规范里新的实现方式fetch存在问题fetch是一个低层次的API你可以把它考虑成原生的XHR所以使用起来并不是那么舒服，需要进行封装fetch只对网络请求报错，对400500都当做成功的请求，服务器返回400500错误码时并不会reject只有网络错误这些导致请求不能完成时，fetch才会被rejectofetch默认不会带cookie需要添加配置项fetch（url{credentials:include}）fetch不支持abort不支持超时控制使用setTimeout及Promisereject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费fetch没有办法原生监测请求的进度，而XHR可以

9、TCP传输的三次握手、四次挥手策略【仅供参考】三次握手为了准确无误地吧数据送达目标处，TCP协议采用了三次握手策略用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，他一定会向对方确认是否送达，握手过程中使用TCP的标志SYN和ACK发送端首先发送一个带SYN的标志的数据包给对方接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息最后，发送端再回传一个带ACK的标志的数据包，代表“握手”结束如在握手过程中某个阶段莫明中断，TCP协议会再次以相同的顺序发送相同的数据包断开一个TCP连接需要“四次挥手”第一次挥手主动关闭方发送一个FIN用来关注主动方到被动关闭方的数据传送，也即是主动关闭方告诫被动关闭方我已经不会再给你发数据了（在FIN包之前发送的数据，如果没有收到对应的ACK确认报文，主动关闭方依然会重发这些数据）但是，此时主动关闭方还可以接受数据第二次挥手被动关闭方收到FIN包后，发送一个ACK给对方，确认序号收到序号+1（与SYN相同，一个FIN占用一个序号）第三次挥手被动关闭方发送一个FINO用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会给你发送数据T第四次挥手主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1至此，完成四次挥手10HTTP和HTTPS为什么HTTPS安全【仅供参考】HTTP协议通常承载与TCP协议之上，在HTTP和TCP之间添加一个安全协议层SSL或TSL这个时候就成了我们常说的HTTPS默认HTTP的端口号为80HTTPS的端口号为443因为网络请求需要中间有很多的服务器路由的转发，中间的节点都可能篡改信息，而如果使用HTTPS密钥在你和终点站才有，https之所有说比http安全，是因为他利用ssl/tls协议传输包含证书，流量转发，负载均衡，页面适配，浏览器适配，refer传递等，保障了传输过程的安全性

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

12、谈谈性能优化问题【仅供参考】可以在以下层面优化性能

7、＜img＞的title和alt有什么区别【仅供参考】通常当鼠标滑动到元素上的时候显示alt是＜img＞的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

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

9、标准盒子模型和IE（怪异）盒子模型理解多少？【仅供参考】box-size content-box是标准盒子模型，实际的区域是padding+border+contentcontent区域就是设置的元素宽度，padding和border会占用外部空间box-size border-box的话，元素的宽度为padding+border+content元素设置了宽度，不会占用外部空间

10、Float布局有哪些缺陷？如何清除浮动【仅供参考】使用float之后，元素跳出文档流，容易引发父容器塌陷，最好的解决方式是给复用器加上after伪类进行清除浮动

11、CSSSprite（雪碧图，精灵图）是什么，谈谈这个技术的优缺点？【仅供参考】就是把很多图标合并到一张图上，然后根据图片的位置（backgroundposition）加上显示的宽高来控制具体用哪个图标，这样可以减少网络请求但是制作和使用会显得复杂一些

12、解释浮动及其工作原理【仅供参考】浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止要想使元素浮动，必须为元素设置一个宽度（Width）o虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮缓存利用缓存Ajax使用CDN、外部JavaScript和CSS文件缓存，添加Expires头在服务器端配置Etag减少DNS查找等请求数量合并样式和脚本，使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载请求带宽压缩文件，开启GZIPCSS代码避免使用CSS表达式、高级选择器、通配选择器JavaScript代码用散列表来优化查找，少用全局变量，用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能，用setTimeout避免页面失去响应，缓存D0M节点查找的结果，避免使用with（with会创建自己的作用域，增加作用域链的长度），多个变量声明合并HTML代码避免图片和iFrame等src属性为空src属性为空，会重新加载当前页面，影响速度和效率，尽量避免在HTML标签中写Style属性

13、网页从输入网址到渲染完成经历了哪些过程？【仅供参考】大致可以分为如下7步输入网址；发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；与web服务器建立TCP连接；浏览器向web服务器发送http请求；web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）;浏览器下载web服务器返回的数据及解析html源文件；生成D0M树，解析css和js渲染页面，直至显示完成；

14、平时你是如何对代码进行性能优化的？【仅供参考】利用性能分析工具监测性能，包括静态Analyze工具和运行时的Profile工具（在Xcode工具栏中依次单击Product^Profile项可以启动）比如测试程序的运行时间，当单击TimeProfiler项时，应用程序开始运行，这就能获取到运行整个应用程序所消耗时间的分布和百分比为了保证数据分析在同一使用场景下的真实性，一定要使用真机，因为此时模拟器在Mac上运行，而Mac上的CPU往往比iOS设备要快

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

16、对MutationObserver的理解及应用【仅供参考】MutationObserver接口提供了监视对DOM树所做更改的能力它被设计为旧的MutationEvents功能的替代品，该功能是DOM3Events规范的一部分disconnect阻止MutationObserver实例继续接收的通知，直到再次调用其observe方法，该观察者对象包含的回调函数都不会再被调用observe配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知takeRecords从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中

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

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

19、描述浏览器的渲染过程？，DOM树和渲染树的区别？【仅供参考】浏览器的渲染过程解析HTML构建DOMDOM树并行请求css/image/jsCSS文件下载完成，开始构建CSSOMCSSMCSSOM构建结束后和DOM一起生成RenderTree渲染树布局Layout计算出每个节点在屏幕中的位置显示Painting通过显卡把页面画到屏幕上DOM树和渲染树的区别D0M树与HTML标签——对应，包括head和隐藏元素渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

20、哪些方法可以提升网站前端性能？【仅供参考】精灵图合并，减少HTTP请求；压缩HTML、CSS、JavaScript文件；使用CDN托管静态文件；使用localstorage缓存和mainfest应用缓存动之前的水平方向上因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素

13、哪些css属性可以继承？【仅供参考】答案可继承text-alignsfont、color、line-height、letter-spacing、word-spacing、text-indent不可继承borderpaddingmarginwidthheight;

14、我们会在写css的时候做一些标签选择器的初始化样式？为什么？比如【仅供参考】bodyulolliphlh2h3h4h5h6formfieldsettabletdimgdiv{margin:0;padding:0;border:0;}body{background:#fff;color:#333;font-size:12px;margin-top:5px;font一family:〃SimSun〃〃宋体“ArialNarrow”;}ulollist-style-type:none;}selectinputimgselect{vertical-align:middle;}a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hovera:activea:focus{color:#c00;text-decoration:underline;}为了保证默认的标签样式在不同浏览器能有一致的效果

15、移动端lpx边框怎么设置【仅供参考】/*方法1*/border{width:100%;height:Ipx;background:red;/*方法2*/.border{border-image:urlborderpng}/*方法3*/.border{box-shadow:000Ipx#000;

16、lremlemIvh、Ipx各自代表的含义？【仅供参考】rem:rem是全部的长度都相对于根元素元素通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为remem:子元素字体大小的em是相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh:全称是ViewportWidth和ViewportHeight视窗的宽度和高度，相当于屏幕宽度和高度的1%不过，处理宽度的时候%单位更合适，处理高度的话vh单位更好px:px像素Pixelo相对长度单位像素px是相对于显示器屏幕分辨率而言的

17、rgba和opacity的透明效果有什么不同？【仅供参考】opacity作用于元素以及元素内的所有内容包括文字的透明度rgbaO只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

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

19、CSS中，自适应的单位都有哪些【仅供参考】自适应的单位有以下几个百分比%相对于视口宽度的单位WW相对于视口高度的单位vh相对于视口宽度或者高度取决于哪个小的单位Vm相对于父元素字体大小的单位em相对于根元素字体大小的单位rem

20、CSS3新特性你能说出哪些？【仅供参考】新增选择器p:nth-chiIdn{color:rgba

255000.75}弹性盒模型display:flex;多列布局column-count:5;媒体查询©mediamax-width:480px{.box:{column-count:1;}}个性化字体©font-face{font-family:BorderWeb;src:urlBORDERWO.eot;}颜色透明度color:rgba

255000.75;圆角border-radius:5px;渐变background:linear-gradientredgreenblue;阴影box-shadow:3px3px3pxrgba

0641280.3;倒影box-reflect:below2px;文字装饰text-stroke-color:red;文字溢出text-overflow:ellipsis;背景效果background-size:lOOpxlOOpx;边框效果border-image:urlbt_blue.png010;平滑过渡transition:all.3sease-in.Is;动画©keyframesanim-1{50%{border-radius:50%;}}animation:anim-1Is；变形transform旋转transform:rotate20deg;倾斜transform:skew150deg-10deg;位移transform:translate20px20px;缩放transform:scale.5;

二、JS/ES6/TS篇

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

2、JavaScript中如何检测一个变量是一个String类型？【仅供参考】typeof变量变量.constructor===StringObjectprototype.toString.call变量〃推荐使用

3、事件队列宏任务微任务【仅供参考】可以分为微任务microtask队列和宏任务macrotask队列微任务一般比宏任务先执行，并且微任务队列只有一个，宏任务队列可能有多个另外我们常见的点击和键盘等事件也属于宏任务下面我们看一下常见宏任务和常见微任务常见宏任务setTimeoutsetintervalsetlmmediate常见微任务promisethen、promisecatchnewMutaionObserverprocess.nextTick微任务和宏任务的本质区别宏任务特征有明确的异步任务需要执行和回调；需要其他异步线程支持微任务特征没有明确的异步任务需要执行，只有回调；不需要其他异步线程支持

4、基本数据类型和引用数据类型有什么区别？【仅供参考】1变量直接赋值时基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据2两者在内存中的存储位置基本数据类型存储在栈中引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中

5、把＜script＞放在＜/body＞之前和之后有什么区别？【仅供参考】浏览器会如何解析它们？按照HTML标准，在结束后出现〈script〉或任何元素的开始标签都是解析错虽然不符合HTML标准，但浏览器会自动容错，使实际效果与写在＜/body》之前没有区别浏览器的容错机制会忽略〈script》之前的，视作＜script〉仍在body体内

6、请说一下你常用的数组方法至少七个【仅供参考】Array.push此方法是在数组的后面添加新加元素，此方法改变了数组的长度Arraypop此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度Arrayshift此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度Arrayunshift0此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度Array.isArray判断一个对象是不是数组，返回的是布尔值Arrayconcat此方法是一个可以将多个数组拼接成一个数组Array.toStringO把数组作为字符串返回Array.join以指定字符拼接成字符串，然后返回Arraysplice开始位置，删除的个数，元素Arraymap此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组ArrayforEach此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分Arrayfilter此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回Arrayevery此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件则返回true否则为false Arraysome此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true若所有元素都不满足判断条件，则返回false Arrayreduce此方法是所有元素调用返回函数，返回值为最后结果传入的值必须是函数类型

7、for循环与forEach循环的区别？【仅供参考】for循环中可以使用break、continue不用使用return因为它有循环体，且不是函数；forEach循环不能使用break、continue可以return因为它执行的是函数；

8、splitjoinO的区别【仅供参考】split以指定的字符分割字符串返回一个数组，字符串方法joinO:以指定的字符连接数组中元素返回一个字符串，数组方法

9、怎么判断一个变量arr的话是否为数组此题用typeof不行【仅供参考】arrinstanceofArrayarr.constructor==ArrayObjectprotype.toString.callarr==4[ObjectArray]J

10、var、let、const区别？【仅供参考】var存在变量提升let只能在块级作用域内访问const用来定义常量，必须初始化，不能修改对象特殊

11、函数声明与函数表达式的区别？【仅供参考】数声明就是直接通过function进行声明函数，例如functionshow｛｝可以在声明函数之前调用0函

12、对WEB标准以及W3C的理解与认识【仅供参考】标签闭合、标签小写、不乱嵌套。