当前位置: 首页 > Web前端 > CSS

2019-03前端面试题

时间:2023-03-31 00:36:21 CSS

let和var有什么区别?Let为ES6新增一条声明变量的命令,与var类似,但有以下区别:1.var声明的变量作用域在语句所在函数内,存在变量提升现象.2、let声明的变量,其作用域在语句所在的代码块内,没有变量提升。3.let不允许重复声明。它封装了一个函数,参数是定时器的时间,然后执行回调函数。functionsleep(time){returnnewPromise((resolve)=>setTimeout(resolve,time));}项目做了哪些性能优化?1.减少HTTP请求数2.减少DNS查询3.使用CDN4.避免重定向5.图片延迟加载6.减少DOM元素数7.减少DOM操作8.使用外部JavaScript和CSS9.压缩JavaScript,CSS,Fonts,图片等10.优化CSSSprite11.使用iconfont12.字体裁剪13.多域分发,将内容划分到不同的域名14.尽量减少iframe的使用15.避免imagesrc为空16.把样式表放在17.把脚本放在页面底部如何判断两个对象是否相等?1、转换为字符串后,比较字符串是否一致:JSON.stringify(obj)===JSON.stringify(obj2);2、Object.is(obj1,obj2):判断两个值是否[相同]。如果满足以下任一条件,则两个值相同。*两个值都是[undefined]*两个值都是[null]*两个值都是真或者都是假*两个值都是由相同数量的字符以相同的顺序组成的字符串*~两者values指向同一个对象~*两个values都是数字and*都是正零+0*都是负零-0*都是[NaN]*除了零和[NaN]都是同一个数什么的是模块化开发?mvvm的实现主要包括两个方面,数据变化更新视图,视图变化更新数据:重点是数据如何更新视图,因为视图更新数据其实可以通过事件监听,比如input标签监听'input'事件即可实现。那么我们就着重分析当数据发生变化时,如何更新视图。数据更新视图的重点是如何知道数据发生了变化。只要知道数据发生了变化,那么接下来的事情就好办了。如何知道数据发生了变化?其实上面我们已经给出了答案,就是通过Object.defineProperty()为属性设置一个set函数。当数据发生变化时,这个函数就会被触发,所以我们只需要更新一些需要更新的方法即可。放在这里可以实现数据更新视图。Vue通过Object.defineProperty()实现数据劫持。可以用来控制对象属性的一些特有操作,比如set()、get(),是否可以枚举。要实现数据的双向绑定,首先要对数据进行劫持和监听,所以我们需要设置一个监听器Observer来监听所有的属性。如果属性发生变化,需要告诉订阅者Watcher,看看是否需要更新。因为订阅者比较多,所以我们需要一个消息订阅者Dep专门收集这些订阅者,然后在监听者Observer和订阅者Watcher之间进行统一管理。接下来我们还需要一个commandparserCompile来扫描解析每个节点元素,将相关命令初始化成一个SubscriberWatcher,并替换模板数据或者绑定相应的函数。这时,当SubscriberWatcher收到相应属性的变化后,就会执行相应的更新函数来更新视图。那么接下来我们执行以下三个步骤来实现数据的双向绑定:1.实现一个监听器Observer来劫持监听所有的属性,如果有变化通知订阅者。2、实现一个SubscriberWatcher,可以接收属性变化通知,并执行相应的函数来更新视图。3.实现一个解析器Compile,可以扫描并解析各个节点的相关指令,根据初始化模板数据初始化对应的订阅者。流程图如下:浏览器兼容性问题图片说明1.Normalize.css2.不同的浏览器对标签的默认边距和内边距不同:3.IE6doublemargin问题:我在IE6中设置了float,同时设置了margin,会有边距问题:setdisplay:inline;4、图片有默认间距:使用float作为img布局5、IE9以下浏览器不能使用opacity:opacity:0.5;过滤器:alpha(不透明度=50);过滤器:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);6.cursor:handdisplayhandtypeisnotsupportedonsafari:统一使用cursor:pointer7.当标签的高度设置小于10px时,IE6、IE7会超过你设置的高度:标签设置overflow:hidden超过高度的,或者设置line-height的值小于你设置的高度8,CSSHACK方法:height:100px;//所有浏览器通用_height:100px;//IE6专用*+height:100px;//IE7专用*height:100px;//IE6,IE7共同高度:100px!important;//IE7、FF公用代码的顺序一定不能颠倒,否则前功尽弃。因为浏览器在解释程序的时候,如果名字相同,就会用后面的覆盖前面的,就像给变量赋值一样,所以我们把通用的放在前面,比较专业的放在前面,他们后面越多。区域?>只要协议、域名、端口有区别,都会被视为不同的域。>同源策略是浏览器的行为。是为了保护本地数据不被JavaScript代码获取的数据污染。所以拦截的是客户端发送的请求接收到的数据,也就是发送了请求,服务器响应了,但是浏览器接收不到。>跨域的原因是受同源策略限制。同源策略要求同源才能正常通信,即协议、域名、端口号都完全相同。>>注意点:>如果跨域问题是协议和端口引起的,“前台”无能为力;>关于跨域问题,域只是通过“URL的header”来标识,不会去尝试判断同一个ip地址对应两个域或者两个域是否在同一个ip上。(“URL的头部”是指window.location.protocol+window.location.host,也可以理解为“域、协议、端口必须匹配”。)什么是同源策略?>所谓同源,就是域名、协议、端口相同。浏览器采用同源策略,禁止页面加载或执行任何来自与其源域不同的域的脚本。通过document.domain跨域(只适用于不同子域的框架之间的交互)浏览器有同源策略,其局限性之一是不能通过ajax方式请求不同来源的文档。第二个限制是浏览器中不同域的框架之间不能进行js交互。不同框架之间可以获取到window对象,但是无法获取到相应的属性和方法。比如有一个页面,它的地址是[www.damonare.cn/a.html],这个页面里面有一个iframe,它的src是[damonare.cn/b.html],显然这个页面是相关的to其中的iframe框架是不同域的,所以我们无法通过在页面中写js代码来获取iframe中的内容:通过location.hash跨域的优缺点通过HTML5postMessage方法跨域通过jsonp*JSONP的优点是:不像XMLHttpRequest对象实现的Ajax请求那样受同源策略的限制;它具有更好的兼容性,可以在不支持XMLHttpRequest或ActiveX的情况下运行在旧浏览器中;并且请求完成后,可以通过调用callback返回结果。*JSONP的缺点是:只支持GET请求,不支持POST等其他类型的HTTP请求;只支持跨域的HTTP请求,无法解决不同域的两个页面之间如何进行JavaScript调用的问题。CORS(Cross-OriginResourceSharing)跨域资源共享定义了浏览器和服务器在访问跨域资源时应该如何通信。CORS背后的基本思想是使用自定义HTTP标头允许浏览器与服务器通信以确定请求或响应应该成功还是失败。目前所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程由浏览器自动完成,无需用户参与。对于开发者来说,CORS通信和同源AJAX通信没有区别,代码完全一样。浏览器一旦发现AJAX请求是跨域的,就会自动添加一些额外的header信息,有时会有额外的请求,但是用户是感觉不到的。通过window.name跨域的window对象有一个name属性,它有一个特点:即在一个窗口(window)的生命周期内,该window加载的所有页面共享一个window.name,每个页面都有window.name的读写权限,window.name在一个窗口加载的所有页面中是持久化的,不会在加载新页面时重置。前端优化:浏览器缓存前端优化:浏览器缓存技术介绍-掘金浏览器缓存分为强缓存和协商缓存。客户端请求资源时,获取缓存的过程如下:1)浏览器加载资源时,首先根据资源的一些http头判断是否命中强缓存。如果强缓存命中,浏览器直接从自身加载资源,从缓存中读取资源,不向服务器发送请求。比如:一个css文件,如果浏览器加载它所在的网页,css文件的缓存配置命中了强缓存,浏览器会直接从缓存中加载css,连请求都不会发送到网页所在服务器;2)当强缓存没有命中时,浏览器肯定会向服务器发送请求,服务器会根据资源的其他http头来验证资源是否命中了协商缓存。如果协商缓存命中,服务端会返回请求,但不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,所以浏览器会从自己的缓存中加载这个资源;3)强缓存和协商缓存的共同点是:如果命中,则从客户端缓存加载资源,而不是从服务端加载资源数据;不同的是:强缓存不向服务器发送请求,协商缓存向服务器发送请求。4)协商缓存未命中时,浏览器直接从服务器加载资源数据。jsonp的原理及实现Jsonp是一种跨域通信的手段,其原理其实很简单:>1、首先利用script标签的src属性实现跨域。>2.通过将前端方法作为参数传递给服务端,然后在服务端注入参数后返回,服务端与客户端通信。>3、由于使用了script标签的src属性,所以只支持get方法实现流程:1、设置一个script标签2。callback定义了一个函数名,远程服务器通过调用指定的函数并传入参数来实现传参,并将function(response)传回给客户端$callback=!empty($_GET['callback'])?$_GET['callback']:'callback';echo$callback.'(.json_encode($data).)';3、客户端接收到返回的js脚本,开始解析并执行一个简单的function(response)实例:一个简单的jsonp实现,其实就是拼接url,然后在头部动态添加一个script元素。函数jsonp(req){varscript=document.createElement('script');varurl=req.url+'?callback='+req.callback.name;脚本.src=url;document.getElementsByTagName('head')[0].appendChild(脚本);}前端js显示示例:functionhello(res){alert('hello'+res.data);}jsonp({url:'',callback:hello});服务端代码:varhttp=require('http');varurllib=require('url');varport=8080;vardata={'data':'world'};http.createServer(function(req,res){varparams=urllib.parse(req.url,true);if(params.query.callback){console.log(params.query.callback);//jsonpvarstr=params.query.callback+'('+JSON.stringify(data)+')';res.end(str);}else{res.end();}}).listen(port,function(){console.log('jsonpserverison');});可靠的jsonp实例:(函数(全局){varid=0,container=document.getElementsByTagName("head")[0];functionjsonp(options){if(!options||!options.url)返回;varscriptNode=document.createElement("脚本"),data=options.data||{},url=options.url,callback=options.callback,fnName="jsonp"+id++;//添加回调函数data["callback"]=fnName;//拼接urlvarparams=[];for(varkeyindata){params.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));}url=url.indexOf("?")>0?(url+"&"):(url+"?");url+=params.join("&");scriptNode.src=url;//传入的是匿名回调函数。如果要执行,则暴露为全局方法global[fnName]=function(ret){callback&&callback(ret);container.removeChild(scriptNode);删除全局[fnName];}//错误处理scriptNode.onerror=function(){callback&&callback({error:"error"});container.removeChild(scriptNode);global[fnName]&&deleteglobal[fnName];}scriptNode.type="text/javascript";container.appendChild(scriptNode)}global.jsonp=jsonp;})(this);使用示例:jsonp({url:"www.example.com",data:{id:1},callback:function(ret){console.log(ret);}});欢迎阅读:2019前端面试题-012019前端面试题-022019前端笔试题我是Cloudy,一只年轻的前端攻城狮,爱专研,爱技术,爱分享个人笔记,整理不易,感谢阅读,点赞收藏。如果大家对文章有什么问题欢迎指出,也欢迎大家一起交流各种前端问题!