前端面试练习24.3.16

2024-03-17 18:52
文章标签 面试 16 练习 前端 frontend 24.3

本文主要是介绍前端面试练习24.3.16，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为什么要在样式初始化的时候设置{margin，padding}为0

在样式初始化时设置 {margin, padding} 为0，是为了确保网页在不同浏览器和设备上的显示效果更加统一，并且减少浏览器默认样式对页面布局的影响。这样做的主要原因包括：

  1. 消除浏览器默认样式的影响：不同的浏览器对于 HTML 元素的默认样式可能存在差异，如 <body>、<ul>、<li> 等元素在不同浏览器上的默认 margin 和 padding 可能不同。为了确保页面在不同浏览器上的显示效果一致，通常会将这些默认样式重置为0。

  2. 更精准的布局控制：通过将 margin 和 padding 设置为0，可以更精确地控制页面元素的布局，避免因为浏览器默认样式的影响导致布局偏差。这对于实现复杂的页面布局和样式设计至关重要。

  3. 避免外边距合并：外边距合并是指相邻元素的外边距会合并为一个外边距的现象。通过将 margin 设置为0，可以避免外边距合并带来的意外效果。

当然，在实际项目中，并不是一定要将所有的 margin 和 padding 设置为0，有时候会根据设计需求留出一定的间距。但是初始化时将它们设置为0是一个良好的习惯，可以提高开发效率和页面一致性。

1px如何设成0.5px(通过缩放)

在 Web 开发中，无法直接将元素的边框或宽度设置为 0.5px，因为大多数浏览器无法渲染这样的像素级别。然而，你可以通过 CSS 的缩放（scale）属性来实现类似的效果，但这并不是一个通用的解决方案，因为缩放会导致元素及其内容整体缩小。

以下是一个使用缩放来实现边框宽度为 0.5px 的示例：

.element {width: 100px;height: 100px;border: 1px solid black;transform: scaleY(0.5);
}

在这个示例中，我们定义了一个 .element 类，设置了宽度和高度为 100px，边框为 1px 实线黑色。然后，通过 transform: scaleY(0.5) 将元素在垂直方向上缩放为原来的一半，从而使边框看起来像是 0.5px。

需要注意的是，这种方法并不是真正的将边框宽度设置为 0.5px，而是通过缩放元素来模拟这种效果。此外，这种方法可能会影响到元素内部内容的布局和渲染，因此需要谨慎使用。

margin合并如何解决

在 CSS 中，相邻的两个块级元素的上下外边距可能会发生合并（margin collapse）的现象。合并的规则如下：

  1. 当相邻的上下外边距都是正数时，取两者中较大的值作为最终的外边距。
  2. 当相邻的上下外边距都是负数时，取两者绝对值中较大的值作为最终的外边距。
  3. 当相邻的上下外边距一个是正数一个是负数时，取两者相加的值作为最终的外边距。
  4. 当外边距发生合并时，会将合并后的外边距应用于两个相邻的块级元素之间。

在实际开发中，可以采用以下方法来解决 margin 合并的问题：

使用边界值：当相邻元素的上下外边距之间有固定的间隙时，可以通过在其中一个元素上应用 border、padding、或 height 来阻止外边距合并。

.element {border-top: 1px solid transparent; /* 添加一个透明的边框 */
}

使用内联块级元素：将相邻的块级元素改为内联块级元素，因为内联块级元素之间不会发生外边距合并的情况。

<div class="element"></div><div class="element"></div>
.element {display: inline-block; /* 将块级元素改为内联块级元素 */
}

使用 overflow: hidden：将父元素设置为 overflow: hidden 可以阻止其子元素的外边距合并。

.parent {overflow: hidden;
}

使用 padding：为父元素添加 padding 可以防止子元素的外边距合并。

.parent {padding: 1px 0; /* 添加上下 padding */
}

vue的指令

v-bind：用于动态地绑定 HTML 属性。

<a v-bind:href="url">Link</a>

 v-model：用于在表单元素上创建双向数据绑定。

<input v-model="message">

 v-if：根据表达式的值来条件性地渲染元素。

<h1 v-if="seen">Now you see me</h1>

 v-for：基于源数据多次渲染元素或模板块。

<ul><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

 v-on：用于绑定事件监听器。

<button v-on:click="doSomething">Click me</button>

 v-show：根据表达式的值来条件性地显示元素。

<h1 v-show="seen">Now you see me</h1>

 v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。

<span v-pre>{{ this will not be compiled }}</span>

 v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div v-cloak>{{ message }}
</div>

 v-text：更新元素的 textContent。如果要更新部分的 textContent，请使用 {{ Mustache }} 插值。

<span v-text="message"></span>

 v-html：更新元素的 innerHTML。注意，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<div v-html="htmlContent"></div>

vue的修饰符

.prevent：阻止默认行为。通常用于事件处理程序，阻止默认的事件行为。

<form v-on:submit.prevent="onSubmit">...</form>

 .stop：阻止事件冒泡。

<div v-on:click.stop="onClick">...</div>

 .capture：添加事件侦听器时使用事件捕获模式。即在捕获阶段触发事件而不是冒泡阶段。

<div v-on:click.capture="onClick">...</div>

 .self：只当事件是从事件源（即元素自身）触发时才触发回调。

<div v-on:click.self="onClick">...</div>

 .once：事件只触发一次，然后移除监听器。

<button v-on:click.once="onClick">Click me</button>

 .passive：滚动事件的默认行为会立即触发，不会等待执行 preventDefault()。

