面试题-6

1.精灵图和base64的区别是什么?

精灵图:把多张小图整合到一张大图上,利用定位的一些属性把小图显示在页面上,当访问页面可以减少请求,提高加载速度

base64:传输8bit字节代码的编码方式,把原本二进制形式转为64个字符的单位,最后组成字符串   

base64是会和html css一起下载到浏览器中,减少请求,减少跨域问题,但是一些低版本不支持,若base64体积比原图片大,不利于css的加载。

2.svg格式了解多少?

基于XML语法格式的图像格式,可缩放矢量图,其他图像是基于像素的,SVG是属于对图像形状的描述,本质是文本文件,体积小,并且不管放大多少倍都不会失真。

1.SVG可直接插入页面中,成为DOM一部分,然后用JS或CSS进行操作

<svg></svg>

2.SVG可作为文件引入

<img  src='pic.svg'/>

3.SVG可以转为base64引入页面

3.了解过JWT吗?

 JSON Web Token 通过JSON形式作为在web应用中的令牌,可以在各方之间安全的把信息作为JSON对象传输,授权

JWT的认证流程:

1.前端把账号和密码发送给后端的接口

2.后端核对账号和密码成功后把用户的id其他信息作为JWT负载,把它和头部分别进行base64编码拼接后签名,形成一个JWT(token)

3.前端每次请求时都会把JWT放在HTTP请求头的Authorization字段内

4.后端检查是否存在,如果存在就验证JWT的有效性(签名是否正确,token是否过期)

5.验证通过后后端使用JWT中包含的用户信息进行其它的操作并返回对应结果

简洁,包含性,因为token是JSON加密的形式保护在客户端,所以JWT是跨语言的,原则上是任何web形式都支持。

4.npm的底层环境是什么?

node package manager,node的包管理和分发工具,已经成为分发node模块的标准,是JS的运行环境

npm组成:网站,注册表,命令行工具

5.HTTP协议规定的协议头和请求头有什么?

5.说一下浏览器的缓存策略

强缓存(本地缓存),协商缓存(弱缓存)

强缓:不发起请求,直接使用缓存里的内容,,浏览器把JS,CSS,Image等存到内存中,下次用户访问直接从内存中取,提高性能

协缓:

需要向后台发请求,通过判断是否使用协商缓存,如果请求内容没有变化,则返回304,浏览器就用缓存里的内容

6.同源策略

http://www.     aaa.com:   8080/index/vue.js

协议  子域名    主域名       端口号     资源

同源策略是浏览器的核心,如果没有这个策略就会遭受网络攻击

主要指的就是协议+域名+端口号三者一致,若其中一个不一样则不是同源,会产生跨域

三个允许跨域加载资源的标签::img  link  script

跨域是可以发送请求,后端也会正常返回结果,只不过这个结果被浏览器拦截了!

JSONP

CORS

websocket

反向代理

7.解释一下什么是json

JSON是一种纯字符串形式的数字,它本身不提供任何方法,适合在网络中传输

JSON数据储存在.json文件中,也可以把JSON数据以字符串的形式保存在数据库中,Cookie中

JS提供了JSON.parse()   JSON.stringify()

什么时候使用json:定义接口;序列化;生成token;配置文件package.json

8.当数据没有请求过来的时候,该怎么做?

可以在渲染数据的地方给一些默认的值

if判断语句

9.有没有做过无感登录?

1.在相依其中拦截,判断token返回过期后,调用刷新token的接口

2.后端返回过期时间,前端判断token的过期时间,去调用刷新token的接口

3.写定时器,定时刷新token接口

流程:

1.登录成功后保存的token和refresh_token

2.在响应拦截器中对401状态码引入刷新token的api方法调用

3.替换保存本地新的token

4.把错误对象里的token替换

5.在粗发送未完成的请求

6.如果refresh_token过期了,判断是否过期,过期了就清除token重新登录

10.大文件上传是怎么做的?

分片上传:

1.把需要上传的文件按照一定的规则,分割成相同大小的数据块

