100道最常见的校招前端面试题.docx

1、100道最常见的校招前端试题（更新中）Http协议中Post和Get法的区别？Get请求Post执更有效率，是因为浏览器在发送Post请求时，会先将请求头发送给服务器确认，服务器返回100 continue响应后，浏览器才开始发送数据。如何利CSS实现三形？将个div的宽度和度，都设置为0，设置div四个边框的宽度，并利transparent属性隐藏三个边框，只留下个边框，就可得到个三形？如果是直三形，则隐藏2个相邻的边框，剩下2个相邻的边框就拼成了个直三形。常见的跨域技术有哪些？ 通过img标签的src属性通过JSONP动态插script标签，执回调函数通过跨域资源共享（CORS）发送AJA

2、X请求，普通跨域请求只需在服务端设置 Access-Control-Allow-Origin 即可。带有cookie的跨域请求，还需在服务端设置 Access-Control-Allow-Credentials ，且前端设置xhr对象的 withCredentials 属性为 true 。通过配置代理服务器，如nginx反向代理proxy_pass字段，nodejs中间件，webpackserver的proxy属性等。 通过websocket进跨域通过HTML5API PostMessage实现多页，多窗以及iframe之间的的通信如何利CSS2实现元素平垂直居中？利绝对定位 + margin

3、: auto 实现，设置top left bottom right为0利绝对定位，设置top left为50%，并设置 transform： translate（-50%，-50%） 实现内元素，使text-align: center，并将 line-height 值设置为元素度利flex进布局，设置 align-items: center; justify-content: center; 实现居中将元素设置为table-cell，使 vertical-align: middle 以及 text-align: center 实现居中rem和em的区别？rem是根据html根元素的字体进换算的

4、，em是根据元素的字体进换算的闭包是什么？有什么？闭包是指有权访问另函数作域中变量的函数，创建闭包的常式就是在个函数内部定义另个函数。 闭包可以创建私有变量和法，为setTimeout等法传递参数等闭包的缺点是，其让变量直保存在内存中，容易造成内存泄露图像懒加载的原理是什么？页加载时，将图加载的链接，保存在img标签的定义属性中，src属性为空，并监听窗的scroll事件。当img标签出现在视 中时，利js将图加载编写填写src属性中，实现动态加载图。git pull 和 git fetch法的区别？git fetch origin master:tmp 是从远程仓库获取最新数据到本地，但其不

5、会主动合并，需要你调 git merge 命令才会与当前分合并，在此之前你可以调 git diff 查看其与当前分的差异，选择是否合并 git pull 是获取数据后，直接将其合并到当前分Https的主要特点？https = http + 完整性保护（报摘要） + 认证 + 加密HTTPS只是HTTP通信接部分SSL或TLS等协议代替已。当通信时，HTTP先与SSL通信，再由SSL和TCP进通信。https使混合加密机制，先使对称加密换取对称加密密钥，再使对称加密传输数据信息https使数字证书认证机构（CA）和其相关机构颁发的公开密钥证书，可以使客户端验证服务器公开密钥的真实性。https在

6、发送数据时，会附加MAC报摘要，从防报在传输过程中遭遇篡改position属性有哪些？static: 默认值，位于档流之中，正常布局relative：位于档流之中，可以使top和left等属性，使其相对于原位置进偏移absolute：绝对定位，元素脱离档流，相对于其包含块定位（第个static值的元素） fixed：与absolute类似，不过其包含块为页。inherit：从元素那继承position属性initial：默认样式unset：未设置，若该样式可继承，则相当于inherit，若不可继承，则相当于initialxss和csrf是什么？各有什么防御段？xss为跨站脚本攻击，攻击者向we

7、b页中恶意植代码，户访问该页时，就会受到攻击。防御段：对输(和URL参数)进过滤并对输出进编码，例如单双引号、反斜线、于和于号。如果 script 、 img 、 link 以及 background 等标签或属性为动态内容，要确保这些url是安全的。在服务端对cookie设置 http only ，防攻击者窃取cookie值。使内容安全策略（CSP）。csrf为跨站请求伪造，指攻击者通过设置好的陷阱，强制对已完成认证的户进预期的个信息或设定信息等某些状态更新。防 御段：验证HTTP Refer（缺点：版的浏览器可可以篡改Refer），toke验证（在http请求中加随机产的toke，服务端进

8、合法性验证，缺点对每个请求都加token较烦，且token可能会被refer属性暴露），定义HTTP属性头（通过XMLHttpRequest这个类，给http请求加上属性头，缺点为只限于ajax）。通过cookie的sameSite字段。说下vue实例的命周期？new Vue() 初始化事件和命周期 beforeCreate 数据绑定 created 如果有 el 属性，则编译模板 beforeMount 添加 $el 属性，并替换掉挂载的DOM元素 mounted 数据更新 beforeUpdate 重新编译模板并渲染DOM updated 调 $destoryed beforeDestor

