面试ssss


响应式布局

响应式布局是一种设计和开发网页的方法,使网页能够适应不同的设备和屏幕尺寸,提供更好的用户体验。它通过使用媒体查询(Media Queries)和弹性布局(Flexbox)等技术,根据设备的特性和视口(Viewport)大小来自动调整和重新排列页面的元素和内容。

响应式布局的目标是使网页在各种设备上都能呈现良好的布局和可用性,无论是在桌面电脑、笔记本电脑、平板电脑还是手机等移动设备上。

以下是一个简单的响应式布局的示例,假设我们有一个包含导航栏和内容区域的网页布局:

html

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 基础样式 */body {margin: 0;padding: 0;font-family: Arial, sans-serif;}/* 导航栏样式 */.navbar {background-color: #333;color: #fff;padding: 10px;}/* 内容区域样式 */.content {padding: 20px;}/* 媒体查询 */@media (max-width: 768px) {/* 在小屏幕上调整布局 */.navbar {text-align: center;}}</style>
</head>
<body><div class="navbar">导航栏</div><div class="content"><h1>响应式布局示例</h1><p>这是页面的内容。</p></div>
</body>
</html>

在上述示例中,我们使用了媒体查询来针对小屏幕设备(最大宽度为768px)调整导航栏的样式。在小屏幕上,导航栏的文本居中显示,以适应较小的视口。

通过设置 <meta> 标签中的 viewport 属性,我们告诉浏览器对页面进行响应式布局。width=device-width 表示将视口宽度设置为设备的宽度,initial-scale=1.0 表示初始缩放级别为 1.0。

当在不同的设备上打开上述示例页面时,可以看到导航栏在桌面和小屏幕设备上有不同的布局效果,以适应不同的屏幕尺寸。

这只是一个简单的示例,实际的响应式布局可能涉及更复杂的调整和适配,包括使用媒体查询和弹性布局来改变元素的大小、位置和显示方式,以适应不同的设备和屏幕布局

深拷贝和浅拷贝

深拷贝和浅拷贝是关于对象(包括数组)复制的两个概念。

浅拷贝在复制对象属性的时候,复制的是指针(引用),所以,修改目标对象的属性值会影响到原对象的对应属性值 obj。assign

深拷贝

这个函数使用递归的方式对对象进行深拷贝。对于每个属性,如果是基本类型或null,则直接复制;如果是数组,则创建一个新的数组,并递归深拷贝每个元素;如果是对象,则创建一个新的对象,并递归深拷贝每个属性。

function deepCopy(obj) {if (typeof obj !== 'object' || obj === null) {// 对于基本类型和null,直接返回return obj;}
​let copy;if (Array.isArray(obj)) {// 处理数组copy = [];for (let i = 0; i < obj.length; i++) {copy[i] = deepCopy(obj[i]);}} else {// 处理对象copy = {};for (let key in obj) {if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key]);}}}
​return copy;
}

  1. 如何实现一个new

1 创建一个新的对象obj2 将对象与构建函数通过原型链连接起来3 将构建函数中的this绑定到新建的对象obj上4 根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理
如果构造函数有返回值并且返回值是一个对象,则返回该对象;否则返回新对象实例举个例子:function Person(name, age){this.name = name;this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'手动实现一下
function mynew(Func, ...args) {// 1.创建一个新对象const obj = {}// 2.新对象原型指向构造函数原型对象obj.__proto__ = Func.prototype// 3.将构建函数的this指向新对象let result = Func.apply(obj, args)// 4.根据返回值判断return result instanceof Object ? result : obj
}
  1. 怎么理解回流和重绘

  2. 前端如何做性能优化

  3. 跨域是什么?怎么解决?isonp方式是如何做的

以下是使用 JSONP 的具体实现步骤:

  1. 客户端发送 JSONP 请求:在客户端(例如浏览器中的 JavaScript)中创建一个 <script> 标签,其中的 src 属性指向目标服务器的接口,并在 URL 中包含一个回调函数名作为参数。

function handleResponse(data) {// 处理响应数据
}
​
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);
  1. 服务器返回响应:服务器接收到请求后,将数据包装在回调函数中返回给客户端。回调函数名由客户端指定,它会作为参数出现在响应中。例如,服务器响应如下:

handleResponse({ message: 'Hello, JSONP!' });
  1. 客户端处理响应:由于服务器返回的是一个包裹在回调函数中的 JavaScript 代码,浏览器会将该代码当作脚本执行,从而触发客户端事先定义的回调函数。通过在客户端定义一个与服务器返回的回调函数名相同的函数,可以在回调函数中处理服务器返回的数据。

javascript

function handleResponse(data) {// 处理响应数据console.log(data.message); // 输出:Hello, JSONP!
}

需要注意的是,JSONP 的使用有一些限制和安全风险:

  • JSONP 只支持 GET 请求,不支持其他 HTTP 方法。

  • 由于 JSONP 是通过动态创建 <script> 标签来实现的,因此无法像使用 XMLHttpRequest 或 Fetch API 那样获取完整的响应对象,例如状态码、响应头等。

  • JSONP 要求服务器能够返回一个包装在回调函数中的 JavaScript 代码,这可能会导致安全问题,因为服务器端的代码可以被注入到客户端页面中。

  1. 事件循环说说,宏任务和微任务有哪些

事件循环(Event Loop)是 JavaScript 中处理异步操作的机制。它负责管理任务队列(Task Queue)中的任务,并按照特定的执行顺序将它们执行。

宏任务:setTimeout setInterval Ajax DOM事件 微任务:Promise

事件循环的执行顺序如下:

事件循环的执行顺序是先执行同步任务,然后处理微任务队列,再执行异步任务,接着处理宏任务队列,最后再次处理微任务队列,然后进入下一个循环。微任务具有高优先级,会在下一个宏任务之前执行,这意味着微任务队列中的任务会在下一个宏任务执行之前完成。

事件循环的基本流程如下:

  1. 执行同步任务: 从调用栈中取出一个同步任务执行,直到调用栈为空或遇到异步任务。

  2. 执行微任务(Microtasks): 在同步任务执行完毕后,会检查微任务队列(也称为 Promise 队列)。如果存在微任务,事件循环会依次执行微任务直到微任务队列为空。微任务通常包括 Promise 的回调函数、MutationObserverprocess.nextTick 等。

  3. 执行宏任务(Macrotasks): 如果微任务队列为空,事件循环会从宏任务队列中选择一个任务执行。宏任务包括定时器回调函数(setTimeoutsetInterval)、事件回调函数(如用户交互事件、网络请求、文件读写等)等。

  4. 更新渲染(Update rendering): 如果浏览器需要重绘或重新布局页面,会执行相应的渲染操作。

  5. 重复步骤: 重复以上步骤,不断处理任务直到所有任务完成。

需要注意的是,微任务优先级高于宏任务,即在执行微任务队列之前不会执行下一个宏任务。这意味着微任务可以在同一次事件循环中立即执行,而宏任务需要等待下一次事件循环。

  1. this指向问题

// 全局上下文
console.log(this); // 输出全局对象 (window 或 global)// 函数调用
function sayHello() {console.log(this);
}sayHello(); // 输出全局对象 (window 或 global)const obj = {name: 'John',greet: function() {console.log(this.name);}
};obj.greet(); // 输出 "John"function Person(name) {this.name = name;this.greet = function() {console.log('Hello, ' + this.name);};
}const person1 = new Person('Alice');
person1.greet(); // 输出 "Hello, Alice"const greet = person1.greet;
greet(); // 输出 "Hello, undefined" (非严格模式下),或抛出错误 (严格模式下)const arrowFunc = () => {console.log(this);
};arrowFunc(); // 输出全局对象 (window 或 global)

