前端面试题详解整理55|vue缓存数据和组件的方法，跨域，css隐藏元素的几种方式 ,link引入样式和import有什么区别 ,

金色的雨570
62 阅读6分钟

途游游戏-前端面经

2024.02.26 一面
谈谈两个印象深刻的项目

css隐藏元素的几种方式

在CSS中，常见的隐藏元素的几种方式包括：

  1. display: none;： 使用该属性可以完全隐藏元素，元素不会占据任何空间，并且不会在页面中显示。

    .hidden-element {
    display: none;
}

  2. visibility: hidden;： 使用该属性可以隐藏元素，但是元素仍然会占据相应的空间，只是在页面中不可见。

    .hidden-element {
    visibility: hidden;
}

  3. opacity: 0;： 使用该属性可以将元素的透明度设置为0，元素仍然占据空间，但在页面中不可见。

    .hidden-element {
    opacity: 0;
}

  4. position: absolute; left: -9999px;： 将元素移出屏幕可视区域，常用于屏幕阅读器等辅助工具。

    .hidden-element {
    position: absolute;
    left: -9999px;
}

  5. clip-path: inset(100%);： 使用clip-path属性裁剪元素，将其所有内容剪切掉，使其不可见。

    .hidden-element {
    clip-path: inset(100%);
}

clip-path:inset(100%); 这些方法的选择取决于具体的需求和情境，例如是否需要元素占据空间、是否需要元素在页面中完全消失等。

通过link引入样式和import有什么区别

在HTML中引入样式表，可以使用<link>标签或@import规则，它们的主要区别如下：

  1. 加载时机：

    • <link>标签：在页面加载时同时加载外部样式表，不会阻塞页面的渲染。
    • @import规则：在页面的样式解析阶段加载外部样式表，会阻塞页面的渲染。

  2. 兼容性：

    • <link>标签：兼容性较好，适用于各种浏览器。
    • @import规则：在早期的一些浏览器版本中不被支持或支持不完全。

  3. 权重：

    • <link>标签：引入的样式表在样式层叠中的权重较高，优先级较高。
    • @import规则：引入的样式表在样式层叠中的权重较低，优先级较低。

  4. CSS加载方式：

    • <link>标签：以并行方式加载，可以同时加载多个外部样式表。
    • @import规则：以串行方式加载，每个@import都会触发一次新的HTTP请求，不能并行加载。

基于以上区别，通常推荐使用<link>标签来引入外部样式表，特别是在需要提高页面加载速度和性能的情况下。@import规则可以作为一种在样式表中动态引入其他样式的方式，但应注意其在页面加载过程中的阻塞特性。

跨域是如何产生的，该如何解决跨域

跨域是指在浏览器的同源策略下，当一个网页的脚本试图去访问不同源（域名、协议、端口号任何一个不同）的资源时，就会产生跨域问题。同源策略是一种安全机制，用于限制一个源加载的文档或脚本与来自另一个源的资源进行交互。

跨域问题可以通过多种方式解决，包括：

  1. JSONP（JSON with Padding）： JSONP是一种利用<script>标签可以跨域加载资源的特性来实现跨域通信的技术。通过在请求URL中添加一个回调函数名，服务器端将数据包装在回调函数中返回，前端页面通过回调函数获取数据。

  2. CORS（Cross-Origin Resource Sharing）： CORS是一种现代浏览器支持的跨域解决方案。在服务器端配置合适的CORS头部信息，允许特定域名下的请求访问资源，从而实现跨域访问。

  3. 代理服务器： 可以在服务器端设置一个代理服务器，将跨域请求转发到目标服务器，并将响应返回给客户端。这种方式需要自己搭建一个代理服务器，适用于需要对请求进行一些处理或者过滤的情况。

  4. WebSocket协议： WebSocket协议本身不受同源策略的限制，可以实现跨域通信。通过在服务器端部署WebSocket服务，客户端可以通过WebSocket与服务器进行双向通信。

  5. 跨域资源共享（Cross-Origin Resource Sharing）： CORS是一种通过HTTP头部来告知浏览器是否允许网页访问不同源服务器上的特定资源的机制。通过在服务器端设置合适的CORS头部，可以让浏览器发起跨域请求。

  6. PostMessage方法： 在同一个窗口中的不同域之间进行通信。可以通过window.postMessage()方法在不同源之间发送消息，然后在接收方页面中监听message事件进行处理。

以上方法各有优劣，具体选用哪种方式取决于实际需求和场景。

vue缓存数据和组件的方式

在Vue中，可以通过多种方式来缓存数据和组件，具体取决于你的需求和场景。以下是一些常见的方法：

  1. Vue Router 路由缓存： 使用Vue Router的<keep-alive>组件可以缓存动态组件，这样在路由切换时，不会销毁组件，而是将其缓存起来，以提高页面的性能和用户体验。你可以通过在路由配置中设置<keep-alive>的include和exclude属性来控制哪些组件需要被缓存或排除缓存。

  2. Vuex 状态管理： 使用Vuex可以方便地进行状态管理，并在应用的各个组件之间共享数据。Vuex的状态是响应式的，可以缓存一些全局的状态数据，以便在应用中的任何地方都可以访问和修改这些数据。

  3. LocalStorage 或 SessionStorage： 如果需要在页面刷新后仍然保持数据，可以使用浏览器提供的LocalStorage或SessionStorage来进行数据的持久化存储。这种方式可以将数据保存在浏览器的本地存储中，以便下次访问页面时可以直接读取数据。

  4. 自定义缓存策略： 根据具体需求，你还可以实现自定义的缓存策略。例如，可以使用浏览器的缓存机制来缓存一些静态资源，或者使用Service Worker来实现离线缓存等功能。

总之，在选择缓存数据和组件的方式时，需要根据具体的业务需求和性能要求来进行权衡和选择。

面试官只问了几个问题，相对简单。

作者：iammia
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