9、y 销毁vue实例 destroyedreact中props和state有什么区别？react是单向数据流，props是个组件传递给组件的数据流接，可以直的被传递到孙组件中，在组件内部的props是只读的。state是组件内部私有的状态，通过修改state会触发组件的重新渲染。如何解决float属性引起的元素塌陷问题？ 给元素设置 overflow: hidden 属性给元素添加个度display: block通过伪类，给这个伪类添加 clear: both 和实现个防抖函数和节流函数？函数节流: 频繁触发,但只在特定的时间内才执次代码函数防抖: 频繁触发,但只在特定的时间内没有触发执条件才执

10、次代码/防抖函数function debounce(fn, time) return function()var context = this; clearTimeout(timeId);timeId = setTimeout(function() fn.apply(context, arguements);, time);/节流函数function throttle(fn,time) var last = 0;return function() var context = this;var now = Date.now(); if (now - last = time)fn.apply(th

11、is, arguments); last = now;16. Js中常见的对象继承式？/原型链继承SubType.prototype = new SuperType();/构造函数继承function SubType() SuperType.call(this);原型链继承的缺点在于，当类存在引型属性时，该属性会被所有实例共享，因此修改某个实例的该属性，会影响到其他实例。构造函 数的缺点在于，每次调构造函数，对象法都会被创建次，法达到函数复。因此在实际作中，是结合两者进使，原型链继承法，构造函数继承属性。17. new操作符做了哪些事情？const a = new Foo();/以下为new

12、操作符的事情var o = new Object(); /新建个空对象o._proto_ = Foo.prototype; /将该空对象的原型指向构造函数的原型对象Foo.call(o); /在空对象上调构造函数a = o; /赋值给变量18. 说 说 Js 事 件 循 环 ？ 19. promise 的 原 理 是 什 么 ？ 20. CommonJS，AMD，CMD以及ES6 import的区别是什么？ CommonJS是运时加载，ES6是编译时输出接CommonJS是输出的个值的复制，ES6输出的是值的引AMD 异步模块定义，通过define函数声明依赖模块（数组）和回调函数，特点是依赖

13、前置，其加载模块完成后就会执该模块，所有模块都加载执完后会进回调函数，执主逻辑，这样的效果就是依赖模块的执顺序和书写顺序不定致，看络速度，哪 个先下载下来，哪个先执，但是主逻辑定在所有依赖加载完成后才执。CMD 同样为异步加载，区别在于其为就近依赖，需要使把模块变为字符串解析遍才知道依赖了那些模块，其加载完某个依赖模块后并不执，只是下载已，在所有依赖模块加载完成后进主逻辑，遇到require语句的时候才执对应的模块，这样模块的执顺 序和书写顺序是完全致的。21. 说下TCP的3次握连接和4次挥断开连接，为什么个是3次，个是4次？三次握：客户端向服务端发送个SYN报，服务端收到报确认后，发送个S

14、YN-ACK报，客户端收到服务器的报后，返 回个ACK报，连接建。四次挥：客户端向服务端发送个FIN报，服务端收到报后，即发送个ACK报，随即通知本地服务启动清理作，当清 理完成时，发送个FIN报给客户端，客户端收到后返回个ACK报，连接关闭。由于服务端接受到客户端关闭连接请求时，可能些数据还没有发送完成，因此不能刻关闭连接，因此多了次挥。22. DNS的解析过程是什么？什么是DNS劫持攻击？先检查浏览器缓存中以及操作系统缓存中有没有对应的已解析过的结果（hosts件），若没有则请求本地域名服务器（LDNS）来 解析这个域名，若未成功解析，则跳转到根域名服务器，根域名服务器给予个主域名服务器地

15、址，然后本地域名服务器再去请求主 域名服务器地址，接着主域名服务器会返回站注册域名的服务器Name server的地址，本地服务器去访问Name server，最终找到ip地址并返回给本地域名服务器，然后缓存该ip地址，解析结束。DNS劫持：被称为域名劫持，DNS重定向（DNS direaction）,是种DNS攻击式。即是DNS查询没有得到正确的解析，以致引导user访问到恶意的站，从窃取户隐私，或者进某些恶意的操作（修改本地hosts件，缓存、侵到路由管理员账号中， 修改路由器的默认配置、感染dns服务器的缓存）。https:/juejin.im/post/6844903863623876