2.初始化一个分片上传任务,返回本次分片上传的唯一标识

3.按照一定的规则把各个数据块上传

4.发送完成后,服务端会根据数据上传的完整性,如果完整.那么就会把数据库合并成原始文件

断点续传:

服务端返回,从哪里开始,浏览器自己处理

11.语义化的理解

在写HTML页面结构时所用的标签有意义

头部有head   主体用main   底部用foot...

怎么判断页面是否语义化?

可以把CSS去掉,如果能清晰的看出来页面结构,显示内容较为正常

为什么要选择语义化?

1.让HTML结构更加清晰明了

2.方便团队写作,利于开发

3.有利于爬虫和SEO

4.能够让浏览器更好的去解析代码

5.给用户带来良好的体验

12.H5C3有哪些特性?

H5的新特性:

1.语义化的标签

2.新增音频视频

3.画布canvas

4.数据存储localstorage  sessionstorage

5.增加了表单空间 email  url  serach

6.拖拽释放API

CSS3的新特性:

1.新增选择器:属性选择器,伪类选择器,伪元素选择器

2.增加了媒体查询

3.文字阴影

4.边框

5.盒子模型box-sizing

6.渐变

7.过度

8.自定义动画

9.背景的属性

10.2D和3D

13.rem是如何做适配的?

rem是相当长度,相对于根元素(HTML)和font-size属性来计算大小,通常用来做移动端的适配

rem是根据根元素font-size计算值的倍数

比如html上的font-size是16PX;给div设置宽为1.5rem,16x1.2=19.2px

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux 串口应用编程

1 串口 API Linux串口通信&#xff1a; 在 Linux 系统中&#xff0c;操作设备的统一接口就是&#xff1a; open/ioctl/read/write 。 对于 UART &#xff0c;又在 ioctl 之上封装了很多函数&#xff0c;主要是用来设置行规程。所以对于 UART &#xff0c;编程的套路就是…

iceberg学习笔记(2)—— 与Hive集成

前置知识&#xff1a; 1.了解hadoop基础知识&#xff0c;并能够搭建hadoop集群 2.了解hive基础知识 3.Iceberg学习笔记&#xff08;1&#xff09;—— 基础知识-CSDN博客 可以参考&#xff1a; Hadoop基础入门&#xff08;1&#xff09;&#xff1a;框架概述及集群环境搭建_TH…

Chrome添加扩展程序

Crx4Chrome 下载crx 打开扩展程序 如果拖动crx文件到扩展程序提示只能通过Chrome应用商店添加此项内容 修改crx文件后缀为zip并解压&#xff0c;再拖动到扩展程序

CXL崛起:2024启航,2025年开启新时代

在2019年&#xff0c;Intel主导联合多家阿里巴巴、Facebook(也就是改名后Meta)、谷歌、Dell、华为、思科、微软、HPE最初的八巨头&#xff0c;发布了新的互联协议CXL&#xff0c;全称Comupte Express Link。由于在服务器领域享有绝对领导地位&#xff0c;Intel一经号令&#xf…

消息中间的应用场景

1、异步处理 比如用户在电商网站下单&#xff0c;下单完成后会给用户推送短信或邮件&#xff0c;发短信和邮件的过程就可以异步完成。因为下单付款是核心业务&#xff0c;发邮件和短信并不属于核心功能&#xff0c;并且可能耗时较长&#xff0c;所以针对这种业务场景可以选择先…

【Qt开发流程】之程序主窗口

描述 就目前的应用程序而言&#xff0c;一般包含菜单栏、工具栏、状态栏、中央区域等。 qt窗口部件类图如下&#xff1a; 一个主窗口提供了一个构建应用程序用户界面的框架。 Qt有QMainWindow及其相关类来管理主窗口。 QMainWindow有自己的布局&#xff0c;可以向其中添加QTo…

测试之路,女孩子软件测试-职业规划建议,路就在脚下...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、测试岗是不是加…

Upwork 新手使用指南——如何快速在Upwork上接单

