前端面试题(前端面试题2020及答案)

前端面试题

HTML&CSS：对Web规范的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、挑选器优先级及运用、HTML5、CSS3、移动端习惯。
JavaScript：数据类型、面向目标、承继、闭包、插件、效果域、跨域、原型链、模块化、自定义事情、内存走漏、事情机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：HTTP、安全、正则、优化、重构、呼应式、移动端、团队协作、可保护、SEO、UED、架构、职业生涯
1.请你谈谈Cookie的坏处
cookie
1.IE6或更低版别最多20个cookie
2.IE7和之后的版别最终能够有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制
Opera会清理近期最少运用的Firefox会随机清理4096字节，为了兼容性，一般不能超过IE供给了一种存储能够耐久化用户数据，叫做IE5.0就开始支撑。每个数据最多128K，每个域名下最多1M。这个耐久化数据放在缓存中，假如缓存没有清理，那么会一向存在。
优点：极高的扩展性和可用性
1.经过杰出的编程，操控保存在cookie中的session目标的巨细。
2.经过加密和安全传输技能（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
4.操控cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺陷：
1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，不然会被截掉。
2.安全性问题。假如cookie被人拦截了，那人就能够获得所有的session信息。即便加密也与事无补，由于拦截者并不需要知道cookie的含义，他只要原样转发cookie就能够达到意图了。
3.有些状况不可能保存在客户端。例如，为了避免重复提交表单，咱们需要在服务器端保存一个计数器。假如咱们把这个计数器保存在客户端，那么它起不到任何效果。
2.浏览器本地存储
在较高版别的浏览器中，sessionStorage和HTML5中供给了globalStorage。
WebStorage包含了两种存储方法：localStorage。
sessionStorage不是一种耐久化的本地存储，只是是会话等级的存储。
而3.webstorage和cookie的差异
cookie类似，差异是它是为了更大容量存储设计的。Cookie都会被发送过去，这样无形中浪费了带宽，另外除此之外，setItem,getItem,removeItem,clear等方法，不像setCookie，getCookie。
可是Cookie的效果是与服务器进行交互，作为WebStorage只是是为了在本地“存储”数据而生
浏览器的支撑除了UserData其实就是webstorage。
sessionStorage都具有相同的操作方法，例如removeItem等
CSS相关问题
display:none和visibility:hidden的差异？
display:none躲藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden躲藏对应的元素，可是在文档布局中仍保留原来的空间。
CSS中link和@import的差异是？
A：(1)link归于HTML标签，而@import是CSS供给的;(2)页面被加载的时，link会一起被加载，而@import引用的CSS会等到页面被加载完再加载;(3)import只在IE5以上才干辨认，而link是HTML标签，无兼容问题;(4)link方法的款式的权重高于@import的权重.
position的absolute与fixed共同点与不同点
A：共同点：
1.改变行内元素的呈现方法，display被置为block；2.让元素脱离普通流，不占据空间；3.默认会掩盖到非定位元素上
B不同点：
absolute的”根元素“是能够设置的，而fixed的”根元素“固定为浏览器窗口。当你翻滚网页，fixed元素与浏览器窗口之间的间隔是不变的。
介绍一下CSS的盒子模型？
1）有两种，IE盒子模型、规范W3C盒子模型；IE的content部分包含了border和pading;
2）盒模型：内容(content)、填充(padding)、鸿沟(margin)、边框(border).
CSS挑选符有哪些？哪些属性能够承继？优先级算法如何计算？CSS3新增伪类有那些？
*1.id挑选器（#myid）
2.类挑选器（.myclassname）
3.标签挑选器（div,h1,p）
4.相邻挑选器（h1+p）
5.子挑选器（ul>li）
6.后代挑选器（lia）
7.通配符挑选器（*）
8.属性挑选器（a[rel=”external”]）
9.伪类挑选器（a:hover,li:nth-child）
*可承继的款式：font-sizefont-familycolor,text-indent;
*不可承继的款式：borderpaddingmarginwidthheight;
*优先级就近准则，同权重情况下款式定义最近者为准;
*载入款式以最终载入的定位为准;
优先级为:
!important>id>class>tag
important比内联优先级高,但内联比id要高
CSS3新增伪类举例：
p:first-of-type挑选归于其父元素的首个
元素的每个
元素。
p:last-of-type挑选归于其父元素的最终
元素的每个
元素。
p:only-of-type挑选归于其父元素仅有的
元素的每个
元素。
p:only-child挑选归于其父元素的仅有子元素的每个
元素。
p:nth-child(2)挑选归于其父元素的第二个子元素的每个
元素。
:enabled:disabled操控表单控件的禁用状况。
:checked单选框或复选框被选中。

前端面试题2020及答案

1、link和@import的差异
1、link是html的标签，不只可以加载css还可以定义Rss,rel连接特点；@import是css的语法规矩，只能引进款式；2、加载页面时，link是一起加载的，@impor是页面加载完后才加载3、link没有兼容性的问题，而@import只在较高版别的浏览器才可以识别4、link可以经过js刺进操作dom，@import不可以！
2、怎样了解js中的原型链
1；每个结构函数都有一个原型目标2；每个原型目标都有一个指向结构函数的指针3；每个实例函数都有一个指向原型目标的指针。4；查找方式是一层一层查找，直至顶层。Object.prototype
3、怎样了解js中的内存泄露
定义：程序不需求的内存，由于某些原因其不会返回到操作系统或者可用内存池中。内存泄露会导致（运转缓慢，高延迟，溃散）的问题
常见的导致内存泄露的原因有：1；意外的全局变量2；被遗忘的计时器或回调函数3；脱离文档的DOM的引用4；闭包
4、跨域问题
由于浏览器的同源战略会导致跨域，同源战略又分为
一：DOM同源战略：制止对不同源页面的DOM进行操作，主要是不同域名的ifram是约束互相访问的
二：xmlHttpRequest同源战略：制止使用XHR目标向不同源的服务器地址发起http恳求，只需域名协议端口有一个不同都被作为不同的域之间的恳求，即跨域恳求
解决方式：1、CORS跨域资源共享后端需求设置Access–Control-Allow-Credentials:true2、jsonp完成跨域：动态创建script，利用src特点进行跨域3、nginx代理跨域4、nodejs中间件代理跨域5、WebSokect协跨域6、window.name+ifram跨域
5、vuex：Vue.js应用程序的状态管理模式+库。
1、state
保存vuex中的数据源，经过this.$store.state获取2、getters
用于监听state中的值的变化，返回计算后的结果。getter的返回值会依据它的依靠被缓存起来3、mutations
是修改store中的值得仅有方式4、action
官方主张提交一个actions，在actions中提交mutations再去修改状态值。this.$store.dispatch(‘add’)//this.$store.commit(‘add’)5、modules模块化
前端面试题2020及答案：https://blog.csdn.net/weixin_42981560/article/details/104646699