在 JavaScript 中,this 关键字用于引用当前执行上下文中的对象。它的值取决于函数被调用的方式和上下文。

  1. 全局上下文:
    当在全局作用域中使用 this 时,它将指向全局对象(浏览器环境中为 window 对象,Node.js 环境中为 global 对象)。

  2. 函数调用:
    在函数内部,this 的指向取决于函数的调用方式:

    • 作为函数调用时,this 指向全局对象(非严格模式下),或者是 undefined(严格模式下)。
    • 作为对象方法调用时,this 指向调用该方法的对象。
    • 作为构造函数调用时,this 指向新创建的对象实例。
    • 使用 call()apply()bind() 方法显式地指定 this 的值。
  3. 箭头函数:
    箭头函数的 this 在定义时就被绑定,它的指向始终是定义时所在的上下文,而不是运行时的调用方式。

  1. 了解axios的原理吗?怎么实现的

  2. js有哪些数据类型

  3. 箭头函数和普通函数的区别

  • this 的绑定:

    • 普通函数:每个函数都有自己的 this 值,它在运行时根据调用方式进行绑定。在普通函数内部,this 的值取决于函数是如何被调用的。
    • 箭头函数:箭头函数没有自己的 this 值,而是继承其父作用域的 this 值。箭头函数内部的 this 始终指向定义时所在的上下文的 this 值。
  • arguments 对象:

    • 普通函数:普通函数内部可以访问到特殊的 arguments 对象,该对象包含了函数被调用时传递的参数列表。
    • 箭头函数:箭头函数没有自己的 arguments 对象。如果需要访问参数,可以使用剩余参数语法 ...args 或者使用普通函数来获取 arguments 对象。
  • 构造函数:

    • 普通函数:普通函数可以用作构造函数,通过 new 关键字创建实例对象。
    • 箭头函数:箭头函数不能用作构造函数,无法通过 new 关键字创建实例对象。
  1. 前端缓存

  2. https和http的区别,http缓存有哪些,为什么要减少http的请求,https为什么比http更安全

  3. 异步任务分为哪些