16、62223. CSS各选择器的优先级？!important 内样式ID选择器 类选择器/属性/伪类 标签 通配符 继承 浏览器默认属性24. 说下浏览器从发起请求到呈现页的整个过程？DNS解析ip地址 TCP三次握连接 发送HTTP请求 服务器处理，返回HTTP响应 浏览器解析响应 构建DOM树、CSSrule 树，合并成render树，计算布局并绘制25. 阶函数是什么？有什么？个函数就可以接收另个函数作为参数，这种函数就称之为阶函数。阶函数泛应于js中，例如map、sort、setTimeout等26. 说下meta标签有什么？元素可提供有关页的元信息（meta-information），

17、如针对搜索引擎、更新频度、cookie的描述和关键词。元数据总是以名称/ 值对的形式表，名称有两种类型： name 和 http-equiv 。其中当名称为 http-equiv ，会将值关联到HTTP头部。常见的类型如下 5秒跳转 页适配 声明字符集 声明过期时间27. HTML档有哪种档类型？为什么要进类型声明？严格型（strict）、过渡型（transitional）和框架型（Frameset）严格型不包括框架集、些废弃的元素标签，过渡型包含废弃的元素标签，但不允许框架集。框架型等同于过渡型，且允许框架。 作：只有进正确的类型声明，浏览器才能正确的解析html档。28. bootstra

18、p栅格系统的原理是什么？ 媒体查询 + 百分宽度media (min-width: 768px) /*当宽度于768px时触发*/.container width: 750px;media (min-width: 992px) /*当宽度于992px时触发*/.container width: 970px;media (min-width: 1200px) /*当宽度于1200px时触发*/.container width: 1170px;29.30.vh和vw单位是什么？vw：视窗宽度的百分（1vw 代表视窗的宽度为 1%） vh：视窗度的百分vmin：当前 vw 和 vh 中较的个值vma

19、x：当前 vw 和 vh 中较的个值32.CSS可继承的属性不可继承的： display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi所有元素可继承： visibility和cursor内联元

20、素可继承： letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-块状元素可继承： text-indent和text-align列表元素可继承： list-style、list-style-type、list-style-position、list-style-image表格元素可继承： border-collapseweight、text- decoration、text-transform、direction34.j

21、s对象的深拷贝？function deepClone(obj) if (obj instanceof Object)var newObj = Array.isArray(obj)? :; for (var key in obj)if (objkey instanceof Object) newObjkey = deepClone(objkey);elsenewObjkey = objkey;elsevar newObj = obj;return newObjl36. 长轮询和短轮询是什么？短轮询指浏览器向服务器发送个请求，询问是否有数据更新，服务刻返回响应。段时间后浏览器发起个到服务器的新请

22、求。长轮询指浏览器向服务器发送个请求，服务直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，随即发起个到服务器的新请求。（使XHR对象和setTimeout()实现）37. 原js读取和修改cookie？function getCookie(name)var cookies = document.cookie.split(;); var value = null;for (var i =0; i 0) value = cookiesi.split(=)1;return value;function setCookie(name, value, expires, path, dom

23、ain, secure) var cookieText = name + = + value + ;if (expires)cookieText += expires= + expires.toGMTString() + ;if (path)cookieText += path= + path + ;if (domain)cookieText += domain= + domain + ;if (secure)cookieText += secure;document.cookie = cookieText;function delCookie(name,path,domain,secure)

24、 setCookie(name, , new Date(0), path, domain, secure);HTTP2有什么特点？HTTP/2采进制格式本格式。在应层(HTTP/2)和传输层(TCP or UDP)之间增加个进制分帧层。在该进制分帧层中，HTTP2.0将传输的消息划分为更的消息和帧，并采进制编码。其中HTTP1.1的部信息被封装到HEADER frame，请求实体被封装到DATA frame中。HTTP/2是完全多路复的，有序并阻塞的只需个连接即可实现并使报头压缩，HTTP/2降低了开销（采了HPACK压缩算法） HTTP/2让服务器可以将响应主动“推送”到客户端缓存中40.c

25、ookie、localStorage、sessionStorage的区别是什么？ 共同点：都是保存在浏览器端、且同源的区别：1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径 下2、存储限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很的数据，如会话标识。sessionStorage和localStor

26、age虽然也有存储的限制，但cookie得多，可以达到5M或更3、数据有效期不同，sessionStorage：仅在当前浏览器窗关闭之前有效；localStorage：始终有效，窗或浏览器关闭也直保存，因此作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗关闭或浏览器关闭4、作域不同，sessionStorage不在不同的浏览器窗中共享，即使是同个页；localstorage在所有同源窗中都是共享的； cookie也是在所有同源窗中都是共享的5、web Storage持事件通知机制，可以将数据更新的通知发送给监听者6、web Storage的api接使更便42.call、

