No35.精选前端面试题,享受每天的挑战和学习

简介: No35.精选前端面试题,享受每天的挑战和学习

elUI的全局使用

1.npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2.在src目录下,新建目录plugins文件夹,在文件夹中建element-ui文件夹,之后建一个index.js文件

内容如下:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.在入口文件main.js中引入即可

import './plugins/element-ui'

DOM文档加载步骤

1.解析HTML结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码

4.执行$(function(){})内对应代码

5.加载图片等二进制资源

6.页面加载完毕,执行window.onload

DOM(文档对象模型)加载步骤是指浏览器将 HTML 文档解析为 DOM 树的过程。以下是常见的 DOM 文档加载步骤:

  1. 解析 HTML:浏览器会逐行解析 HTML 文档。它从上到下读取 HTML 标记,并将标记转换为 DOM 元素。
  2. 构建 DOM 树:在解析过程中,浏览器根据 HTML 标记的嵌套关系构建 DOM 树。每个 HTML 元素都对应着一个 DOM 节点,形成了树形结构。
  3. 解析 CSS:浏览器在构建 DOM 树的同时,会解析外部 CSS 文件和嵌入式样式(<style>标签内的样式)。它将样式规则应用于对应的 DOM 节点,确定元素的样式。
  4. 构建渲染树:在构建 DOM 树和解析 CSS 后,浏览器将 DOM 树和 CSS 样式合并,构建渲染树(Render Tree)。渲染树只包含需要显示的元素,如块级元素、浮动元素等,而不包含隐藏的元素。
  5. 布局(Layout):渲染树构建完成后,浏览器进行布局计算。布局过程确定了每个元素在屏幕上的位置和大小。
  6. 绘制(Painting):根据布局计算的结果,浏览器开始将页面内容绘制到屏幕上。

需要注意的是,上述步骤是一个简化的描述,实际过程中各浏览器可能会有一些优化策略和异步加载机制(如并行加载脚本、延迟加载等),以提高页面加载性能。此外,页面中的 JavaScript 代码也可能会影响 DOM 的加载和渲染过程。

为什么要有验证码

验证码是一种区分用户是计算机还是人的公共全自动程序。
可以防止:
恶意破解密码
刷票
论坛灌水
黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
实际上用验证码是现在很多网站通行的方式
验证码就是防止机器恶意登陆的,因为机器识别不了你的图片的内容,人可以识别所以,验证码不能发送到前端,只能发送一张图片过来给前端
验证码发送过来前端了,就相当于, 机器可以抓到请求的内容,机器就能拿到验证码 所以才需要图片,然后用户根据图片,输入图片的内容。
然后登录的时候发给后台去校验,看看用户输入的对不对
后台首先生成一个随机码,然后通过插件,把这个随机码转化成一个稍微模糊的图片,然后存起来,然后把这张图片的路径返回给前端,这样前端就能拿到片了
每个随机码都有一个ID,返回图片的同时把这个ID一同返回给前端
然后前端发出登陆请求的时候,把内容 + 这个验证码的ID发送给后台,后台拿到验证码的ID,然后去找到对应的图片去校验

验证码(CAPTCHA,Completely Automated Public Turing test to tell Computers and Humans Apart)是一种用于区分人类用户和计算机程序(如机器人、脚本等)的技术。它的主要目的是防止恶意行为、保护用户隐私以及提高安全性。

以下是一些常见的原因,解释了为什么需要使用验证码:

  1. 防止恶意行为:验证码可以有效地防止自动化攻击,如暴力破解、恶意注册、刷票、刷评论等。这些攻击通常由自动化脚本或机器人完成,通过要求用户识别和输入验证码,可以有效减少恶意行为。
  2. 保护用户隐私:某些网站或应用程序可能需要用户提供敏感信息或个人身份认证。使用验证码可以确保这些操作仅由真实用户进行,从而保护用户的隐私和账户安全。
  3. 防止垃圾信息:验证码可以减少垃圾邮件、垃圾评论和垃圾注册等问题。自动化脚本通常会尝试批量注册账户或发送垃圾信息,而验证码可以阻止这些活动。
  4. 提高网络安全性:验证码可以增加网站的安全性,防止恶意攻击者通过暴力破解密码、盗取账户等方式入侵系统。通过要求用户进行验证码验证,可以大大加强系统的安全性。

需要注意的是,良好设计的验证码应该既能够抵御自动化攻击,又能够方便用户识别和输入。过于复杂或难以理解的验证码可能会对用户体验产生负面影响。因此,平衡安全性和用户友好性是实现验证码的关键。

说下MD5/加盐/uuid

  • MD5(Message Digest Algorithm 5)是一种常用的哈希函数,用于将任意长度的数据映射为固定长度的哈希值(通常是128位)。MD5 特点是计算速度快、输出结果固定和不可逆,但它也容易受到碰撞攻击(即找到不同的输入得到相同的哈希值)。因此,在安全性要求较高的场景中,建议使用更安全的哈希函数,如SHA-256。
  • 加盐(Salt)是为了提高密码存储的安全性而引入的一种机制。简单来说,加盐就是在用户密码的基础上,添加一些额外的随机数据。这样做的目的是增加密码的复杂度,使得破解者难以通过预先计算的彩虹表等攻击手段进行破解。在存储密码时,通常会将密码和盐值进行组合,并对其进行哈希运算。加盐可以提供更强的密码保护。
  • UUID(Universally Unique Identifier)是一种标识符,用于在分布式系统中唯一地标识信息或实体。UUID 的生成算法是基于时间戳、设备信息和随机数等因素的,因此基本上可以保证其唯一性。UUID 的常见表示形式是一个长度为128位的字符串,通常使用连字符分隔。UUID 在很多场景中被广泛应用,如数据库索引、会话管理、文件命名等。由于其唯一性和相对较长的长度,UUID 可以提供较高的标识符安全性。

需要注意的是,MD5 的使用已经不推荐用于密码存储等安全相关场景,而应使用更安全的哈希函数和密码加密方案。同时,在使用 UUID 作为唯一标识符时,也应确保生成算法的随机性和独立性,以防止碰撞和预测攻击。

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目

带你从入门到实战全面掌握 uni-app

相关文章
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
423 1
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
418 1
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1045 0
|
算法 Java 关系型数据库
校招 Java 面试基础题目解析及学习指南含新技术实操要点
本指南聚焦校招Java面试,涵盖Java 8+新特性、多线程与并发、集合与泛型改进及实操项目。内容包括Lambda表达式、Stream API、Optional类、CompletableFuture异步编程、ReentrantLock与Condition、局部变量类型推断(var)、文本块、模块化系统等。通过在线书店系统项目,实践Java核心技术,如书籍管理、用户管理和订单管理,结合Lambda、Stream、CompletableFuture等特性。附带资源链接,助你掌握最新技术,应对面试挑战。
272 2
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
723 26
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
367 4
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
388 1
|
Java 应用服务中间件 程序员
JVM知识体系学习八:OOM的案例(承接上篇博文,可以作为面试中的案例)
这篇文章通过多个案例深入探讨了Java虚拟机(JVM)中的内存溢出问题,涵盖了堆内存、方法区、直接内存和栈内存溢出的原因、诊断方法和解决方案,并讨论了不同JDK版本垃圾回收器的变化。
485 4
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
659 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题