【前端】前端面试

已于 2022-06-15 12:35:44 修改
阅读量258 收藏 2
点赞数
分类专栏： 面试 前后端分离 文章标签： 面试 前端 css vue.js
于 2022-06-13 22:35:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37838913/article/details/125258180
版权

前端面试

HTML & CSS

块级元素和内联元素有哪些

在这里插入图片描述

CSS两种盒子模型

标准盒模型和IE盒模型（区别）
在这里插入图片描述

  • 在标准盒模型性中,可以看到：
    盒子在网页中实际占用:
    宽 =width + padding2+border2 + margin2
    高=height + padding2+border2 + margin2
    盒模型实际大小:
    宽 = width +padding2+border2
    高 = height +padding2 + border2

在这里插入图片描述

  • IE盒模型（怪异盒模型）
    盒子在网页中实际占用:
    宽 =width +margin2
    高=height + margin2
    盒模型实际大小:
    宽 = width
    高 = height
    不同的是content内容区包括了border和padding

IE盒模型的优点就是盒子实际的宽高就是自己设置的宽高，无须再进行计算，它的padding和border已经包含在content中

盒模型宽度计算

在这里插入图片描述
在这里插入图片描述

简单实现一个三角形

在这里插入图片描述

实现一个扇形

在这里插入图片描述

对margin的top left right bottom设置为负值，有什么效果？

在这里插入图片描述

什么是BFC？如何应用？

在这里插入图片描述

float布局

1.并排一行
2.破环文档流
3.包裹块状化
在这里插入图片描述

CSS选择器

CSS常用选择器归纳大全

CSS的Position属性（定位属性）有哪些？分别参照什么定位？

在这里插入图片描述

如何使一个元素水平垂直居中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

line-height如何继承

在这里插入图片描述

哪些属性能继承

在这里插入图片描述

消除图片底部间隙的方法

在这里插入图片描述

单行溢出的隐藏

在这里插入图片描述

rem是什么？px，em，rem的区别？

在这里插入图片描述

rem的适配方案原理是什么？

响应式布局常见的方案

响应式是通过媒体查询技术使得一个网站兼容多种屏幕尺寸的设备
1.通过响应式实现rem布局
在这里插入图片描述

在这里插入图片描述
2.通过js来实现rem布局
在这里插入图片描述

使用一个元素显示以及隐藏的方式？

在这里插入图片描述

CSS sprites 是什么？它的优势和劣势？

在这里插入图片描述

描述一下CSS中的渐进增强，优雅降级之间的区别？

在这里插入图片描述

介绍对浏览器内核的理解

在这里插入图片描述

重绘和重排的区别？

在这里插入图片描述

meta标签viewpoint的理解

图片img标签title与alt属性的区别

link和@import的区别

在这里插入图片描述

简述一下src与href的区别

在这里插入图片描述

HTML和XHTML的区别

在这里插入图片描述

label标签作用

transform变形

在这里插入图片描述

CSS3动画

在这里插入图片描述

CSS3过度

在这里插入图片描述

transition和animation有何区别

在这里插入图片描述

nth-child和nth-if-type的区别是什么？

在这里插入图片描述

选择器优先级，怎么计算？

在这里插入图片描述

CSS3中有哪些新特性

在这里插入图片描述

画一条0.5px的线

在这里插入图片描述

ES6

讲一下es6有哪些新特性

  • 1） let声明变量和const声明常量，两个都有块级作用域；

ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明。

  • 2）箭头函数

ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

  • 3）模板字符串

板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

  • 4）解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
数组解构赋值失败会返回什么？（undefined）

  • 5）for of循环

for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

  • 6）import、export导入导出

ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

  • 7）set数据结构

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

  • 8）… 展开运算符

可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

  • 10）class 类的继承
  • 11）async、await(ES7)

使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

  • 12）promise

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

  • 13）Symbol

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

  • 14）Proxy代理

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

JS

js的数据类型

Javascript数据类型分为基本数据类型与引用数据类型

  • 基本数据类型为：

    字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、符号（symbol）。

  • 引用数据类型为：对象(Object)

    其中数组(Array)、函数（function）是一种特殊的对象。
    date - - （时间）

axios的二次封装

二次封装axios

闭包的了解和应用，滥用闭包的问题

防抖和节流

原型和原型链

VUE

v-if和v-for的优先级

v-for的优先级高

VUE2.0生命周期

在这里插入图片描述
第一次进入页面，会执行哪些生命周期，顺序？
前四个，

哪个生命周期可以获取到data中的数据?create
哪些生命周期可以获取到$el?mounted
在这里插入图片描述

keep-live

加入keep-live会多两个生命周期：activated，deactivated
在这里插入图片描述

computed、methods、watch有什么区别

在这里插入图片描述

双向绑定的实现原理