宏任务和微任务

  1. 前端性能优化问题

  2. 垂直居中的方式

​1 使用Flexbox布局:。这种方法适用于父元素和子元素都是块级元素的情况,这将使容器内的所有子元素都垂直和水平居中。.parent {display: flex;justify-content: center;align-items: center;
}2 使用绝对定位和transform属性, left: 50%; top: 50%会使子元素的左上角在父元素的中心位置;.parent {position: relative;
}
​
.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}3 使用绝对定位和margin属性.parent {position: relative;
}
​
.child {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}​

  1. 怎么理解回流和重绘

回流(Reflow)和重绘(Repaint)是浏览器渲染过程中的两个重要概念

回流是跟据元素的样式和结构,确定其在页面上位置的过程,当元素的大小和位置发生变化时,就回触发回流,

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
  • 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候(这避免不了)
  • 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

重绘,确定位置之后,跟据其样式,将元素绘制到屏幕上的过程。

  • 颜色的修改

  • 文本方向的修改

  • 阴影的修改

避免,

  • 尽量减少对样式的频繁修改,最好一次性修改多个样式,或者使用 CSS 类进行批量修改。
  • 避免频繁访问布局信息(如 offsetTop、offsetWidth 等),因为这会导致强制回流。
  • 使用 CSS3 的 transform 属性来进行复杂的动画效果,它可以在不引起回流的情况下改变元素的视觉呈现。
  • 使用分离布局和样式的原则,避免样式改变引起布局的变化。
  • 合理使用 CSS 布局技术,如 Flexbox 和 Grid,它们可以更高效地处理元素布局
  • 如果想设定元素的样式,通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  1. 元素显示和隐藏的方法有哪些

  • CSS 的 display 属性

    • 显示元素:element.style.display = 'block';element.style.display = '';
    • 隐藏元素:element.style.display = 'none';
  • CSS 的 visibility 属性

    • 显示元素:element.style.visibility = 'visible';
    • 隐藏元素:element.style.visibility = 'hidden'
  1. 内存泄露是什么,怎么导致的

  2. promise介绍

  3. 数组去重的方法?至少说出2种

  4. vue的双向数据绑定的原理

  1. 数据劫持(Data Observation):
    Vue 使用了一种称为「数据劫持」的技术来追踪数据的变化。它通过使用 Object.defineProperty() 方法,将数据对象的属性转换为 getter 和 setter。当访问或修改属性时,Vue 能够捕获到这些操作,并触发相应的更新。

  2. 监听器(Watcher):
    在 Vue 中,每个数据属性都有一个对应的监听器对象。监听器会订阅数据的变化,并根据变化触发相应的更新操作。当数据发生变化时,监听器会通知相关的视图进行更新。

  3. 模板编译(Template Compilation):
    Vue 的模板编译过程会解析模板中的指令(如 v-model),并生成对应的更新函数。这些更新函数能够在数据发生变化时,更新视图的内容。

  4. 视图更新:
    当数据发生变化时,监听器会收到通知,并触发视图的更新操作。这样,当用户在视图中修改数据时,数据会自动更新,反之亦然。

  1. 虚拟dom的理解

虚拟 DOM 的优势在于它能够提供一种高效的方式来管理和更新界面,减少直接操作真实 DOM 的成本。通过比较虚拟 DOM 树的差异,可以最小化对真实 DOM 的操作,提高性能和用户体验。

  1. vue的自定义指令

  2. 为什么data属性是一个函数而不是一个对象

  3. 图片懒加载和预加载

  4. 如何清除浮动

伪元素

可以使用伪元素在浮动元素的父元素中插入一个额外的元素,并设置其样式为 clear: both;<div class="clearfix"><div class="float-left">浮动元素1</div><div class="float-left">浮动元素2</div>
</div>.clearfix::after {content: "";display: table;clear: both;
}

overflow:hidden

  1. BFC

BFC(块级格式化上下文)是一种页面渲染的 CSS 布局概念。它是一种独立的渲染区域,其中的元素按照一定规则进行布局和渲染

