【每日前端面经】2023-02-27

题目来源: 牛客

CSS盒模型

CSS中的盒子包括margin|border|padding|content四个部分,对于标准盒子模型(content-box)的width=content,但是对于IE盒子模型(border-box)的width=content+border2+padding2

CSS选择器

  • 标签选择器
  • 类选择器
  • ID选择器
  • 参数选择器
  • 通用选择器
  • 组合选择器
  • 子代选择器
  • 后代选择器
  • 兄弟选择器
  • 相邻兄弟选择器
  • 列表选择器
  • 伪类选择器
  • 伪元素选择器

JS数据类型

  • Number
  • String
  • Object
  • Undefined
  • Null
  • Boolean
  • Symbol
  • BigInt

Webpack打包的理解、性能优化

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器。当Webpack处理应用程序时,会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle

  • 提升基础环境版本
  • 使用include/exclude避免重复打包
  • 合理利用缓存
  • 合理使用plugin
  • 合理配置resolve
  • 启用多进程打包
  • 开发中使用热更新替换自动刷新
  • 使用DIIPlugin插件优化时间

前端性能优化

  • 浏览器
    • 减少HTTP请求
    • 使用HTTP2.0
    • 设置浏览器缓存
    • 白屏做加载动画
  • 资源
    • 静态资源CDN
    • 静态资源单独域名
    • GZIP压缩
    • 做服务端渲染
    • 头部放置CSS,底部放置JS
  • 图片
    • 字体图标代替图片图标
    • 精灵图
    • 图片懒加载
    • 图片预加载
    • 使用PNG格式的图片
    • 图片转BASE64格式
  • 代码
    • 慎用全局变量
    • 缓存全局变量
    • 减少回流与重绘
    • 节流防抖
    • 少用闭包
    • 减少数据读取次数
    • 文档碎片优化节点
    • 减少判断层级
    • 字面量与构造式
  • 项目
    • 长列表优化
    • web worker
    • 避免iframe
  • 打包
    • 减少代码体积
    • 按需加载
    • 提取第三方库代码
    • webpack dll优化

Vue2和Vue3的区别

  • 生命周期
  • 多根节点
  • 组合式API
  • 异步组件
  • Teleport: 可以将部分DOM移动到APP之外的位置
  • 响应式原理: Vue2的原理是Object.defineProperty;Vue3的原理是Proxy/Reflect
  • 虚拟DOM: 新增patchFlag字段,优化渲染
  • 事件缓存
  • Diff算法优化
  • 打包优化: 新增Tree-shaking
  • TypeScript支持

Vue-Router的原理

路由描述的是URL与UI之间的映射关系,这种隐射是单向的,即URL变化引起UI变化(无需刷新页面)

  • hash模式: 通过hashchange事件监听URL的变化
  • history模式: 拦截pushState/replaceState的调用和标签的点击事件监听URL的变化

开发中遇到错误怎么排查

css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
深入浅出vue-router原理
CSS 3 所有的选择器整理(2023.2)
判断Vue3与Vue2的区别
web前端性能优化(全汇总)
webpack 打包原理及流程解析,超详细!

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

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

相关文章

C# 中的装箱(boxing)和拆箱(unboxing)

在 C# 中,装箱(boxing)和拆箱(unboxing)是用来在值类型(如 int、double 等)和引用类型(如 object)之间进行转换的过程。 装箱(Boxing)&#xff1…

ROS 图像预处理

为了使机械臂从复杂的场景中准确地识别出目标物体,首先要对机械臂相机采集的图像信息进行系列的预处理操作,图像预处理的目的就是为了方便提取采集图像的特征点信息。 1、图像灰度化 图像灰度化处理是一种将彩色图像转换为灰度图像的过程,目…

shell中正则表达式讲解

1. 概念 在进行程序设计的过程中,用户会不可避免地遇到处理某些文本的情况。有的 时候,用户还需要查找符合某些比较复杂规则的字符串。对于这些情况,如果 单纯依靠程序设计语言本身,则往往会使得用户通过复杂的代码来实现。但 是&…

在linux上不依赖于Nignx等服务器部署ASP.NET Core 7.0 WebAPI

笔者近期需要部署一款基于B/S架构的后端程序在linux的Debian发行版上,本文章以本次部署遇到的问题为线索,总结如何在Debian上部署ASP.NET Core7.0WebAPI应用程序。 在linux上不依赖于Nignx等服务器部署ASP.NET Core 7.0 WebAPI 1.先决条件2.应用发布3.部…

大语言模型LLM微调技术深度解析:Fine-tuning、Adapter-Tuning与Prompt Tuning的作用机制、流程及实践应用(LLM系列08)

文章目录 大语言模型LLM微调技术深度解析:Fine-tuning、Adapter-Tuning与Prompt Tuning的作用机制、流程及实践应用(LLM系列08)Fine-tuningAdapter-TuningPrompt Tuning策略对比与应用场景 大语言模型LLM微调技术深度解析:Fine-tu…

【vue】computed 、 watch、method 的区别

三个关键字【惰性】【缓存】【异步】 计算属性 computed 计算属性返回的值不属于 data,但是基于data声明的值会根据它们所依赖的数据的变化而自动重新计算惰性计算 初始化不会执行,只有在第一次访问时才会被计算render 函数执行时,会触发计算…