在这里插入图片描述

组件通信

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

props和data的优先级

props ——》methods ——》 data ——》computed ——》watch

ref是什么？

用来获取Dom，省去document.getelemnetById
在这里插入图片描述

Vue的自定义组件

VUEX的几种状态

VUEX的属性

在这里插入图片描述

vuex中mutations和action的区别

mutations都是同步操作
在这里插入图片描述

Vuex是单向数据流还是双向数据流？

单向：只能使用不能修改

Vuex怎么做持久化存储

Q:我Vuex有一个数据，比如是1，然后我在某一个组件用了，把1改成2，再次刷新页面，又变成1，是为什么？
Vuex本身不是持久化存储，怎么做？
1：存到cookie或者session（使用localStorage自己写）
2：使用vuex-persist插件

Vue权限

后台管理系统的权限控制与管理

请求控制

比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出去。怎么处理？-

  • 4.1 菜单控制
    权限的数据需要在多组件之间共享， 因此采用vuex
    防止刷新界面， 权限数据丢失， 所以需要存在sessionStorage， 并目要保证两者的同步
  • 4.2 界面控制
    路由的导航守卫可以防止跳过登录界面
    动态路由可以让不具备权限的界面的路由规则压根就不存在
  • 4.3 按钮控制
    路由规则中可以增加路由元数据meta
    通过路由对象可以得到当前的路由规则以及存在此规则中的meta 数据
    自定义指令可以很方便的实现按钮控制
  • 4.4 请求和响应控制
    请求拦截器和响应拦截器的使用
    请求方式的约定restful

项目打包

自定义组件，打包到npm中