<div v-on:scroll.passive="onScroll">...</div>

 .native：监听组件根元素的原生事件。

<my-component v-on:click.native="onClick">...</my-component>

 .sync：语法糖，实现父子组件之间双向绑定。

<child-component :foo.sync="parentFoo"></child-component>

冒泡和默认事件

冒泡（Bubbling）：

事件冒泡是指事件在触发后，从目标元素逐级向上传播至 DOM 树根节点的过程。也就是说，如果一个元素的某个事件被触发了，它的父元素也会接收到该事件。这种从内向外传播的过程就是事件冒泡。

例如，当用户在一个按钮上点击时，该点击事件会首先触发在按钮上绑定的事件处理程序，然后冒泡至按钮的父元素、父元素的父元素，一直传播至文档根节点。

默认事件（Default Event）：

默认事件是指在特定情况下，浏览器自动触发的事件。例如，当用户在表单的 <input> 元素中按下回车键时，浏览器会自动提交表单。这个自动提交的行为就是默认事件。

有时候，我们需要阻止事件的默认行为，例如在表单提交时使用 JavaScript 阻止页面刷新。这就是通过调用 event.preventDefault() 方法来阻止默认事件。

冒泡和默认事件常常会一起使用。例如，当用户在一个链接上点击时，浏览器会触发链接的点击事件，并且默认情况下会跳转到链接的目标地址。在这种情况下，我们可以通过阻止事件冒泡和阻止默认事件来定制链接的点击行为，例如在点击链接时弹出一个提示框而不是跳转到目标地址。

如何内存清理

在 JavaScript 中，内存清理是通过垃圾回收器（Garbage Collector）来完成的，它负责自动监视和清除不再使用的内存。对于闭包产生的内存问题，通常可以采取以下几种方法来解决：

  1. 避免循环引用：当闭包中引用了外部作用域中的变量时，如果外部变量引用了闭包内的变量，就会形成循环引用，导致内存泄漏。为了避免这种情况，可以尽量减少闭包的使用，或者确保闭包内的变量不会被外部变量长期引用。

  2. 手动解除引用：在不需要使用闭包时，手动解除对闭包的引用可以帮助垃圾回收器更快地释放内存。例如，将闭包赋值为 null，或者将包含闭包的变量赋值为 null。

let closure = function() {// 闭包代码
};// 手动解除引用
closure = null;

  1. 使用事件委托：在事件处理程序中使用闭包时，可能会导致事件处理程序长期保存对 DOM 元素的引用，从而导致内存泄漏。为了避免这种情况，可以使用事件委托，将事件处理程序绑定到父元素上，从而减少闭包的使用。

  2. 使用 WeakMap 或 WeakSet：如果闭包中的变量是对象或 DOM 元素，可以考虑使用 WeakMap 或 WeakSet 来存储这些对象，以避免循环引用导致的内存泄漏。WeakMap 和 WeakSet 不会阻止对象被垃圾回收器回收，只要对象没有其他的引用。

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'value');// 不再需要 obj 时，WeakMap 会自动释放对 obj 的引用
obj = null;
  1. 性能优化：尽量避免创建过多的闭包，因为闭包的创建和销毁会消耗内存和 CPU 资源。可以考虑使用其他方式来实现相同的功能，例如使用局部变量代替闭包。

综上所述，通过合理的设计和编码习惯，可以有效地避免闭包产生的内存问题，并确保 JavaScript 应用程序的内存清理工作正常进行。

路由的两种模式

Hash 模式：

特点：
  1. 兼容性好：支持所有现代浏览器，包括老版本的 Internet Explorer。
  2. 部署简单：不需要特殊的服务器配置，可以在任何服务器环境下使用。
  3. 无刷新加载：路由跳转时不会触发页面的重新加载，提供了较好的用户体验。
优点：
  1. 兼容性强：适用于各种浏览器环境，包括老旧浏览器。
  2. 部署简单：不需要特殊的服务器配置，可在静态服务器环境下使用。
缺点：
  1. URL 不友好：URL 中带有 # 符号，看起来不够美观，不利于 SEO。
  2. Hash 模式的路由不会被搜索引擎索引：搜索引擎对于带有 # 符号的 URL 不会进行索引，影响网站的 SEO。
  3. 存在历史记录混乱问题：因为所有路由都是在同一个 URL 下进行的，所以浏览器的历史记录可能会变得混乱。

History 模式：

特点：
  1. URL 友好：URL 中不带 # 符号，看起来更加美观，有利于 SEO。
  2. 无刷新加载：与 Hash 模式相同，路由跳转时不会触发页面的重新加载。
  3. 可与服务器配合：通过服务器端配置，可以实现更灵活的路由配置。
优点：
  1. URL 友好：URL 更加美观，有利于 SEO，提高网站的搜索可见性。
  2. 可与服务器配合：可以在服务器端进行路由配置，更加灵活。
缺点：
  1. 兼容性稍差：不支持老版本的 Internet Explorer，需要在较新的浏览器中使用。
  2. 需要服务器配置：需要在服务器端进行特殊的配置，以处理直接访问或刷新路由时的情况。

综合考虑两种模式的特点、优缺点，开发者可以根据项目需求和实际情况选择适合的路由模式。如果对 SEO 和 URL 美观度要求较高，并且能够配置服务器环境，可以考虑使用 History 模式；如果需要兼容老旧浏览器或者部署简单，可以选择 Hash 模式。

这篇关于前端面试练习24.3.16的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/819832。

相关文章

前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2