Gemma

Gemma 1.使用2.RAG3.LoRA3.1LoRA分类任务3.2LoRA中文建模任务 1.使用 首先是去HF下载模型,但一直下载不了,所以去了HF镜像网站,下载gemma需要HF的Token,按照步骤就可以下载。代码主要是Kaggle论坛里面的分享内容。 huggingface-…

3D可视化项目,选择unity3D还是three.js,是时候挑明了。

2023-08-10 23:07贝格前端工场 Hi,我是贝格前端工场,在开发3D可视化项目中,是选择U3D还是three,js时,很多老铁非常的迷茫,本文给老铁们讲清楚该如何选择,欢迎点赞评论分享转发。 一、Unity3D和three.js简…

RTCA DO-178C 机载系统和设备认证中的软件注意事项-附录 B

ANNEX B 附录 B 缩略语和术语表 ACRONYMS AND GLOSSARY OF TERMS 缩写 Acronym 释义 Meaning 译文 Translate ARP Aerospace Recommended Practice 航空航天推荐做法 ATM Air Traffic Management 空中交通管理 CAST Certification Authorities Software Team 认证机…

小程序里.vue界面中传值的两种方式

1.跳转携带参数后通过生命周期取值 1.1跳转 function juMp(){let arr JSON.stringify(specs.specs_data)wx.navigateTo({url:/pages/specs/specs?sku arr})}1.2取值 import {onLoad} from dcloudio/uni-apponLoad((event)>{let Arr JSON.parse(event.sku)})2.通过监听器…

String类-equals和==的区别-遍历-SubString()-StringBuilder-StringJoiner-打乱字符串

概述 String 类代表字符串,Java 程序中的所有字符串文字(例如“abc”)都被实现为此类的实例。也就是说,Java 程序中所有的双引号字符串,都是 String 类的对象。String 类在 java.lang 包下,所以使用的时候…

jquery实现select2插件鼠标点击任意地方时默认选中该输入框内的值

jquery实现select2插件鼠标点击任意地方时默认选中该输入框内的值 最近发现一个问题,插件select2中的select2可输入可选择的下拉框,在你输入值后鼠标点击别的地方,输入框内的值会被清空,特此记录一下这里的优化,这里修…

[Mac软件]Adobe Substance 3D Stager 2.1.4 3D场景搭建工具

应用介绍 Adobe Substance 3D Stager,您设备齐全的虚拟工作室。在这个直观的舞台工具中构建和组装 3D 场景。设置资产、材质、灯光和相机。导出和共享媒体,从图像到 Web 和 AR 体验。 处理您的最终图像 Substance 3D Stager 可让您在上下文中做出创造性…

网络原理——HTTPS

HTTPS是 在HTTP的基础上,引入了一个加密层(SSL)。 1. 为什么需要HTTPS 在我们使用浏览器下载一些软件时,相信大家都遇到过这种情况:明明这个链接显示的是下载A软件,点击下载时就变成了B软件,这种情况是运…

计算机设计大赛 深度学习手势检测与识别算法 - opencv python

文章目录 0 前言1 实现效果2 技术原理2.1 手部检测2.1.1 基于肤色空间的手势检测方法2.1.2 基于运动的手势检测方法2.1.3 基于边缘的手势检测方法2.1.4 基于模板的手势检测方法2.1.5 基于机器学习的手势检测方法 3 手部识别3.1 SSD网络3.2 数据集3.3 最终改进的网络结构 4 最后…

深入理解Python中的JSON模块:基础大总结与实战代码解析【第102篇—JSON模块】

深入理解Python中的JSON模块:基础大总结与实战代码解析 在Python中,JSON(JavaScript Object Notation)模块是处理JSON数据的重要工具之一。JSON是一种轻量级的数据交换格式,广泛应用于Web开发、API通信等领域。本文将…

WinForms中的Timer探究:Form Timer与Thread Timer的差异

WinForms中的Timer探究:Form Timer与Thread Timer的差异 在Windows Forms(WinForms)应用程序开发中,定时器(Timer)是一个常用的组件,它允许我们执行定时任务,如界面更新、周期性数据…

Matlab 矩阵基础

Matlab 基础 MATLAB 是“矩阵实验室matrix laboratory”的缩写。其他编程语言大多一次处理一个数字,MATLAB 主要用于处理整个矩阵和数组。 所有 MATLAB 变量都是多维数组,无论数据类型如何。矩阵是常用于线性代数的二维数组。 若要创建一个包含单行中…

osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)

目录 网络协议如何分层 引入 osi模型 tcp/ip模型 引入 命名由来 介绍 物理层 数据链路层 网络层 传输层 应用层 中间设备 网络协议如何分层 引入 我们已经知道了网络协议是层状结构,接下来就来了解了解下网络协议如何分层 常见的网络协议分层模型是OSI模型 和 …

Flink CDC 3.0 Starrocks建表失败会导致任务卡主!

Flink CDC 3.0 Starrocks建表失败会导致任务卡主! 现象 StarRocks建表失败,然后任务自动重启,重启完毕后数据回放,jobMaster打印下面日志后,整个任务会卡主 There are already processing requests. Wait for proce…