我会一直
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
2023最新前端面试题总结
05-30
2023最新前端面试题总结
前端面试之自我介绍
前端小师姐迪迪_的博客
07-01 8万+
前面试过很多人，绝大多数都会要求做自我介绍，自我介绍其实很重要，给面试官留下第一印象，并且这个不是什么专业技能，完全可以通过稍微的练习把它做好，今天来直播一下我遇到的做自我介绍的奇葩。 太简短型：曾经遇到一个面试者自我介绍：“你好，我叫XXX，今年24”。这样太简短了，而且说的都是我在简历上一眼能看到的东西，太简短了，会让面试官认为这个人是不是不愿意沟通，或者求职意愿不强不愿意多说话，而且面试官也没法继续接话下去。 不说重点型：“我叫XX，今年24，毕业于XX学院，。。。有一个女朋友了”，这还是一个研.
前端面试自我介绍
weixin_47981445的博客
03-18 1万+
你好，我是xxx，2021年6月毕业于茂名，专业是软件技术。 我的前端兴趣来源于大学期间参加了校园互联网+大会，在活动的会议上认识很多厉害的大牛，看到很炫酷的css特效，同事颠覆了我对前端只是网页的概念，因此我确定了职业方向。 我在上家公司主要职责是对公司产品拖拽组件的模块开发、项目的优化和维护，因为算是一个中型的项目，涉及到的只是框架有vue2、vue3、TS等技术栈，我从最初进去辅助他们开发和维护项目，到后面独立开发拼团、秒杀等模块。 而其实我最满意的项目并不是这个，简历上描述的淘酒库（移动端APP）和
前端面试题汇总
热门推荐
歌谣的博客
01-02 9万+
歌谣最全前端面试题（建议收藏，欢迎讨论） 【Vue】 [vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
前端面试自我介绍话术
一个比较懒散的IT男
09-13 1万+
面试官您好 上午（下午好），我叫XXX,今天来应聘公司的前端工程师岗位，我从事前端开发有三年左右开发经验，有x年的vue开发经验，
牧原前端面试
nbsl_的博客
05-21 1593
一、一面是HR面 首先是自我介绍，介绍自己的在学校的学习情况，做过的项目和参加的比赛，以及在学校参加的组织 自己对公司的了解，对前端岗位的了解，前端能应用在公司的领域有哪些，在团队中自己扮演一个什么角色， 什么情况下放弃一家公司，什么情况下你会坚定选择一家公司 自己的前端生涯的规划 然后问了两个基础的前端知识点 聊得很愉快，hr很友好 二、部门HR+技术面 部门HR 什么时候接触到的前端 问了自己的学习前端方式 问了在学校的成绩和专业课学的怎么样 自己的职业规划和目标 技术面没问js框架挺意外的 技
前端面试宝典V3.0.pdf
07-11
《前端面试宝典》是一本由前端工程师创作的书籍，主要内容是关于前端面试相关的知识点和经验分享1。 《前端面试宝典》主要内容包括： 前端基础知识，如HTML、CSS、JavaScript等。 前端进阶知识，如ES6、HTTP协议、...
前端面试常见问题集锦册
01-30
前端： 这指的是前端开发，是指构建在网站或者 Web 应用程序中用户直接与之...因此，“前端面试常见问题集锦册”可以理解为一本专门整理了前端面试中常见问题的参考书或资源，供求职者在准备前端开发职位面试时使用。
前端面试必备
08-08
这是web前端的一套面试题，涵盖了很多经典以及2018年流行的问题
前端上机面试题
02-18
要求： 1、编写一段js代码，实现列表数据渲染，点击对应的筛选条件（全部、按进度排序、按总需人次排序、即将揭晓）加载及渲染相应的数据，所有筛选条件的url请求地址都为http://192.168.2.10:90/app/mock/21/list，...
面试经典150题——最长公共前缀
weixin_42075274的博客
04-28 491
面试经典150题 最长公共前缀 遍历 分治 字典树
Redis面试题一（基本概念）
qq_22321199的专栏
04-24 929
Redis的快速性能主要归因于其基于内存的数据存储、单线程无锁并发模型、使用C语言实现、精心设计的数据结构、对磁盘I/O的谨慎处理以及高效的网络通信机制。这些特性共同作用，使得Redis能够在处理大量高速数据访问场景时表现出卓越的性能。
嵌入式一些面试题
博客
04-28 398
部分面试题
Android性能优化面试题汇总
xiangzhihong8的专栏
04-29 30
Android的性能优化涉及多个方面，如启动优化、稳定性优化、内存优化、网络优化、电量优化、安全优化等方面。
20个 Golang 常见面试问题
sre救赎之路
04-26 508
Golang 提供了 encoding/json 包，使用 json.Marshal 和 json.Unmarshal 函数将 Go 类型编码为 JSON，并将 JSON 解码为 Go 类型。Golang 鼓励显式地将错误作为返回值返回，并提供了如 errors.New 和 fmt.Errorf 这样的函数来创建和格式化错误。Golang 提供了同步原语，如互斥锁（mutexes）和通道（channels），用于在并发场景中安全地访问和修改共享资源。Golang 中的反射允许在运行时检查类型、值和结构体。
面试题总结第二弹
心比天高的小菜鸟
04-25 926
首先获取volatile变量的值，将该变量的值加1，将该volatile变量的值写会到对应的主存地址。加载因子的选择是一个权衡。相反，较大的加载因子会减少扩容的频率，但可能导致较多的冲突，从而影响性能。只有数组长度是2的幂次方倍才能够确保数组中的每一个位置发生hash冲突的概率是相同的，数组长度减一的二进制码必须全部是1，否则会出现部分位置永远不会发生hash冲突而造成资源浪费。它负责监测Redis节点的健康状态，当主节点发生故障时，自动进行故障转移，选举新的主节点，保证Redis集群的高可用性。
QA测试开发工程师面试题满分问答20: 软件的安全性应从哪几个方面去测试？
qq_31870305的博客
04-23 563
当回答问题时，可以根据自己的经验和知识，从上述要点中选择适合的方面进行详细说明。强调测试的综合性、全面性和持续性，并强调测试的重要性以及如何与开发团队和其他相关团队合作。三段头部互联网大厂测开经历，辅导过25+同学入职大厂，【简历优化】、【就业指导】、【模拟/辅导面试】一对一指导。
mysql优化面试总结
最新发布
梦想是很难很难的，所以先勇敢一点
04-29 71
只是我常常觉得很多话无从说起。就像在平时，见到一些陌生人，一些熟悉和欢喜的人，不知道与之说些什么。也很少对身边的人谈论自己。所有的时间和记忆，都可以交付给书写。有些在书中说过多次，却似乎并未说出真正想表达的意思。有些从无提起过，它们在黑暗中更显得郑重端庄。有些事是不能轻易说起的。书写可以，但那也是不足够的。
面试二十二、跳表SkipLists
leimeili的博客
04-25 932
跳表全称为跳跃列表，它允许快速查询，插入和删除一个有序连续元素的数据链表。跳跃列表的平均查找和插入时间复杂度都是O(logn)。快速查询是通过维护一个多层次的链表，且每一层链表中的元素是前一层链表元素的子集（见右边的示意图）。一开始时，算法在最稀疏的层次进行搜索，直至需要查找的元素在该层两个相邻的元素中间。这时，算法将跳转到下一个层次，重复刚才的搜索，直到找到需要查找的元素为止。一张跳跃列表的示意图。每个带有箭头的框表示一个指针, 而每行是一个稀疏子序列的链表；底部的编号框（黄色）表示有序的数据序列。
2024 前端面试题
03-26
2024年前端面试题的具体内容我无法预测，因为技术的发展是非常迅速的，未来几年前端领域可能会有新的技术和框架出现。但是，我可以给你介绍一些目前比较常见的前端面试题，供你参考： 1. HTML/CSS基础：包括HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值