27、apply、bind法的区别是什么？三种法都能在运时改变this的指向，区别在于call，apply于执函数，bind于返回个新函数。call法的参数项需要个 个列出来，apply参数项则是个列表，bind后接的参数于函数柯化。ES6 map和对象的区别？map的键可以是任意数据结构，对象只能是字符串。map可以通过size属性，需遍历，即可获取键值对的个数。45.46.47.前端页如何优化？1、减少HTTP请求次数2、使缓存、内容分发络CDN（使多个不同的域名存储资源，突破浏览器的并发限制，版IE6并发连接为2个，现代浏览器多为6次）3、图懒加载、css spirte（background-

28、position，background-image） 4、使事件委托、防抖节流等技术5、尽可能使CSS动画6、压缩css、js、图等件7、避免DOM深层次嵌套，减少对DOM的访问次数8、将外部脚本置底9、减少重绘和回流次数49.50.写个匹配邮箱的正则表达式？/a-zA-Z0-9_.-+a-zA-Z0-9-+(.a-zA-Z0-9-)*.a-zA-Z0-92,6$/(w)+(.w+)*(w)+(.w2,3)1,3)$/js中null和undefined的区别是什么？Undefined类型只有个值，即 undefined 。当声明的变量还未被初始化时，变量的默认值为undefined。Null类

29、型也只有个值，即 null 。null来表尚未存在的对象，常来表函数企图返回个不存在的对象。从逻辑度看，null值表个空对象指针53.54.说说webpack的插件系统webpack在构建过程中会创建complier和compliation对象，这两个类都是继承于Tapable类，在构建过程中，complier和compliation对象内部都有相应的钩，例如complier的 entryOption ， run ， complie ， make ， emit ， done 等和compliation 的 buildModule ， seal ， afterOptimizeChunkAsset

30、s 等。不同阶段的钩类型页也不相同，具体有：SyncHook1. 普通的同步钩SyncBailHook2. 如果在钩函数序列中某个函数返回了个undefined的值，其之后的钩函数不再执SyncWaterfallHook3. 在钩函数序列中，当前函数的输值是上个函数的返回值SyncLoopHook4. 如果某个钩函数返回值不是个undefined值，就会直执这个钩函数AsyncParallelHook5. 异步并执所有注册的钩函数，当所有钩函数都执完毕后，会调个最终回调AsyncParallelBailHook6. 如果在并执的钩函数序列中某个函数返回了个undefined的值，就执调最终回调

31、，但不会 阻还没有执完的钩函数AsyncSeriesHook7. 异步串执钩函数序列8. AsyncSeriesBailHook 、 AsyncSeriesWaterfallHook参 考 https:/juejin.im/post/684490389558447309656.57.58.59.下代码的输出是什么？1第个是当前 button 元素，第个是 window 对象, 当 addEventListener 进事件绑定时，默认普通回调函数的 this 为绑定事件的元素61.说说redux的实现原理/ createStore.js/ 调applyMiddlemare返回的函数if (typ

32、eof enhancer != undefined) if (typeof enhancer != function) throw new Error(Expected the enhancer to be a function.)return enhancer(createStore)(reducer, preloadedState)/ dispatch.js/ 原始的dispatch函数，将action传reducer中并依次调注册的listenerfunction dispatch(action) if (!isPlainObject(action) throw new Error(Ac

33、tions must be plain objects. +Use custom middleware for async actions.)if (typeof action.type = undefined) throw new Error(Actions may not have an undefined type property. + Have you misspelled a constant?)if (isDispatching) throw new Error(Reducers may not dispatch actions.)try isDispatching = true

34、currentState = currentReducer(currentState, action) finally isDispatching = falseconst listeners = (currentListeners = nextListeners) for (let i = 0; i (.args) = const store = createStore(.args) let dispatch = () = throw new Error(Dispatching while constructing your middleware is not allowed. +Other

35、 middleware would not be applied to this dispatch.)const middlewareAPI = getState: store.getState,dispatch: (.args) = dispatch(.args)const chain = middlewares.map(middleware = middleware(middlewareAPI) dispatch = compose(.chain)(store.dispatch)return .store, dispatch63.64.65.66.67.68.69.70.71.72.你的优点和缺点是什么开放问题相其他，你的优势是什么开放问题作中，你遇到最困难或最挫折件事是什么开放问题作中，你遇到最有成就或最豪的事是什么开放问题77.78.如果觉得这篇章帮助了您，请打赏个红包励作者继续创作哦！