web前端面试题@二（Keeplive、V-show和v-if的区别、同源策略及跨域）

Posted 2023-04-29

参考技术A             在vue中，我们使用component内置组件或者vue-router切换视图的时候，由于vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如：搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等。

            Keep-alive是一个vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。

            作为抽象组件，keep-alive是不会直接渲染在DOM中的。

        Keep-alive提供了三种可选属性

        Include-字符串或数组或正则表达式。只有名称匹配的组件被缓存。

        Exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。

        Max -数字类型。表示最多可以缓存多少组件实例。

        Keep-alive提供了两个生命钩子，分别是activated与 deactivated。

        因为Keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

        V-show有较高的渲染成本，

        V-if有较高的切换成本。

        V-if是真正的条件渲染，确保切换过程中条件内的事件监听器和子组件适当的被销毁和重建。

        V-show的元素始终被渲染并保存在dom中，操作的只是display属性控制演示影藏。

        源（origin）—— 就是协议、域名和端口号。若地址里面的协议、域名和端口号均相同则属于同源。

        同源策略——同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

    不受同源策略限制的

            1.页面中的链接，重定向以及表单提交是不会受到同源策略限制的。

            2.跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

　     跨域——只要协议、域名、端口号有一个不同就是跨域。

        跨域的原因？（只做了解）

　　跨域问题来源于javascript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等。

       1、 Jsonp——

                利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。jsonp是一种常用的跨域手段，和反向代理，服务端做跨域处理相比，jsonp更显得方便轻巧 jsonp的缺点只能发送get请求。因为script只能发送get请求需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callback(result)的形式。

       2、 Cors——

                服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。CORS 是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服 AJAX 只能同源使用的限制

                缺点是：目前所有最新浏览器都支持该功能，但是万恶的IE不能低于10

Access-Control-Allow-Origin 这个字段是必须的,表示接受那些域名的请求(*为所有)、Access-Control-Allow-Credentials 该字段可选, 表示是否可以发送cookie、Access-Control-Expose-Headers 该字段可选,XHMHttpRequest对象的方法只能够拿到六种字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用该字段指定。

       3、反向代理（Reverse Proxy）前端独立就能解决的跨域方案——

　　    指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

    

Web前端面试：这40个经典Web前端面试题面试者必看！

想成功就业Web前端工程师，想要能高薪就业，那么除了好的Web前端技能以外，还得有好的面试技巧，如果提前就了解更多企业的面试要求及面试题目，那么可以让我们的面试成功的几率大大的提高。今天千锋武汉Web前端培训小编为大家整理了一些经典的Web前端面试题，希望这些题目能够对大家有所帮助。

 

一、HTML常见题目

01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

02、HTML5为什么只需要写？

03、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

04、页面导入样式时，使用link和@import有什么区别？

05、介绍一下你对浏览器内核的理解？

06、常见的浏览器内核有哪些？

07、html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

08、如何区分HTML和HTML5？

09、简述一下你对HTML语义化的理解？

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

二、CSS类的题目

01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

02、CSS选择符有哪些？哪些属性可以继承？

03、CSS优先级算法如何计算？

04、CSS3新增伪类有哪些？

05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

06、display有哪些值？说明他们的作用。

07、position的值relative和absolute定位原点是？

08、CSS3有哪些新特性？

09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？

10、用纯CSS创建一个三角形的原理是什么？

三、JavaScript类的题目

01、JavaScript中this是如何工作的

02、请解释原型继承的原理。

03、什么是闭包(closure)，如何使用它，为什么要使用它？

04、.call 和.apply的区别是什么？

05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别？

06、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

07、请解释变量声明提升(hoisting)。

08、什么是 “use strict”; ？ 使用它的好处和坏处分别是什么？

09、什么是事件循环 (event loop)？

10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。

四、开发及性能优化类题目

01、如何规避javascript多人开发函数重名问题？

02、请说出三种减低页面加载时间的方法.

03、说说你所了解到的Web攻击技术。

04、说说你说了解的前端性能优化方法？

05、前端开发中，如何优化图像？图像格式的区别？

06、浏览器是如何渲染页面的？

07、页面重构怎么操作？

08、什么叫优雅降级和渐进增强？

09、前端需要注意哪些SEO？如何做SEO优化？

10、平时如何管理你的项目？

 

以上是Web前端一部分的面试题，小编今天为大家分享的关于Web前端面试常见问题汇总，加v芯获取：xxff751,掌握这些顺利拿offer!的文章，这些题目都是在Web面试中经常会出现的题目，快看看你能回答出几道？希望本篇文章能够对正准备参加Web面试的小伙伴们有所帮助。最后祝愿小伙伴们面试成功，顺利找到工作！