web前端面试题

web前端面试题

1、前端如何实现优化性能

(1)减少网络时间 ①使用DNS缓存技术 ​ ②减少需要传输的文件尺寸 ​ ③加快文件传输速度

(2)减少发送的请求数量 ①利用浏览器缓存 ​ ②使用合并的图片文件

(3)提高浏览器下载的并发度 ①JS文件放在HTML文档最后 ​ ②使用多个域名

(4)让页面尽早开始显示
①将样式表的引用放在HTML文档的开头,将JS的引用放在HTML文档的最后,这样JS文件的下载和执行会在所有页面都下载完成后,不会阻止其他页面元素的显示。从用户感官上说,JS文件的下载和执行时间完全不会被用户感觉到。

2、浏览器缓存

引用地址

3、cookie sessionStorage localStorage 区别

区别:
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

4、Canvas和SvG的区别是什么?

两者的区别如下:
一旦 Canvas绘制完成将不能访问像素或操作它;任何使用SVG绘制的形状都能被记忆和操作,可以被浏览器 再次显示。
Canvas对绘制动画和游戏非常有利;SVG对创建图形(如CAD)非常有利。
因为不需要记住以后事情,所以 Canvas运行更快;因为为了之后的操作,SVG需要记录坐标,所以运行比较 缓慢。
在 Canvas中不能为绘制对象绑定相关事件;在SVG中可以为绘制对象绑定相关事件。
Canvas绘制出的是位图,因此与分辨率有关;SvG绘制出的是矢量图,因此与分辨率无关

5、清除浮动的方式

第一种 清除浮动方式 clear 在浮动元素的同级末尾加上 一个空div 并添加样式 clear属性
第二种 当子元素发生浮动 使用 overflow属性会强制性包裹起来浮动内容 而达到清除浮动的效果
第三种:用伪类去实现清除浮动 : after伪类 来实现清除浮动 有借助第二种方式的方法

6、谈谈你对静态布局、自适应布局、响应式布局、弹性布局的理解?

静态布局
描述:就是设定好的长和宽,大小不会改变,不管你多大的屏幕它都是那么大,分辨率是不会改变的
自适应布局
描述:不同屏幕分辨率下,保持原有展示方式。元素的尺寸大小可以改变,但展示方式不会改变
响应式布局
描述:不同屏幕分辨率下,展示方式不同
弹性布局(flex布局)
描述:目前比较流行的一种布局,使用传统布局难以实现一些复杂的布局,使用flex布局实现就变得非常容易

7、async和defer的区别

defer和async是script标签的两个属性,用于在不阻塞页面文档解析的前提下,控制脚本的下载和执行。
defer:用于开启新的线程下载脚本文件,并使脚本在文档解析完成后执行 - js的执行在所有的元素都解析完成之后执行。
async:新增属性,用于异步下载脚本文件,下载完毕立即解释执行代码 - js加载完成之后立即执行。

8、JS判断数据类型的方法

1、typeof
2、instanceof
3、constructor
4、toString
5、is Array 判断是否为数组
6、通过原型 Object.prototype.toString.call(val) === ‘[object Object]’

9、数组去重

利用ES6 Set去重(ES6中最常用)
利用for嵌套for,然后splice去重(ES5中最常用)

10、var let const的区别

①var有变量提升 let、const没有变量提升
②var除函数内部都为全局变量 let、const都属于块级作用域
③var可以重复定义,会覆盖之前的变量 let、const不能重复定义,报错
④var没有暂时性死区 let、const有暂时性死区
⑤var声明为全局变量的时候会挂载到window let、 const不会挂载到window
⑥var、let为变量 const为常量

11、new操作符具体做了哪些事情

①new会在内存中创建一个新的空对象
②new会让this指向这个对象
③执行构造函数里的代码,给这个新对象添加属性和方法
④new 会返回这个新对象(所以构造函数不需要return)

12、js的继承

1、原型链继承
优点:父类方法和属性可以复用
缺点:1、父类中的引用数据类型会被共享(子类修改父类中的引用数据,另一个子类跟着改动)2、不能传递参数

function Person() {this.name = "小明"this.eats = ['苹果']this.getName = function() {console.log(this.name)}
}
Person.prototype.get = () => {console.log("Person.prototype上的方法")
}

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

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

相关文章

音视频及H264/H256编码相关原理

一、音视频封装格式原理: 我们播放的视频文件一般都是用一种封装格式封装起来的,封装格式的作用是什么呢?一般视频文件里不光有视频,还有音频,封装格式的作用就是把视频和音频打包起来。 所以我们先要解封装格式&#…

谷歌上架,个人号比企业号好上?“14+20”封测如何解决,你知道了吗

在Google Play上架应用,对开发者而言,既是挑战也是机遇。随着谷歌政策的不断更新,特别是要求2023年11月13日后注册的个人开发者账号在发布正式版应用前,必须经过20人连续14天的封闭测试。 这一政策的改变使得许多开发者开始考虑使…

什么是物联网通信网关?-天拓四方

在信息化、智能化的时代,物联网技术的广泛应用正在逐渐改变我们的生活方式。物联网通过各种传感器和设备,将现实世界与数字世界紧密相连,从而实现智能化、自动化的生活和工作方式。作为物联网生态系统中的重要组成部分,物联网通信…

【数据结构】堆(Heep)

✨✨✨专栏:数据结构 🧑‍🎓个人主页:SWsunlight 目录 一、堆: 定义: 性质: 大、小根堆: 二、实现堆(完全二叉树): 前言: …

四、Filter

