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