BFC 主要用于解决以下问题:

  1. 清除浮动(Clear Float):当父元素包含浮动元素时,父元素的高度会塌陷,导致无法正确包裹浮动元素。通过创建一个 BFC,可以使父元素包含浮动元素的布局正常显示,不再塌陷。

例子:

<div class="parent"><div class="float-left">Float Left</div><div class="float-right">Float Right</div>
</div>
​
.parent {overflow: hidden;
}
​
通过设置 overflow: hidden;,.parent 元素成为一个 BFC,它会包裹内部的浮动元素,防止元素的高度塌陷。
  1. 阻止边距重叠(Margin Collapse):在普通流中,相邻的两个元素的上下边距可能会发生重叠。但是,位于不同的 BFC 中的元素的边距不会重叠,这可以用于控制边距的表现。

  2. 自适应两栏布局:通过创建两个相邻的 BFC 容器,可以实现一种自适应的两栏布局,其中一个容器可以固定宽度,另一个容器会自动填充剩余空间。

  3. 避免浮动元素覆盖文字:当文字环绕在浮动元素周围时,文字可能会被浮动元素覆盖。通过创建一个 BFC 容器来包裹文字,可以避免文字被浮动元素覆盖。

如何设置一个bfc , 一般用overflow:hidden 和flex盒子

.bfc-container {overflow: hidden;
}
​
.bfc-container {display: inline-block;
}
​
.flex-container {display: flex;
}
​

  1. git svn

  2. webpack

  3. CSS如何画一个三角形

