超全前端面试(全!全!全!!!)

网站建设1600 更新时间：2025-06-08 04:24:41

2023年6月20日发(作者：)

超全前端⾯试（全！全！全）笔者通过平时⾯试总结以及⾯试别⼈常提的问题，结合⾃⼰认为⾮常重要的前端各技术栈的知识点，总结了这篇中⾼级前端⾯试。让需要的⼩伙伴所阅读，让不在⼤⼚的⼩伙伴提前了解⼤⼚前端⾯试官常问的各种常见前端问题。⾸先拿出我珍藏很久的前端⾯试题:web前端开发⼯程师（vue） | 智⼀⾯初级web前端 | 智⼀⾯Html51、HTML5新特性有哪些？添加了video，radio标签添加了canvas画布和svg,渲染⽮量图⽚添加了⼀些列语义化标签header,footer,main,section,aside,nav等input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）添加了地理位置定位功能 Geolocation API添加了web存储功能，localStorage和sessionStorage使⽤ HTML5，通过创建 cache manifest ⽂件，可以轻松地创建 web 应⽤的离线版本web worker 是运⾏在后台的 JavaScript，独⽴于其他脚本，不会影响页⾯的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，⽽此时 web worker 在后台运⾏。服务端事件推送（EventSource 对象⽤于接收服务器发送事件通知），所有主流浏览器均⽀持服务器发送事件，除了 Internet Explorer2、常见的块级元素与⾏内元素常见⾏内元素标签：a、br、code、em、img、常见块级元素标签：div、p、dl、dt、form、3、渐进增强与优雅降级的理解及区别渐进增强（Progressive Enhancement）：⼀开始就针对低版本浏览器进⾏构建页⾯，完成基本的功能，然后再针对⾼级浏览器进⾏效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：⼀开始就构建站点的完整功能，然后针对浏览器测试和修复。⽐如⼀开始使⽤ CSS3 的特性构建了⼀个应⽤，然后逐步针对各⼤浏览器进⾏hack 使其可以在低版本浏览器上正常浏览。两者区别？1、⼴义：其实要定义⼀个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级2、狭义：渐进增强⼀般说的是使⽤CSS3技术，在不影响⽼浏览器的正常显⽰与使⽤情形下来增强体验，⽽优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁⽤时，也不影响⽤户的相应功能。例⼦：.transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;}.transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s;}4、cookie、sessionStorage、localStorage区别相同点：存储在客户端不同点：cookie数据⼤⼩不能超过4k；sessionStorage和localStorage的存储⽐cookie⼤得多，可以达到5M+cookie设置的过期时间之前⼀直有效；localStorage永久存储，浏览器关闭后数据不丢失除⾮主动删除数据；sessionStorage数据在当前浏览器窗⼝关闭后⾃动删除cookie的数据会⾃动的传递到服务器；sessionStorage和localStorage数据保存在本地CSS31、CSS盒模型盒⼦由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成盒⼦的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距盒⼦的⾼度 = 内容⾼度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距box-sizing: content-box(默认)----指的是标准模型（本⾝内容宽⾼度+边框和内边距）box-sizing: border-box-----指的是IE模型（本⾝内容的宽⾼度）2、CSS3中新添加的特性？媒体查询（可以查询设备的物理像素然后进⾏⾃适应操作）transform，transition，translate,scale,skelw，rotate等相关动画效果box-shadow,text-shadow等特效CSS3 @font-face 规则,设计师可以引⼊任意的字体了CSS3 @keyframes 规则，可以⾃⼰创建⼀些动画等2D、3D转换添加了border-radius，border-image等属性CSS3 创建多列（column-count规定⽂本可以以⼏列的⽅式布局）CSS3 ⽤户界⾯（resize，box-sizing，outline-offset）3、CSS选择器：id选择器(#myid)类选择器(.myclass)标签选择器(div, h1,p)相邻选择器（h1 + p）⼦选择器(ul > li)后代选择器(li a)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover, li:nth-child)4、BFC的概念？BFC（块级格式上下⽂）：它是页⾯中的⼀块渲染区域，有⾃⼰的渲染规则，决定了其⼦元素如何布局，以及和其他元素之间的关系和作⽤5、BFC的原理？内部的Box会在垂直⽅向，⼀个接⼀个地放置Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反BFC的区域不会与float box重叠BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素计算BFC的⾼度时，浮动元素也参与计算6、清除浮动的⽅法⽅式⼀、使⽤overflow 属性来清除浮动.parent { overflow: hidden; }缺点：离开这个元素所在区域的会被隐藏（overflow: hidden将超出的分布隐藏起来）⽅式⼆、使⽤额外标签法.clear { clear: both; }缺点：会增加页⾯的标签，造成结构的紊乱⽅式三、使⽤伪元素来清除浮动【推荐使⽤】.clearfix:after {content: ""; // 设置内容为空height: 0; // ⾼度为0line-height: 0; // ⾏⾼为0display: block; // 将⽂本转为块级元素visibility: hidden; // 将元素隐藏clear: both; //清除浮动}.clearfix {zoom: 1; // 为了兼容IE}7、定位 posiiton的值：static（默认）：按照正常⽂档流进⾏排列；relative（相对定位）：不脱离⽂档流，参考⾃⾝静态位置通过 top, bottom, left, right 定位；absolute(绝对定位)：参考距其最近⼀个不为static的⽗级元素通过top, bottom, left, right 定位；fixed(固定定位)：所固定的参照对像是可视窗⼝。8、常见的页⾯布局⽔平居中布局左侧固定右侧⾃适应流式布局弹性布局圣杯布局双飞翼布局9、常见单位px：绝对单位，页⾯按精确像素展⽰em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃⾝定义了font-size按⾃⾝来计算（浏览器默认字体是16px），整个页⾯内1em不是⼀个固定的值rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%vh：viewpoint height，视窗⾼度，1vh等于视窗⾼度的1%vmin：vw和vh中较⼩的那个 7. vmax：vw和vh中较⼤的那个 8. %:百分⽐10、移动端视⼝配置 initial-scale：初始的缩放⽐例 minimum-scale：允许⽤户缩放到的最⼩⽐例 maximum-scale：允许⽤户缩放到的最⼤⽐例 user-scalable：⽤户是否可以⼿动缩放11、⽂字、盒⼦⽔平垂直居中⼀、⾏内元素⽔平垂直居中⽅法:⽅式⼀：text-align:center /*⽔平居中*/

height = 100px; /*垂直居中 */line-height = 100px;⽅式⼆：text-align:center ⽔平居中

display:table-cell; 垂直居中

vertical-align:middle;⼆、块级元素⽔平居中⽅法:margin:0 auto;只能设置⽔平居中，⽽margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题⽅法1：定位+margin⽗级元素设置position:relative;⼉⼦元素设置width: 100px;

height: 100px;

position:absolute;

top:50%;

left:50%;

margin-top:-50px;

margin-right:-50px;

⽅式2：定位⽅法⽗级元素设置position:relative;⼉⼦元素设置position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;⽅式3：单元格⽅法⽗级元素display:table-cell;

text-align:center;

vertical-align:middle;⼦元素display:inline-table12、浅淡css响应式布使⽤@media查询可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果需要设置设计响应式的页⾯。重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。语法：@media 媒介类型 and | not | only (媒介特性) {css 代码}媒介类型：print: ⽤于打印机和打印预览screen: ⽤于电脑屏幕、平板电脑、只能⼿机等all: ⽤于所有媒体设备类型媒介特性：device-height: 定义输出设备的屏幕可见⾼度device-width: 定义输出设备的屏幕可见宽度height：定义输出设备中的页⾯可见区域⾼度。width：定义输出设备中的页⾯可见区域宽度。max-device-height：定义输出设备的屏幕可见的最⼤⾼度。max-device-width：定义输出设备的屏幕可见的最⼤宽度。max-height：定义输出设备中的页⾯可见的最⼤⾼度。max-width：定义输出设备中的页⾯可见的最⼤宽度。min-device-height：定义输出设备的屏幕可见的最⼩⾼度。min-device-width：定义输出设备的屏幕可见的最⼩宽度。min-height：定义输出设备中的页⾯可见的最⼩⾼度。min-width：定义输出设备中的页⾯可见的最⼩宽度。13、link和@import有什么区别link属于html标签，除了引⼊css样式以外还可以定义RSS等其他事物，@import是css提供的，只能引⼊csslilnk在页⾯加载的时候会同时加载，@import引⽤的css要等页⾯加载结束后再加载link是html标签，没有兼容性，@import只有ie5以上才能识别14、display: none与visibility: hidden的区别display：none 不显⽰对应的元素，在⽂档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在⽂档布局中仍保留原来的空间（重绘）jQuery1、jQuery选择器与css选择器的区别两者的作⽤不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加⾏为jQuery选择器拥有更好的跨浏览器的兼容性两者选择器的效率不同CSS选择器的效率：id选择器（#myid）、类选择器（.myclassname）、标签选择器（div,h1,p）、相邻选择器（h1+p）、⼦选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover,li:nth-child）从⾼到低依次排列； jQuery选择器的效率：id选择器，('form')、类选择器，('[attribute=value]')和伪类选择器$(':hidden')2、jQuery对象与Dom对象$("#aijquery"): //这种⽅式获取得到的就是jquery对象mentById("aijquery")://这种⽅法获取到的就是dom对象dom对象转换为jquery对象：⼀般情况下，dom对象直接⽤$()就可以转换成jquery对象，如：$(mentById("aijquery"))jquery对象转换成dom对象，有两种⽅法，⼀种是⽤jquery的内置函数get，来获取dom对象，如：$("#aijquery").get(0)还有⼀种⽅法更简单，因为jquery对象的属性是⼀个集合，所以我们可以像数组那样，取出其中⼀项就⾏：$("#aijquery")[0];$("div")[5];//上⾯这两种返回的都是dom对象,可以直接使⽤js⾥的⽅法3、事件和 jQuery ready 函数有何不同可以在页⾯中使⽤多个()函数，但只能⽤⼀次()函数在页⾯DOM元素加载完就会执⾏，⽽()函数则是要所有都加载JavaScript1、js基本数据类型5个简单数据类型（基本数据类型）+ 1个复杂数据类型undefined、number、string、null、boolean+object ES6新增Symbol2、如何统计⽹⻚上出现了多少种标签获取所有的DOM节点electorAll('*')NodeList集合转化为数组[...electorAll('*')]获取数组每个元素的标签名[...electorAll('*')}.map(ele => e)去重new Set([...electorAll('*').map(ele=>e)).size3、⼏种判断数据类型的优缺点(typeof 1); // (typeof true); // (typeof 'mc'); // (typeof function(){}); // (typeof []); // (typeof {}); // (typeof null); // (typeof undefined); // undefined优点：能够快速区分基本数据类型缺点：不能将Object、Array和Null区分，都返回(1 instanceof Number); // (true instanceof Boolean); // ('str' instanceof String); // false

([] instanceof Array); // (function(){} instanceof Function); // ({} instanceof Object); // true优点：能够区分Array、Object和Function，适合⽤于判断⾃定义的类实例对象缺点：Number，Boolean，String基本()var toString = ng;((1)); //[object Number]((true)); //[object Boolean](('mc')); //[object String](([])); //[object Array](({})); //[object Object]((function(){})); //[object Function]((undefined)); //[object Undefined]((null)); //[object Null]优点：精准判断数据类型缺点：写法繁琐不容易记，推荐进⾏封装后使⽤4、原⽣ajax如何创建AjaxXMLHttpRequest对象的⼯作流程==========兼容性写法===========var xmlHttp = null;if(pRequset) {// IE7+,Firefox,Chrome,Safari,OperaxmlHttp = new XMLHttpRequset();}else {// IE5,IE6xmlHttp = new ActiveXObject("P")}兼容性处理事件的触发条件ystatechange = function() {if(tate == 4 && == 200) {responseText、responseXML}}事件的触发顺序======================注意=================如果是POST请求则需要添加头uestHeader("Content-type": "application/x-www-form-urlencoded")5、null和undefined的区别undefined是访问⼀个未初始化的变量时返回的值，⽽null是访问⼀个尚未存在的对象时所返回的值。undefined看作是空的变量，⽽null看作是空的对象实现 (5).add(3).minus(2)，使其输出结果为6有题⽬分析可得，该表达式属于链式调⽤⽅法。以数组为例：() 为什么arr有push⽅法？因为arr是Array的实例，push是Array原型上的⽅法，所有实例arr可以调⽤原型上的⽅法；故，我们只需要在数字Number的原型上添加add和minus⽅法即可。~ function () { function add(number) { if (typeof number !== 'number' || (number)) { throw new Error('请输⼊数字～'); } return this + n } function minus(number) { if (typeof number !== 'number' || (number)) { throw new Error('请输⼊数字～'); } return this - n } = add = minus}()((5).add(3).minus(2)) // 6注意：this的指向始终指向最后谁调⽤了this所在的函数，this就指向谁！注意6、DOM事件类基本概念：DOM事件的级别（事件的本质在于信息的传递）DOM0： = function(){}⼀是在标签内写onclick事件⼆是在JS写onclick=function(){}函数DOM2：ntListener('click', function(){},false)三个参数分别表⽰为：事件名、事件处理的函数、为true则表⽰在捕获阶段调⽤，为false则表⽰在冒泡阶段调⽤DOM3：ntListener('keyup',function(){},false) DOM事件模型：（冒泡、捕获...）冒泡事件是从内向外；捕获是从外向内======document->html->body->div DOM事件流⼀个完整的事件流分为三个阶段：捕获-》⽬标阶段-》冒泡=========事件通过捕获到达⽬标元素再从⽬标元素通过冒泡上传到元素描述DOM事件捕获的具体流程捕获：window->document->html->body->......->⽬标元素冒泡：相反 Event事件的⽤tDefault() // 阻⽌默认⾏为opagation() // 阻⽌冒泡⾏为mediatePropagation() // 在调⽤完stopPropagation函数之后，就会⽴即停⽌对后续节点的访问，但是会执⾏完绑定到当前节点上的所有事件处理程序；⽽调⽤stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执⾏了tTarget // 指的是绑定了事件监听的元素（可以理解为触发事件元素的⽗级元素） // 表⽰当前被点击的元素⾃定义事件（CustomEvent）var eve = new Event('custom');ntListener('custom',function(){('custom')})chEvent(eve)7、对象深浅拷贝深拷贝1.1 最简单的⽅法就是(ify())但是这种拷贝⽅法不可以拷贝⼀些特殊的属性（例如正则表达式，undefine，function）1.2 ⽤递归去复制所有层级属性function deepCopyTwo(obj) { let objClone = y(obj) ? [] : {}; if (obj && typeof obj == 'object') { for (const key in obj) { //判断obj⼦元素是否为对象，如果是，递归复制 if (obj[key] && typeof obj[key] === "object") { objClone[key] = deepCopyTwo(obj[key]); } else { //如果不是，简单复制 objClone[key] = obj[key]; } } } return objClone;}浅拷贝(target, ...sources)function simpleClone(obj) { var result = {}; for (var i in obj) { result[i] = obj[i]; } return result;}8、this的理解this表⽰当前对象，this的指向是根据调⽤的上下⽂来决定的，默认指向window对象，指向window对象时可以省略不写全局环境： this始终指向的是window对象局部环境：在全局作⽤域下直接调⽤函数，this指向window 对象函数调⽤，哪个对象调⽤就指向哪个对象使⽤new实例化对象，在构造函数中的this指向实例化对象使⽤call或apply改变this的指向总结：this始终指向最后⼀个调⽤它的函数的对象9、⽬前JS解决异步的⽅案有哪些回调函数事件监听发布-订阅PromiseGeneratorAsync/Await10、创建对象有⼏种⽅法// 第⼀种：字⾯量var o1 = {name: "o1"}var o2 = new Object({name: "o2"})// 第⼆种：通过构造函数var M = function(name){ = name}var o3 = new M("o3")// 第三种：()var p = {name: "p"}var o4 = (p)11、什么是闭包？函数执⾏后返回结果是⼀个内部函数，并被外部变量所引⽤，如果内部函数持有被执⾏函数作⽤域的变量。即形成了闭包。可以在内部函数访问到外部函数作⽤域。使⽤闭包，⼀可以读取函数中的变量，⼆可以将函数中的变量存储在内存中，保护变量吧被污染。⽽正是因为闭包会把函数中的变量存储在内存中，会对内存有消耗，所以不能滥⽤闭包，否则会影响⽹页性能，造成内存泄漏。当不需要使⽤闭包时，要及时释放内存，可将内存函数对象的变量赋值为null。Vue1、Vue 组件间的通信props 和 $emit⽗组件向⼦组件传递数量通过props传递⼦组件向⽗组件传递通过$emit派发事件中央数据总线EventBusref 和 refsProvide 和 injectVuex2、谈谈你对⽣命周期的理解⽣命周期：Vue实例从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等⼀系列过程，称为Vue的⽣命周期的⽣命周期⼀共有10个：beforeCreate：实例初始化之后，this指向创建实例，不能访问到data、computed、watch、method上订单⽅法和数据created：实例创建完成，可访问data、computed、watch、method上的⽅法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组beforeMount：在挂载开始之前被调⽤，beforeMount之前，会找到对应的template，并编译成render函数mounted：实例挂载到DOM上，此时可以通过DOMAPi获取到DOM节点，$ref属性可以访问beforeUpdate：响应式数据更新时调⽤，发⽣在虚拟DOM打补丁之前updated：虚拟DOM重新渲染和打补丁之后调⽤，组件DOM已经更新，可执⾏依赖于DOM的操作activated：keep-alive开启时调⽤deactivated：keep-alive关闭时调⽤beforeDestroy：实例销毁之前调⽤。实例仍然完全可⽤，this仍能获取到实例destroy：实例销毁后调⽤，调⽤后，Vue实例指⽰的所有东西都会解绑定，所有的事件监听器会被移除，所有的⼦实例也会被销毁Vue⽣命周期3、vue的diff算法问题：渲染真实的DOM开销是很⼤的，修改了某个数据，如果直接渲染到真实dom上会引起整个DOM树的重绘和重排。Virtual Dom 根据真实DOM⽣成的⼀个Virtual DOM，当Virtual DOM某个节点的数据改变后⽣成⼀个新的Vnode，然后Vnode和oldVnode作对⽐，发现有不⼀样的地⽅就直接修改在真实的DOM上，然后使oldVnode的值为Vnode.注意：在采取diff算法⽐较的时候，只会在同层级进⾏，不会跨层级⽐较。当数据发⽣改变时，set⽅法会让调⽤()⽅法通知所有订阅者Watcher，订阅者就会调⽤patch函数给真实的DOM打补丁，更新响应的试图。4、MVVM 设计模式，是由 MVC（最早来源于后端）、MVP 等设计模式进化⽽来。M - 数据模型（Model），简单的JS对象VM - 视图模型（ViewModel），连接Model与ViewV - 视图层（View），呈现给⽤户的DOM渲染界⾯通过以上的MVVM模式图，我们可以看出最核⼼的就是ViewModel，它主要的作⽤：对View中DOM元素的监听和对Model中的数据进⾏绑定，当View变化会引起Modal中数据的改动，Model中数据的改动会触发View视图重新渲染，从⽽达到数据双向绑定的效果，该效果也是Vue最为核⼼的特性React1、⽣命周期的三个阶段Mounting：已插⼊真实DOM（加载阶段）Updating：正在被重新渲染（更新阶段）Unmounting：已移出真实DOM（卸载阶段）⽣命周期图解Redux提供的API1、createStorecreateStore⽅法的作⽤就是创建⼀个Redux store来存放应⽤中所有的statecreateStore(reducer, [preloadState], [enhancer])createStore⽅法接受三个参数，后⾯两个是可选参数reducer: 参数的类型必须是functionpreloadState: 这个参数代表初始化的state(initialState), 可以是任意类型的参数enhancer: 这个参数代表添加的各种中间件，参数的类型必须是functioncreateStore提供的⽅法：1、getState()返回当前的state2、dispach(action)参数action必须是⼀个对象，且必须含有type字段3、subscribe(listener)事件监听2、combineReducerscombineReducers主要是把多个reducer合并成⼀个，并且返回⼀个新的reducer函数，该函数接收的参数也是两个state和action3、compose主要是在中间件时候使⽤，合成函数compose(applyMiddleware(thunk),lsExtension ?lsExtension() : undefined)4、applyMiddleware5、bindActionCreatorbindActionCreator的主要作⽤就是将aciton与dispatch函数绑定，⽣成直接可以出发action的函数著作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。Http协议与数据请求1、HTTP⼯作原理HTTP协议定义Web客户端如何从Web服务器请求Web页⾯，以及服务器如何把Web页⾯传送给客户端。客户端向服务器发送⼀个请求报⽂，请求报⽂：【请求⽅法、URL、协议版本、请求头部和请求数据】服务器以⼀个状态⾏作为响应，响应的内容：【协议的版本、成功或失败代码、服务器信息、响应头部和响应数据】2、HTTP请求/响应的步骤客户端连接到Web服务器发送HTTP请求服务器接受请求并返回HTTP响应释放连接TCP连接客户端（浏览器）解析HTML内容3、POST和GET⽅法GET在浏览器回退时时⽆害的，⽽POST会再次提交请求GET请求会被浏览器主动缓存，⽽POST不会，除⾮⼿动设置 GET请求参数会被完整的保留在浏览器历史记录⾥，⽽POST中的参数不会被保留GET请求在URL中传送的参数是有长度的限制，⽽POST没有限制GET请求参数会暴露，不安全 GET参数通过URL传递，POST放在Requset Body中4、常见状态码200 OK：客户端请求成功206 Partial Content：客户发送了⼀个带有Range头的GET请求，服务器完成了它（当时⾳频或视频⽂件很⼤时返回206）301 Moved Permanently：所请求的页⾯已经转移⾄新的URL302 Found：所请求的页⾯已经临时转移⾄新的URL303 Not Modified：客户端有缓冲的⽂档并发出看⼀个条件性的请求，服务器告诉客户，原来缓冲的⽂档还可以继续使⽤403 Forbidden：对请求页⾯的访问被禁⽌404 Not Found：请求资源不存在500 Internal Server Error：服务器发⽣不可预期的错误原来缓冲的⽂档还可以继续使⽤503 Server Unavailable：请求未完成，服务器临时过载或宕机，⼀段时间后可恢复正常浏览器1、从输⼊URL到页⾯加载的全过程1. ⾸先，在浏览器地址中输⼊url2. 浏览器先查看**浏览器缓存**-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显⽰页⾯内容。若没有，则跳到第三步操作3. 浏览器向DNS（Domain Name System）服务器请求解析该URL中的域名对应的IP地址4. 解析出IP地址后，根据该IP地址和默认端⼝80，和服务器建⽴TCP连接5. 浏览器发出读取⽂件（URL中域名后⾯部分对应的⽂件）的HTTP请求，该请求报⽂作为TCP三次握⼿的第三个报⽂的数据发送给服务器6. 服务器对浏览器请求做出响应，并把对应的html⽂本发送给浏览器7. 释放TCP连接8. 浏览器将该html⽂本并显⽰内容2、重绘 & 回流DOM结构中的各个元素都有⾃⼰的盒⼦（模型），这些都需要浏览器根据格式的样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为reflow当各个盒⼦的位置、⼤⼩以及其他属性，如颜⾊、字体⼤⼩等都确定下来后，浏览器于是便把这些元素都按照各⾃的特性绘制了⼀遍，于是页⾯的内容出现了，这个过程称之为repaint/ 触发Reflow当你增加、删除、修改DOM节点时，会导致Reflow或Repaint当你移动DOM的位置，或是搞个动画的时候当你修改CSS样式的时候当你Resize窗⼝的时候（移动端没有这个问题），或是滚动的时候当你修改⽹页的默认字体时// 触发RepaintDOM改动CSS改动// 如何防⽌重排Reflow和重绘Repaint？3、常见浏览器及其内核1. -webkit-：webkit核⼼浏览器，Chrome2. -moz-：Gecko核⼼浏览器，fixfox3. -o-：Opera核⼼浏览器，Opera4. -ms-：微软的IE浏览器性能与安全1、提升页⾯性能的⽅法有哪些资源压缩合并、减少HTTP请求⾮核⼼代码异步加载---------》异步加载的⽅式---------》异步加载的区别利⽤浏览器缓存---------》缓存的分类-----------》缓存的原理【重点】利⽤CDN预解析DNS2、常见的兼容性问题1. 不同浏览器的标签默认的margin和padding不⼀样。*{margin:0;padding:0;}2. IE6双边距bug：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤。hack：display:inline;将其转化为⾏内属性。3. 设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7中⾼度超出⾃⼰设置⾼度。hack：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。4. Chrome 中⽂界⾯下默认会将⼩于 12px 的⽂本强制按照 12px 显⽰,可通过加⼊ CSS 属性 -webkit-text-size-adjust: none; 解决。5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决⽅法是改

2023年6月20日发(作者：)

超全前端⾯试（全！全！全）笔者通过平时⾯试总结以及⾯试别⼈常提的问题，结合⾃⼰认为⾮常重要的前端各技术栈的知识点，总结了这篇中⾼级前端⾯试。让需要的⼩伙伴所阅读，让不在⼤⼚的⼩伙伴提前了解⼤⼚前端⾯试官常问的各种常见前端问题。⾸先拿出我珍藏很久的前端⾯试题:web前端开发⼯程师（vue） | 智⼀⾯初级web前端 | 智⼀⾯Html51、HTML5新特性有哪些？添加了video，radio标签添加了canvas画布和svg,渲染⽮量图⽚添加了⼀些列语义化标签header,footer,main,section,aside,nav等input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）添加了地理位置定位功能 Geolocation API添加了web存储功能，localStorage和sessionStorage使⽤ HTML5，通过创建 cache manifest ⽂件，可以轻松地创建 web 应⽤的离线版本web worker 是运⾏在后台的 JavaScript，独⽴于其他脚本，不会影响页⾯的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，⽽此时 web worker 在后台运⾏。服务端事件推送（EventSource 对象⽤于接收服务器发送事件通知），所有主流浏览器均⽀持服务器发送事件，除了 Internet Explorer2、常见的块级元素与⾏内元素常见⾏内元素标签：a、br、code、em、img、常见块级元素标签：div、p、dl、dt、form、3、渐进增强与优雅降级的理解及区别渐进增强（Progressive Enhancement）：⼀开始就针对低版本浏览器进⾏构建页⾯，完成基本的功能，然后再针对⾼级浏览器进⾏效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：⼀开始就构建站点的完整功能，然后针对浏览器测试和修复。⽐如⼀开始使⽤ CSS3 的特性构建了⼀个应⽤，然后逐步针对各⼤浏览器进⾏hack 使其可以在低版本浏览器上正常浏览。两者区别？1、⼴义：其实要定义⼀个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级2、狭义：渐进增强⼀般说的是使⽤CSS3技术，在不影响⽼浏览器的正常显⽰与使⽤情形下来增强体验，⽽优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁⽤时，也不影响⽤户的相应功能。例⼦：.transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;}.transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s;}4、cookie、sessionStorage、localStorage区别相同点：存储在客户端不同点：cookie数据⼤⼩不能超过4k；sessionStorage和localStorage的存储⽐cookie⼤得多，可以达到5M+cookie设置的过期时间之前⼀直有效；localStorage永久存储，浏览器关闭后数据不丢失除⾮主动删除数据；sessionStorage数据在当前浏览器窗⼝关闭后⾃动删除cookie的数据会⾃动的传递到服务器；sessionStorage和localStorage数据保存在本地CSS31、CSS盒模型盒⼦由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成盒⼦的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距盒⼦的⾼度 = 内容⾼度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距box-sizing: content-box(默认)----指的是标准模型（本⾝内容宽⾼度+边框和内边距）box-sizing: border-box-----指的是IE模型（本⾝内容的宽⾼度）2、CSS3中新添加的特性？媒体查询（可以查询设备的物理像素然后进⾏⾃适应操作）transform，transition，translate,scale,skelw，rotate等相关动画效果box-shadow,text-shadow等特效CSS3 @font-face 规则,设计师可以引⼊任意的字体了CSS3 @keyframes 规则，可以⾃⼰创建⼀些动画等2D、3D转换添加了border-radius，border-image等属性CSS3 创建多列（column-count规定⽂本可以以⼏列的⽅式布局）CSS3 ⽤户界⾯（resize，box-sizing，outline-offset）3、CSS选择器：id选择器(#myid)类选择器(.myclass)标签选择器(div, h1,p)相邻选择器（h1 + p）⼦选择器(ul > li)后代选择器(li a)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover, li:nth-child)4、BFC的概念？BFC（块级格式上下⽂）：它是页⾯中的⼀块渲染区域，有⾃⼰的渲染规则，决定了其⼦元素如何布局，以及和其他元素之间的关系和作⽤5、BFC的原理？内部的Box会在垂直⽅向，⼀个接⼀个地放置Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反BFC的区域不会与float box重叠BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素计算BFC的⾼度时，浮动元素也参与计算6、清除浮动的⽅法⽅式⼀、使⽤overflow 属性来清除浮动.parent { overflow: hidden; }缺点：离开这个元素所在区域的会被隐藏（overflow: hidden将超出的分布隐藏起来）⽅式⼆、使⽤额外标签法.clear { clear: both; }缺点：会增加页⾯的标签，造成结构的紊乱⽅式三、使⽤伪元素来清除浮动【推荐使⽤】.clearfix:after {content: ""; // 设置内容为空height: 0; // ⾼度为0line-height: 0; // ⾏⾼为0display: block; // 将⽂本转为块级元素visibility: hidden; // 将元素隐藏clear: both; //清除浮动}.clearfix {zoom: 1; // 为了兼容IE}7、定位 posiiton的值：static（默认）：按照正常⽂档流进⾏排列；relative（相对定位）：不脱离⽂档流，参考⾃⾝静态位置通过 top, bottom, left, right 定位；absolute(绝对定位)：参考距其最近⼀个不为static的⽗级元素通过top, bottom, left, right 定位；fixed(固定定位)：所固定的参照对像是可视窗⼝。8、常见的页⾯布局⽔平居中布局左侧固定右侧⾃适应流式布局弹性布局圣杯布局双飞翼布局9、常见单位px：绝对单位，页⾯按精确像素展⽰em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃⾝定义了font-size按⾃⾝来计算（浏览器默认字体是16px），整个页⾯内1em不是⼀个固定的值rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%vh：viewpoint height，视窗⾼度，1vh等于视窗⾼度的1%vmin：vw和vh中较⼩的那个 7. vmax：vw和vh中较⼤的那个 8. %:百分⽐10、移动端视⼝配置 initial-scale：初始的缩放⽐例 minimum-scale：允许⽤户缩放到的最⼩⽐例 maximum-scale：允许⽤户缩放到的最⼤⽐例 user-scalable：⽤户是否可以⼿动缩放11、⽂字、盒⼦⽔平垂直居中⼀、⾏内元素⽔平垂直居中⽅法:⽅式⼀：text-align:center /*⽔平居中*/

height = 100px; /*垂直居中 */line-height = 100px;⽅式⼆：text-align:center ⽔平居中

display:table-cell; 垂直居中

vertical-align:middle;⼆、块级元素⽔平居中⽅法:margin:0 auto;只能设置⽔平居中，⽽margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题⽅法1：定位+margin⽗级元素设置position:relative;⼉⼦元素设置width: 100px;

height: 100px;

position:absolute;

top:50%;

left:50%;

margin-top:-50px;

margin-right:-50px;

⽅式2：定位⽅法⽗级元素设置position:relative;⼉⼦元素设置position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;⽅式3：单元格⽅法⽗级元素display:table-cell;

text-align:center;

vertical-align:middle;⼦元素display:inline-table12、浅淡css响应式布使⽤@media查询可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果需要设置设计响应式的页⾯。重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。语法：@media 媒介类型 and | not | only (媒介特性) {css 代码}媒介类型：print: ⽤于打印机和打印预览screen: ⽤于电脑屏幕、平板电脑、只能⼿机等all: ⽤于所有媒体设备类型媒介特性：device-height: 定义输出设备的屏幕可见⾼度device-width: 定义输出设备的屏幕可见宽度height：定义输出设备中的页⾯可见区域⾼度。width：定义输出设备中的页⾯可见区域宽度。max-device-height：定义输出设备的屏幕可见的最⼤⾼度。max-device-width：定义输出设备的屏幕可见的最⼤宽度。max-height：定义输出设备中的页⾯可见的最⼤⾼度。max-width：定义输出设备中的页⾯可见的最⼤宽度。min-device-height：定义输出设备的屏幕可见的最⼩⾼度。min-device-width：定义输出设备的屏幕可见的最⼩宽度。min-height：定义输出设备中的页⾯可见的最⼩⾼度。min-width：定义输出设备中的页⾯可见的最⼩宽度。13、link和@import有什么区别link属于html标签，除了引⼊css样式以外还可以定义RSS等其他事物，@import是css提供的，只能引⼊csslilnk在页⾯加载的时候会同时加载，@import引⽤的css要等页⾯加载结束后再加载link是html标签，没有兼容性，@import只有ie5以上才能识别14、display: none与visibility: hidden的区别display：none 不显⽰对应的元素，在⽂档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在⽂档布局中仍保留原来的空间（重绘）jQuery1、jQuery选择器与css选择器的区别两者的作⽤不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加⾏为jQuery选择器拥有更好的跨浏览器的兼容性两者选择器的效率不同CSS选择器的效率：id选择器（#myid）、类选择器（.myclassname）、标签选择器（div,h1,p）、相邻选择器（h1+p）、⼦选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover,li:nth-child）从⾼到低依次排列； jQuery选择器的效率：id选择器，('form')、类选择器，('[attribute=value]')和伪类选择器$(':hidden')2、jQuery对象与Dom对象$("#aijquery"): //这种⽅式获取得到的就是jquery对象mentById("aijquery")://这种⽅法获取到的就是dom对象dom对象转换为jquery对象：⼀般情况下，dom对象直接⽤$()就可以转换成jquery对象，如：$(mentById("aijquery"))jquery对象转换成dom对象，有两种⽅法，⼀种是⽤jquery的内置函数get，来获取dom对象，如：$("#aijquery").get(0)还有⼀种⽅法更简单，因为jquery对象的属性是⼀个集合，所以我们可以像数组那样，取出其中⼀项就⾏：$("#aijquery")[0];$("div")[5];//上⾯这两种返回的都是dom对象,可以直接使⽤js⾥的⽅法3、事件和 jQuery ready 函数有何不同可以在页⾯中使⽤多个()函数，但只能⽤⼀次()函数在页⾯DOM元素加载完就会执⾏，⽽()函数则是要所有都加载JavaScript1、js基本数据类型5个简单数据类型（基本数据类型）+ 1个复杂数据类型undefined、number、string、null、boolean+object ES6新增Symbol2、如何统计⽹⻚上出现了多少种标签获取所有的DOM节点electorAll('*')NodeList集合转化为数组[...electorAll('*')]获取数组每个元素的标签名[...electorAll('*')}.map(ele => e)去重new Set([...electorAll('*').map(ele=>e)).size3、⼏种判断数据类型的优缺点(typeof 1); // (typeof true); // (typeof 'mc'); // (typeof function(){}); // (typeof []); // (typeof {}); // (typeof null); // (typeof undefined); // undefined优点：能够快速区分基本数据类型缺点：不能将Object、Array和Null区分，都返回(1 instanceof Number); // (true instanceof Boolean); // ('str' instanceof String); // false

([] instanceof Array); // (function(){} instanceof Function); // ({} instanceof Object); // true优点：能够区分Array、Object和Function，适合⽤于判断⾃定义的类实例对象缺点：Number，Boolean，String基本()var toString = ng;((1)); //[object Number]((true)); //[object Boolean](('mc')); //[object String](([])); //[object Array](({})); //[object Object]((function(){})); //[object Function]((undefined)); //[object Undefined]((null)); //[object Null]优点：精准判断数据类型缺点：写法繁琐不容易记，推荐进⾏封装后使⽤4、原⽣ajax如何创建AjaxXMLHttpRequest对象的⼯作流程==========兼容性写法===========var xmlHttp = null;if(pRequset) {// IE7+,Firefox,Chrome,Safari,OperaxmlHttp = new XMLHttpRequset();}else {// IE5,IE6xmlHttp = new ActiveXObject("P")}兼容性处理事件的触发条件ystatechange = function() {if(tate == 4 && == 200) {responseText、responseXML}}事件的触发顺序======================注意=================如果是POST请求则需要添加头uestHeader("Content-type": "application/x-www-form-urlencoded")5、null和undefined的区别undefined是访问⼀个未初始化的变量时返回的值，⽽null是访问⼀个尚未存在的对象时所返回的值。undefined看作是空的变量，⽽null看作是空的对象实现 (5).add(3).minus(2)，使其输出结果为6有题⽬分析可得，该表达式属于链式调⽤⽅法。以数组为例：() 为什么arr有push⽅法？因为arr是Array的实例，push是Array原型上的⽅法，所有实例arr可以调⽤原型上的⽅法；故，我们只需要在数字Number的原型上添加add和minus⽅法即可。~ function () { function add(number) { if (typeof number !== 'number' || (number)) { throw new Error('请输⼊数字～'); } return this + n } function minus(number) { if (typeof number !== 'number' || (number)) { throw new Error('请输⼊数字～'); } return this - n } = add = minus}()((5).add(3).minus(2)) // 6注意：this的指向始终指向最后谁调⽤了this所在的函数，this就指向谁！注意6、DOM事件类基本概念：DOM事件的级别（事件的本质在于信息的传递）DOM0： = function(){}⼀是在标签内写onclick事件⼆是在JS写onclick=function(){}函数DOM2：ntListener('click', function(){},false)三个参数分别表⽰为：事件名、事件处理的函数、为true则表⽰在捕获阶段调⽤，为false则表⽰在冒泡阶段调⽤DOM3：ntListener('keyup',function(){},false) DOM事件模型：（冒泡、捕获...）冒泡事件是从内向外；捕获是从外向内======document->html->body->div DOM事件流⼀个完整的事件流分为三个阶段：捕获-》⽬标阶段-》冒泡=========事件通过捕获到达⽬标元素再从⽬标元素通过冒泡上传到元素描述DOM事件捕获的具体流程捕获：window->document->html->body->......->⽬标元素冒泡：相反 Event事件的⽤tDefault() // 阻⽌默认⾏为opagation() // 阻⽌冒泡⾏为mediatePropagation() // 在调⽤完stopPropagation函数之后，就会⽴即停⽌对后续节点的访问，但是会执⾏完绑定到当前节点上的所有事件处理程序；⽽调⽤stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执⾏了tTarget // 指的是绑定了事件监听的元素（可以理解为触发事件元素的⽗级元素） // 表⽰当前被点击的元素⾃定义事件（CustomEvent）var eve = new Event('custom');ntListener('custom',function(){('custom')})chEvent(eve)7、对象深浅拷贝深拷贝1.1 最简单的⽅法就是(ify())但是这种拷贝⽅法不可以拷贝⼀些特殊的属性（例如正则表达式，undefine，function）1.2 ⽤递归去复制所有层级属性function deepCopyTwo(obj) { let objClone = y(obj) ? [] : {}; if (obj && typeof obj == 'object') { for (const key in obj) { //判断obj⼦元素是否为对象，如果是，递归复制 if (obj[key] && typeof obj[key] === "object") { objClone[key] = deepCopyTwo(obj[key]); } else { //如果不是，简单复制 objClone[key] = obj[key]; } } } return objClone;}浅拷贝(target, ...sources)function simpleClone(obj) { var result = {}; for (var i in obj) { result[i] = obj[i]; } return result;}8、this的理解this表⽰当前对象，this的指向是根据调⽤的上下⽂来决定的，默认指向window对象，指向window对象时可以省略不写全局环境： this始终指向的是window对象局部环境：在全局作⽤域下直接调⽤函数，this指向window 对象函数调⽤，哪个对象调⽤就指向哪个对象使⽤new实例化对象，在构造函数中的this指向实例化对象使⽤call或apply改变this的指向总结：this始终指向最后⼀个调⽤它的函数的对象9、⽬前JS解决异步的⽅案有哪些回调函数事件监听发布-订阅PromiseGeneratorAsync/Await10、创建对象有⼏种⽅法// 第⼀种：字⾯量var o1 = {name: "o1"}var o2 = new Object({name: "o2"})// 第⼆种：通过构造函数var M = function(name){ = name}var o3 = new M("o3")// 第三种：()var p = {name: "p"}var o4 = (p)11、什么是闭包？函数执⾏后返回结果是⼀个内部函数，并被外部变量所引⽤，如果内部函数持有被执⾏函数作⽤域的变量。即形成了闭包。可以在内部函数访问到外部函数作⽤域。使⽤闭包，⼀可以读取函数中的变量，⼆可以将函数中的变量存储在内存中，保护变量吧被污染。⽽正是因为闭包会把函数中的变量存储在内存中，会对内存有消耗，所以不能滥⽤闭包，否则会影响⽹页性能，造成内存泄漏。当不需要使⽤闭包时，要及时释放内存，可将内存函数对象的变量赋值为null。Vue1、Vue 组件间的通信props 和 $emit⽗组件向⼦组件传递数量通过props传递⼦组件向⽗组件传递通过$emit派发事件中央数据总线EventBusref 和 refsProvide 和 injectVuex2、谈谈你对⽣命周期的理解⽣命周期：Vue实例从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等⼀系列过程，称为Vue的⽣命周期的⽣命周期⼀共有10个：beforeCreate：实例初始化之后，this指向创建实例，不能访问到data、computed、watch、method上订单⽅法和数据created：实例创建完成，可访问data、computed、watch、method上的⽅法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组beforeMount：在挂载开始之前被调⽤，beforeMount之前，会找到对应的template，并编译成render函数mounted：实例挂载到DOM上，此时可以通过DOMAPi获取到DOM节点，$ref属性可以访问beforeUpdate：响应式数据更新时调⽤，发⽣在虚拟DOM打补丁之前updated：虚拟DOM重新渲染和打补丁之后调⽤，组件DOM已经更新，可执⾏依赖于DOM的操作activated：keep-alive开启时调⽤deactivated：keep-alive关闭时调⽤beforeDestroy：实例销毁之前调⽤。实例仍然完全可⽤，this仍能获取到实例destroy：实例销毁后调⽤，调⽤后，Vue实例指⽰的所有东西都会解绑定，所有的事件监听器会被移除，所有的⼦实例也会被销毁Vue⽣命周期3、vue的diff算法问题：渲染真实的DOM开销是很⼤的，修改了某个数据，如果直接渲染到真实dom上会引起整个DOM树的重绘和重排。Virtual Dom 根据真实DOM⽣成的⼀个Virtual DOM，当Virtual DOM某个节点的数据改变后⽣成⼀个新的Vnode，然后Vnode和oldVnode作对⽐，发现有不⼀样的地⽅就直接修改在真实的DOM上，然后使oldVnode的值为Vnode.注意：在采取diff算法⽐较的时候，只会在同层级进⾏，不会跨层级⽐较。当数据发⽣改变时，set⽅法会让调⽤()⽅法通知所有订阅者Watcher，订阅者就会调⽤patch函数给真实的DOM打补丁，更新响应的试图。4、MVVM 设计模式，是由 MVC（最早来源于后端）、MVP 等设计模式进化⽽来。M - 数据模型（Model），简单的JS对象VM - 视图模型（ViewModel），连接Model与ViewV - 视图层（View），呈现给⽤户的DOM渲染界⾯通过以上的MVVM模式图，我们可以看出最核⼼的就是ViewModel，它主要的作⽤：对View中DOM元素的监听和对Model中的数据进⾏绑定，当View变化会引起Modal中数据的改动，Model中数据的改动会触发View视图重新渲染，从⽽达到数据双向绑定的效果，该效果也是Vue最为核⼼的特性React1、⽣命周期的三个阶段Mounting：已插⼊真实DOM（加载阶段）Updating：正在被重新渲染（更新阶段）Unmounting：已移出真实DOM（卸载阶段）⽣命周期图解Redux提供的API1、createStorecreateStore⽅法的作⽤就是创建⼀个Redux store来存放应⽤中所有的statecreateStore(reducer, [preloadState], [enhancer])createStore⽅法接受三个参数，后⾯两个是可选参数reducer: 参数的类型必须是functionpreloadState: 这个参数代表初始化的state(initialState), 可以是任意类型的参数enhancer: 这个参数代表添加的各种中间件，参数的类型必须是functioncreateStore提供的⽅法：1、getState()返回当前的state2、dispach(action)参数action必须是⼀个对象，且必须含有type字段3、subscribe(listener)事件监听2、combineReducerscombineReducers主要是把多个reducer合并成⼀个，并且返回⼀个新的reducer函数，该函数接收的参数也是两个state和action3、compose主要是在中间件时候使⽤，合成函数compose(applyMiddleware(thunk),lsExtension ?lsExtension() : undefined)4、applyMiddleware5、bindActionCreatorbindActionCreator的主要作⽤就是将aciton与dispatch函数绑定，⽣成直接可以出发action的函数著作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。Http协议与数据请求1、HTTP⼯作原理HTTP协议定义Web客户端如何从Web服务器请求Web页⾯，以及服务器如何把Web页⾯传送给客户端。客户端向服务器发送⼀个请求报⽂，请求报⽂：【请求⽅法、URL、协议版本、请求头部和请求数据】服务器以⼀个状态⾏作为响应，响应的内容：【协议的版本、成功或失败代码、服务器信息、响应头部和响应数据】2、HTTP请求/响应的步骤客户端连接到Web服务器发送HTTP请求服务器接受请求并返回HTTP响应释放连接TCP连接客户端（浏览器）解析HTML内容3、POST和GET⽅法GET在浏览器回退时时⽆害的，⽽POST会再次提交请求GET请求会被浏览器主动缓存，⽽POST不会，除⾮⼿动设置 GET请求参数会被完整的保留在浏览器历史记录⾥，⽽POST中的参数不会被保留GET请求在URL中传送的参数是有长度的限制，⽽POST没有限制GET请求参数会暴露，不安全 GET参数通过URL传递，POST放在Requset Body中4、常见状态码200 OK：客户端请求成功206 Partial Content：客户发送了⼀个带有Range头的GET请求，服务器完成了它（当时⾳频或视频⽂件很⼤时返回206）301 Moved Permanently：所请求的页⾯已经转移⾄新的URL302 Found：所请求的页⾯已经临时转移⾄新的URL303 Not Modified：客户端有缓冲的⽂档并发出看⼀个条件性的请求，服务器告诉客户，原来缓冲的⽂档还可以继续使⽤403 Forbidden：对请求页⾯的访问被禁⽌404 Not Found：请求资源不存在500 Internal Server Error：服务器发⽣不可预期的错误原来缓冲的⽂档还可以继续使⽤503 Server Unavailable：请求未完成，服务器临时过载或宕机，⼀段时间后可恢复正常浏览器1、从输⼊URL到页⾯加载的全过程1. ⾸先，在浏览器地址中输⼊url2. 浏览器先查看**浏览器缓存**-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显⽰页⾯内容。若没有，则跳到第三步操作3. 浏览器向DNS（Domain Name System）服务器请求解析该URL中的域名对应的IP地址4. 解析出IP地址后，根据该IP地址和默认端⼝80，和服务器建⽴TCP连接5. 浏览器发出读取⽂件（URL中域名后⾯部分对应的⽂件）的HTTP请求，该请求报⽂作为TCP三次握⼿的第三个报⽂的数据发送给服务器6. 服务器对浏览器请求做出响应，并把对应的html⽂本发送给浏览器7. 释放TCP连接8. 浏览器将该html⽂本并显⽰内容2、重绘 & 回流DOM结构中的各个元素都有⾃⼰的盒⼦（模型），这些都需要浏览器根据格式的样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为reflow当各个盒⼦的位置、⼤⼩以及其他属性，如颜⾊、字体⼤⼩等都确定下来后，浏览器于是便把这些元素都按照各⾃的特性绘制了⼀遍，于是页⾯的内容出现了，这个过程称之为repaint/ 触发Reflow当你增加、删除、修改DOM节点时，会导致Reflow或Repaint当你移动DOM的位置，或是搞个动画的时候当你修改CSS样式的时候当你Resize窗⼝的时候（移动端没有这个问题），或是滚动的时候当你修改⽹页的默认字体时// 触发RepaintDOM改动CSS改动// 如何防⽌重排Reflow和重绘Repaint？3、常见浏览器及其内核1. -webkit-：webkit核⼼浏览器，Chrome2. -moz-：Gecko核⼼浏览器，fixfox3. -o-：Opera核⼼浏览器，Opera4. -ms-：微软的IE浏览器性能与安全1、提升页⾯性能的⽅法有哪些资源压缩合并、减少HTTP请求⾮核⼼代码异步加载---------》异步加载的⽅式---------》异步加载的区别利⽤浏览器缓存---------》缓存的分类-----------》缓存的原理【重点】利⽤CDN预解析DNS2、常见的兼容性问题1. 不同浏览器的标签默认的margin和padding不⼀样。*{margin:0;padding:0;}2. IE6双边距bug：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤。hack：display:inline;将其转化为⾏内属性。3. 设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7中⾼度超出⾃⼰设置⾼度。hack：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。4. Chrome 中⽂界⾯下默认会将⼩于 12px 的⽂本强制按照 12px 显⽰,可通过加⼊ CSS 属性 -webkit-text-size-adjust: none; 解决。5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决⽅法是改

本文发布于:2023-06-20，感谢您对本站的认可！

本文链接:http://torson.com.cn/wangzhan/1687276303a890.html