Filter简介 Filter 的基本功能是对Servlet容器调用Servlet的过程进行拦截,从而在Servlet进行响应处理的前后实现一些特殊的功能.在Servlet API 中定义了三个接口类来供开发人员编写Filter 程序:Filter,FilterChain,FilterConfigFilter 程序是一个实现了…

Spring:Spring事务失效的各种场景以及解决方法

一、前言 Spring事务是指Spring框架中提供的事务管理功能,它可以帮助开发者简化事务管理的复杂性,提高代码的可维护性和可扩展性。本文将总结并分析Spring事务失效的各种场景,帮助你全面了解事务失效的原因和解决方案。 二、Spring事务失效的…

51汇编--数码管显示

;将内部RAM30H~32H单元中存储的6位十进制数显示在6个数码管上。 ;要求编写将一个内存单元中的压缩BCD码转换为两个七段显示码的子程序和 ;延时子程序。不允许在程序中给30H、31H和32H单元赋值,要通过存 ;储器窗口赋值。尝试改变点亮数码管的时间&#xf…

Linux软硬链接及动静态库

软硬链接与动静态库 软连接 创建链接的方法: ln -s test1.txt test2.txt 其中ln 是link(链接),-s 是soft(软),后者链接前者。 此时打开test2.txt,发现其中内容与test.txt一致。那么软连接到底建立了什么联系?…

轻松购物,尽在购物网

在忙碌的生活中,想要找到心仪的商品,却总是苦于没有时间和精力去实体店挑选?别担心,购物网为您提供一站式的购物体验。无论是时尚服饰、家居用品,还是美食特产,这里都能满足您的需求。只需轻轻一点&#xf…

监听element-ui表格滚动事件

当element-ui表格高度写死之后,表格内容超出高度就会在右侧显示滚动条,监听滚动事件 首先给表格加ref,ref"refTable" 然后在mounted生命周期里写监听事件 mounted() {this.$refs.refTable.$el.onwheel (e) > {console.log(滚…

深入解析线程上下文切换的原理与优化策略

深入解析线程上下文切换的原理与优化策略 定义触发条件线程上下文切换的过程线程上下文切换的开销减少上下文切换的方法示例代码总结 线程上下文切换(Thread Context Switch)是操作系统调度机制的重要组成部分。它涉及保存当前线程的状态并恢复新线程的状…

vue中使用ant的rangePicker设置禁选时间和时间格式

<a-range-pickerstyle"width: 100%":disabled-date"disabledDate"v-model:value"time"valueFormat"YYYY-MM-DD" />valueFormat设置时间格式YYYY-MM-DD 通过dayjs获取时间&#xff0c;return过滤后的时间 const disabledDate (…

安装apex时遇到的问题

Apex是混合精度库&#xff0c;安装过程中常常出现各种问题&#xff0c;在此记录一下 首先&#xff0c;不能使用pip install apex,这是两个完全不同的库&#xff0c;需要去官网下载 其次&#xff0c;参考官网安装时可能会报错&#xff1a;could not build wheels for apex, whic…

C/C++运行时库和UCRT系统通用运行时库总结及问题实例分享

目录 1、概述 2、不同版本的Visual Studio对应的运行时库说明 3、在Windbg10.0安装目录中获取UCRT通用运行时库 4、微软官网对UCRT通用运行时库的相关说明 5、使用Visual Studio 2017开发软件初期遇到的UCRT通用运行时库问题 6、如何查看软件依赖了哪些C/C运行时库&#…

后端雪花算法主键ID传到前端变了

Mybatis Plus 的主键策略&#xff1a; /*** id*/TableId(type IdType.ASSIGN_ID)private Long id; 这个主键策略会用雪花算法生成一个 19位的ID&#xff0c;比如 1791006670084734978 现象 后端生成的 id 是正常的&#xff0c;通过 swagger 文档此时获取到的 id 也和数据库中…

leetcode-盛水最多的容器-109

题目要求 思路 1.正常用双循环外循环i从0开始&#xff0c;内循环从height.size()-1开始去计算每一个值是可以的&#xff0c;但是因为数据量太大&#xff0c;会超时。 2.考虑到超时&#xff0c;需要优化一些&#xff0c;比如第一个选下标1&#xff0c;第二个选下标3和第一个选下…

Java 面试题日常练习

### 基础知识 1. **什么是 JVM&#xff1f;解释其架构。** - JVM&#xff08;Java Virtual Machine&#xff09;是 Java 程序的运行时环境。其架构包括类加载器子系统、运行时数据区&#xff08;堆、栈、本地方法栈、PC 寄存器、方法区&#xff09;、执行引擎和本地方法接口…

心识宇宙 x TapData:如何加速落地实时数仓,助力 AI 企业智慧决策

使用 TapData&#xff0c;化繁为简&#xff0c;摆脱手动搭建、维护数据管道的诸多烦扰&#xff0c;轻量代替 OGG、DSG 等同步工具&#xff0c;「CDC 流处理 数据集成」组合拳&#xff0c;加速仓内数据流转&#xff0c;帮助企业将真正具有业务价值的数据作用到实处&#xff0c…

基于springboot实现华府便利店信息管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现华府便利店信息管理系统演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本华府便利店信息管理系统就是在这样的大环境下诞生&#xff…

电影《朝云暮雨》观后感

上周看了电影《朝云暮雨》&#xff0c;看完之后&#xff0c;感觉自己整个人都不太好了&#xff0c;也不是说电影太差&#xff0c;只是觉得电影没有传达正能量&#xff0c;让人很不舒服。 &#xff08;1&#xff09;演技在线 对于著名的演员“范伟”&#xff0c;或者说&#x…