.triangle {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid #000;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/827736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个docker配置mysql主从服务器

这也就是因为穷&#xff0c;不然谁用一个docker配置主从&#xff0c;哈哈 既然成功了就记录下。过程挺折磨人的。 首先要保证你的电脑安装好了docker 为了保证docker当中主从能正常连网&#xff0c;现在docker里面创建一个网络环境 docker network create --driver bridge mysq…

面试八股——RabbitMQ

消息丢失问题 消息确认机制 生产者与MQ之间的消息确认&#xff1a; 当MQ成功接收消息后&#xff0c;会返回给生产者一个确认消息。如果在规定时间内生产者未收到确认消息&#xff0c;则任务消息发送失败。 MQ与消费者之间的消息确认&#xff1a; 当MQ成功接收消息后&#…

DeepFaceLab小白教程:视频换脸过程

合适那些人阅读&#xff1f; 适合从未使用过DeepFaceLab的群体。 如果你想基于DeepFaceLab完成一次视频换脸的操作&#xff0c;可以看本篇。 下载方式 GitHub https://github.com/iperov/DeepFaceLab 我是用motrix下载。 网盘 https://pan.baidu.com/share/init?surlO4…

鸿蒙(HarmonyOS)性能优化实战-Swiper高性能开发

背景 在应用开发中&#xff0c;Swiper 组件常用于翻页场景&#xff0c;比如&#xff1a;桌面、图库等应用。Swiper 组件滑动切换页面时&#xff0c;基于按需加载原则通常会在下一个页面将要显示时才对该页面进行加载和布局绘制&#xff0c;这个过程包括&#xff1a; 如果该页面…

nest使用swagger文档

OpenAPI(Swagger)规范是一种用于描述 RESTful API 的强大定义格式。 Nest 提供了一个专用模块来使用它。 安装 npm安装 npm install --save nestjs/swagger swagger-ui-expressyarn 安装 yarn add nestjs/swagger swagger-ui-express引入 使用 SwaggerModule 类初始化 Swa…

【Hadoop】-Hive初体验[13]

Hive体验 预先确保已经完成部署Hive&#xff0c;并启动了Metastore服务 可以执行&#xff1a;bin/hive&#xff0c;进入到Hive Shell环境中&#xff0c;可以直接执行SQL语句。 创建表 create table test(id int,name string,gender string); 插入数据 INSERT INTO test val…

Golang基础2-Array、Slice、Map

Array 数组 var a [5]int b:[5]int{} c:[...]int{}这样格式定义var a[5]int 和var a[10]int是不同类型从0开始下标&#xff0c;到len(a)-1遍历方式&#xff1a; for i : 0; i < len(a); i { }for index, v : range a { } 注意越界问题&#xff0c;panic值类型&#xff0c;…

密码学 | Schnorr 协议:零知识身份证明和数字签名

&#x1f955;原文&#xff1a; Schnorr 协议&#xff1a;零知识身份证明和数字签名 &#x1f955;写在前面&#xff1a; 本文属搬运博客&#xff0c;自己留存学习。文中的小写字母表示标量&#xff0c;大写字母表示椭圆曲线中的点。 1 Schnorr 简介 Schnorr 由德国数学家和密…

windows系统下python开发工具安装

一. 简介 前一篇文章学习了安装 python解释器&#xff0c;文章如下&#xff1a; windows系统下python解释器安装-CSDN博客 本文来学习如何下载安装 python开发工具 PyCharm。 二. python开发工具 PyCharm下载安装 1. PyCharm官网 PyCharm开发工具 PyCharm为 python代码…

Llama网络结构介绍

LLaMA现在已经是开源社区里炙手可热的模型了&#xff0c;但是原文中仅仅介绍了其和标准Transformer的差别&#xff0c;并没有一个全局的模型介绍。因此打算写篇文章&#xff0c;争取让读者不参考任何其他资料把LLaMA的模型搞懂。 结构 如图所示为LLaMA的示意图&#xff0c;由…

域名被污染了只能换域名吗?

域名污染是指域名的解析结果受到恶意干扰或篡改&#xff0c;使得用户在访问相关网站时出现异常。很多域名遭遇过污染的情况&#xff0c;但是并不知道是域名污染&#xff0c;具体来说&#xff0c;域名污染可能表现为以下情况&#xff1a;用户无法通过输入正确的域名访问到目标网…

Windos环境下配置免费SSL证书详细步骤

获取免费证书 配置本机模拟域名 打开如下目录&#xff0c;hosts文件 C:\Windows\System32\drivers\etc 添加如下配置并保存 127.0.0.1 im.test.com下载安装 OpenSSL 下载链接 进入bin目录&#xff0c; 打开cmd窗口 执行如下命令&#xff0c;生成RSA私钥 ## 使用des3…

大型集团企业 怎么实现多区域文件交换?

很多大型集团企业&#xff0c;都会在全国各地&#xff0c;甚至海外&#xff0c;都设立分支机构&#xff0c;还有银行、邮政这类机构&#xff0c;都会在全国各地设立多个支行和网点&#xff0c;所以在日常经营过程中&#xff0c;都会存在多区域文件交换的场景。 大型集团企业在进…

JVM垃圾收集器--分区收集器

G1收集器 G1&#xff08;Garbage-First Garbage Collector&#xff09;在 JDK 1.7 时引入&#xff0c;在 JDK 9 时取代 CMS 成为了默认的垃圾收集器。G1 有五个属性&#xff1a;分代、增量、并行、标记整理、STW。 分代 G1收集器 将内部分为多个大小相等的区域&#xff0c;另…

Unity Shader 图形学【笔记一】

游戏图形学 源自&#xff1a;计算机图形学 涵盖&#xff1a;图形、动画的创建渲染展示 目标&#xff1a;性能优化、提高视觉质量&#xff0c;增强用户体验 技术&#xff1a;三维模型、纹理、光照、阴影、特效、动画、物理模拟、碰撞检测等 Unity Shader 是&#xff1a;un…

基于Vue+ElementPlus自定义带历史记录的搜索框组件

前言 基于Vue2.5ElementPlus实现的一个自定义带历史记录的搜索框组件 效果如图&#xff1a; 基本样式&#xff1a; 获取焦点后&#xff1a; 这里的历史记录默认最大存储10条&#xff0c;同时右侧的清空按钮可以清空所有历史记录。 同时搜索记录也支持点击搜索&#xff0c;按…

371D - Vessels

思路&#xff1a;用并查集维护&#xff0c;如果当前容器没有满&#xff0c;就指向自己&#xff0c;否则指向下一个容器。 这样就可以快速 find 到下一个没有满的容器&#xff0c;从而模拟询问 1。 代码&#xff1a; void solve(){int n;cin >> n;vector<int>p(n …

leetcode:滑动窗口----3. 无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为…

算法竞赛相关问题总结记录

前言 日常在校生或者是工作之余的同学或多或少都会参加一些竞赛,参加竞赛一方面可以锻炼自己的理解与实践能力&#xff0c;也能够增加自己的生活费&#xff0c;竞赛中的一些方案也可以后续作为自己论文的base,甚至是横向课题的框架。在算法竞赛中算法的差别个人感觉差距都不大&…

一招搞定“找不到xinput1_3.dll,无法继续执行代码”问题

在我们日常使用电脑进行各类工作的过程中&#xff0c;特别是在运行一些关键性软件以完成特定任务时&#xff0c;电脑屏幕上突然弹出一条醒目的错误提示信息&#xff1a;“由于找不到xinput1_3.dll,无法继续执行代码”。这个错误通常发生在使用DirectInput库时&#xff0c;而xin…