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

相关文章
|
8天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
11天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
33 8
|
11天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
9 1
|
11天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
14 0
|
15天前
|
存储 缓存 前端开发
学习和理解前端缓存
前端缓存通过存储重复资源提升网页加载速度,减少服务器压力,优化用户体验。它涉及静态资源(如图片、CSS、JS)的HTTP缓存,动态数据(使用`localStorage`、`IndexedDB`)缓存,用户登录态、页面状态管理,以及预加载缓存。实现方式包括HTTP缓存(强缓存、协商缓存),浏览器存储(localStorage、sessionStorage、IndexedDB),Service Worker和Cache API。在项目中,应根据资源特性和需求选择合适的缓存策略。
|
16天前
|
机器学习/深度学习 数据挖掘 开发工具
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
2024年最全0基础学python开发工具及学习平台推荐_python平台a,面试阿里巴巴客服
|
16天前
|
Java 程序员 C语言
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
2024年Python最新【Python学习教程】Python类和对象_python中类和对象的讲解,Python最新面试题
|
17天前
|
前端开发 JavaScript
从零开始学习前端开发
前端开发是一门非常受欢迎的技术,它可以让我们在网页上展示出美观、交互式的内容。但是对于初学者来说,前端开发可能是一门比较难入手的技术。本文将会从基础概念开始介绍前端开发,并深入了解HTML、CSS和JavaScript的使用及其应用。
|
19天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
19天前
|
移动开发 前端开发 JavaScript
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