Upwork 这个自由职业平台不知道大家听说过没&#xff0c;在 Upwork&#xff0c;如果你是自由职业者&#xff0c;你可以接单&#xff1b;如果你是客户&#xff0c;你可以找人干活。但对于新手来说&#xff0c;怎么使用 Upwork 并且用好 Upwork 是一大难题。因此今天给大家分享 U…

Mistral 7B 比Llama 2更好的开源大模型 (四)

Mistral 7B在平衡高性能和保持大型语言模型高效的目标方面迈出了重要的一步。通过我们的工作,我们的目标是帮助社区创建更实惠、更高效、更高性能的语言模型,这些模型可以在广泛的现实世界应用程序中使用。 Mistral 7B在实践中,对于16K和W=4096的序列长度,对FlashAttentio…

Modbus转Profinet网关在污水处理系统中连接PLC和变频器Modbus通信案例

污水处理系统中使用Modbus转Profinet网关可以连接PLC和变频器&#xff0c;实现二者之间的通信。该网关的作用是将PLC与变频器之间的Modbus协议转换为Profinet协议&#xff0c;使两者可以相互沟通。在污水处理系统中&#xff0c;PLC控制污水处理的各个过程&#xff0c;而变频器则…

机器学习二元分类 二元交叉熵 二元分类例子

二元交叉熵损失函数 深度学习中的二元分类损失函数通常采用二元交叉熵&#xff08;Binary Cross-Entropy&#xff09;作为损失函数。 二元交叉熵损失函数的基本公式是&#xff1a; L(y, y_pred) -y * log(y_pred) - (1 - y) * log(1 - y_pred)其中&#xff0c;y是真实标签&…

【性能测试】稳定性测试要点-监控关键指标总结(超细整理)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、稳定性测试的要…

接口与抽象类的区别

Java中的接口&#xff08;Interface&#xff09;和抽象类&#xff08;Abstract Class&#xff09;都是实现抽象化的关键机制&#xff0c;但它们在用途和功能上有着明显的区别。以下是接口和抽象类之间的主要区别&#xff1a; 抽象类&#xff08;Abstract Class&#xff09; 含…

Docker之虚悬镜像(查看、删除)

虚悬镜像: 仓库名、标签都是的镜像&#xff0c;俗称dangling image 查看 docker image ls -f danglingtrue删除 虚悬镜像已经失去存在价值&#xff0c;可以删除 docker image prune

LeetCode977.有序数组的平方(双指针法、暴力法、列表推导式)

LeetCode977.有序数组的平方 1.问题描述2.解题思路3.代码4.知识点 1.问题描述 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] …

要事第一:如何通过6个步骤确定项目的优先级

当收到很多项目请求并且每个请求都是重中之重时&#xff0c;该怎么办&#xff1f;从最易完成的开始&#xff1f;还是先解决最大的问题&#xff1f; 实际上两种做法都不对。确定项目优先级的更好方法是评估以下内容&#xff0c;而不是关注项目规模或完成时长&#xff1a; ● 每…

3.8-镜像的发布

如果我们想将image push到docker hub里面&#xff0c;那么我们的image的名字一定要是这种格式&#xff1a;docker hub id/imageName&#xff0c;例如&#xff1a;lvdapiaoliang/hello-docker docker hub个人账户设置地址&#xff1a; 在push之前要先登录&#xff1a; docker l…

pycharm2023 实现鼠标点击某行,调试时代码运行至相应行

按下图取消 Breakpoints Over Line Numbers即可&#xff0c;然后调试时点击某行&#xff0c;代码就会运行至某行

AcWing 717. 简单斐波那契

原题链接 题目 以下数列 0 1 1 2 3 5 8 13 21 … 被称为斐波纳契数列。 这个数列从第 3 项开始&#xff0c;每一项都等于前两项之和。 输入一个整数 N &#xff0c;请你输出这个序列的前 N 项。 输入格式 一个整数 N 。 输出格式 在一行中输出斐波那契数列的前 N 项&…