Web前端复习

密码加密

  • 可逆加密算法：加密后可以解密得到密码原文
  • 对称加密：加密、解密使用相同的密钥
    • 加密速度快；不安全；AES；DES
  • 非对称加密：加密使用公钥、解密使用私钥
    • 安全性高；加密时间长；RSA；DSA
  • 不可逆加密算法：加密后不能反向解密
    • 存储密码等用户敏感信息；MD5；SHA

前端鉴权

认证、授权、鉴权和权限控制是一个前后依次发生、上下游的关系

1.认证 =》2.授权=》3.鉴权=》4.权限控制

  • 认证：根据声明者所特有的识别信息确认声明者的身份
  • 授权：资源所有者赋予执行者指定范围的资源操作权限，以便对资源的相关操作
  • 鉴权：对于一个声明者所声明的身份权利，对其所声明的真实性进行鉴别确认的过程
  • 权限控制：将可执行的操作定义为权限列表并判断操作是否允许/禁止

HTTP基本鉴权

  • 优点：简单
  • 缺点：不安全（用户名密码裸露）；无法主动撤销
  • 使用场景：对安全要求不高的网络（内部网络）

Session-Cookie鉴权

服务端的Session和浏览器端的Cookie

  • 优点：Cookie简单易用；Session相较于JWT方便管理；后端操作即可
  • 缺点：依赖Cookie（禁用就会失效）；Cookie不安全；Session增大服务端开销；
  • 使用场景：中大型的网站

Token

访问资源接口需要的资源凭证

  • 优点：服务端无状态化、可扩展性好；支持APP移动端设备；不需要Cookie，安全性好，支持跨程序调用；
  • 缺点：需要前后端配合；占带宽（比sid更大）；有效期短；性能问题（需要对token加密解密）

Refresh Token

用来获取Access Token，有效期比Access Token长一些

JWT鉴权

对用户信息组成JSON对象然后进行加密签名实现授权验证的方案

  • 优点：不需要在服务端保存会话信息
  • 缺点：加密问题；到期问题（无法废止Token或更改Token）

Cookie和Session

  • 安全性：Cookie保存在客户端，可以被随意篡改
  • 存取值的类型：Cookie只支持字符串数据；Session可以存放任意数据
  • 有效期不同：Cookie可以设置长时间保持；Session一般失效时间短
  • 存储大小不同：Cookie保存数据不能超出4K

Token和Session

  • 存储位置不同：Token存储在前端，Session存储在后端
  • 安全性：Token安全性更好，因为每个请求都有签名
  • 支持性不同：Session-Cookie认证需要浏览器的Cookie机制实现；Token验证机制丰富了客户端类型

登录方案

  • 单点登录（SSO: Single Sign On）登录一次就可以访问其他相互信任的应用系统
  • OAuth2.0：允许用户授权第三方网站访问他们存储在另外的服务提供者的信息，而不需要将用户名和密码提供给第三方网站
  • 联合登录和信任登录
  • 唯一登录：禁止多人同时登录统一账号
  • 扫码登录
  • 一键登录：短信验证码

前端性能优化

要点，常用术语，浏览器渲染机制，性能分析方法，最佳实践

看PPT

浏览器页面渲染机制

  • DNS查询 =》TCP握手 =》TLS（Transport Layer Security）协商 =》TCP慢启动（14KB规则）
  • 第一步：处理HTML标记并构造DOM树，HTML解析涉及到 tokenization 和树的构造（<script>标签会阻塞HTML的解析）
  • 第二步：处理CSS并构建CSSOM树，遍历CSS中每个规则集，根据选择器创建具有父、子和兄弟关系的节点数
  • 第三步：将DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根节点开始构建，遍历每个可见节点
  • 第四步：在渲染树上运行布局以计算每个节点的几何体
    • 第一次确定节点大小和位置称为布局；随后对节点大小和位置的重新计算称为回流
  • 最后一步：将各个节点绘制到屏幕上，将在布局阶段计算的每个框转换为屏幕上的实际像素
  • TTI（Time To Interactive）第一个请求导致DNS和SSL 到 页面可交互所用 的时间
  • 关键渲染路径（Critical Render Path）优化策略使浏览器能够通过确定优先加载的资源以及资源加载的顺序来尽可能快地加载页面

性能优化

  • 延迟与带宽：传播/传输/处理/排队延迟
  • web性能要点
    • 延迟和带宽对web性能的影响
    • 传输协议（TCP）对HTTP的影响
    • HTTP协议自身的缺陷
    • Web应用的发展趋势及性能需求
    • 浏览器局限性和优化思路
  • 性能要素：计算、渲染、网络
    • 三个任务：获取资源、页面布局和渲染、js执行
    • 更多带宽并不重要；延迟是性能瓶颈
  • 性能监控指标
    • 首屏时间
    • 用户可交互时间
    • 总下载时间
    • FP（First Paint）、FCP（First Content Paint）（DOM内容）、FMP（First Meaningful Paint）（关键元素）
  • 浏览器优化
    • 基于文档的优化：提前获取资源，提前解析
    • 推测性优化：预先解析DNS、预先连接可能的目标
  • （最佳实践）两个准则
    • 消除或减少不必要的网络延迟
    • 将需要传输的数据压缩至最少
  • 性能准则
    • 减少DNS查找
    • 重用TCP连接
    • 减少HTTP重定向
    • 使用CDN（Content Distributed Network 内容分发网络）
    • 去掉不必要的资源
  • 其他准则
    • 在客户端缓存资源
    • 传输压缩过的内容
    • 消除不必要的请求开销
    • 并行处理请求和响应
    • 针对协议版本采取优化措施
      • 针对HTTP1.x优化建议
        • 采用HTTP管道
        • 采用域名分片
        • 打包资源以减少HTTP请求
        • 嵌入小资源
      • 针对HTTP2的优化
        • 少发数据，减少请求，减少传输数据量和不必要网络延迟，调整资源供给
        • 每个来源一个链接，去掉不必要资源打包，利用服务器推送

HTTP

基本原理、为何演进、常见的请求方法、头域、状态码

头域

由主键/值对组成，描述客户端或者服务器的属性、被传输的资源以及应该实现的连接

四种不同类型的头标

  • 通用头标：即可用于请求，也可以用于响应，是作为一个整体而不是特定资源与事务相关联
  • 请求头标：允许客户端传递关于自身的信息和希望的响应形式
  • 响应头标：服务器用于传递自身信息的响应
  • 实体头标：定义被传送资源的信息，即可用于请求，也可以用于响应

状态码

  • 1xx：信息响应
  • 2xx：成功响应
  • 3xx：重定向消息
    • 301：永久重定向
  • 4xx：客户端错误响应
    • 400：请求错误
    • 401：未认证
    • 403：未授权禁止访问
    • 404：找不到
  • 5xx：服务端错误响应
    • 500：服务器内部错误

请求方法

  • GET：从服务器获取URL对应资源
  • POST：修改URL对应资源
  • PUT：修改或创建资源
  • DELETE：删除资源
  • HEAD：获取少量信息

HTTP的演进

  • HTTP/1.x：报文有一些性能上的缺点：Header无法压缩；相似header的报文重复传输；无法复用
  • HTTP/2：通过启用完整的请求和响应多路复用来减少延迟，通过有效压缩HTTP标头字段来最小化协议开销，并增加对请求优先级和服务器推送的支持
  • HTTP/3：TCP队头阻塞问题、TCP握手时长问题、移动场景的网络切换成本

影响HTTP常见的与tcp相关的延迟

  • TCP连接握手
  • TCP慢启动拥塞控制
  • Nagle的数据聚合算法
  • TCP用于承载确认的延迟确认算法
  • TIME_WAIT的延迟和端口耗尽

HTTP/1.x的连接管理

  • 短连接：每一次HTTP请求之前都会有一次TCP握手
  • 长连接：长连接会保持一段时间
  • HTTP流水线：在同一条长连接上发出连续的请求，而不用等待应答返回

Node.js

客户端与服务端编程、静态网页和动态网页、Nodejs优势/特点/应用/原理，事件驱动模型，同步IO和异步IO，阻塞与非阻塞，模块，ES6与CommonJS模块

静态网页与动态网页

  • 静态网页：写死的HTML文件，每次通过url获取到的都是一样的页面，可以直接在浏览器上显示
  • 动态网页：由程序/脚本生成HTML文件然后返回给前端，每次获取的都可能是不同的页面，不能直接在浏览器上显示

客户端与服务端编程

  • 客户端编程：JS编程？所见即所得？（及时展示反馈）
    • 好处：（不用和服务端交互）效率高、事件驱动、平台独立性
  • 服务端编程：使用web编程语言之一编写的程序。定制用户体验
    • 好处：安全性、兼容性、功能全

Node.js概述

  • Node.js是一个开源的、跨平台的运行时环境。开发人员可以使用JavaScript创建各种服务端工具和应用程序
  • 特点：事件驱动、异步IO框架
  • 应用：网站、即时聊天、前端构建工具、命令行工具、反向代理
    • 适用于数据密集型实时程序（DIRT data-intensive real-time）IO密集型
  • 优势：卓越的性能表现；切换成本低；可移植；活跃的社区

事件驱动模型

  • 维护了一个 event queue 事件队列
  • 有一个 event loop 事件循环不断读取 event queue 中的事件
    • 对于非阻塞事件，处理完调用回调函数向上一层返回结果
    • 对于阻塞事件，委托后台线程池处理；完成后将执行结果与提供的回调函数一起再被放入事件队列中；当event loop 再次读到这个事件时会执行回调函数，将结果返回给上一层。

同步IO与异步IO

同步IO（阻塞式） 异步IO（非阻塞式）
利用多线程提供吞吐量 单线程即可实现高吞吐量
通过时间片分割和线程调度利用多核CPU 通过功能划分利用多核CPU
需要操作系统调用多线程使用多核CPU 可以将单进程绑定到单核CPU
难以充分利用CPU资源 可以充分利用CPU资源
内存轨迹大，数据局部性弱 内存轨迹小，数据局部性强
符合线性编程思维 不符合传统编程思维

阻塞与非阻塞

  • 阻塞 是指在Node.js程序中，其他JS语句的执行，必须等待一个非JS操作完成，因为当阻塞发生时，事件循环无法继续运行JS
  • 非阻塞 是指程序先注册一个回调函数（callback），当操作完成后，触发该回调函数执行后续逻辑，但是不阻碍后面代码的执行。

ES6与CommonJS模块

模块：两种模块，不兼容；esm和cjs

  • 语法
    • CommonJS模块使用require()加载和module.exports输出
    • ES6模块使用import和export
  • CommonJS模块输出的是一个值的拷贝，ES6模块输出的是一个值的引用
  • CommonJS模块是运行时加载，ES6模块是编译时输出接口
  • 循环加载
    • 对于CommonJS：加载时执行，脚本在require的时候就会全部执行
      • require全部执行；加载多少输出多少；循环加载只输出执行部分
    • 对于ESM：遇到模块加载命令只是生成一个引用，等真的需要再去模块里取值

Express

路由、中间件、模板引擎

express概述

  • 最流行的node web框架
  • 特点：精简、灵活
  • express不是固执己见的，是高度包容的

路由

  • 把需要支持的请求（以及请求URL中包含的任何信息）转发到适当的控制器函数
  • 路由用于确定应用程序如何响应对特定端点的客户机请求，包括一个URI（或路径）和一个特定的HTTP请求方法（GET、POST等）
  • 每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行
  • 路由路径
    • 可以是正则表达式
    • 可以包含参数：/users/:userId =》可以匹配 /users/11 的URL，其中userId保存在req.params对象中。
1
2
3
app.get('/', function(req, res) {
    res.send('GET it');
});

中间件

  • 中间件是一种功能的封装方式，具体来说就是封装在程序中处理HTTP请求的功能
  • 中间件是在管道中执行的，通过app.use向管道中插入中间件
  • 中间件中要调用next()，将控制权传递给下一个中间件
  • 中间件的装入顺序十分重要

模板引擎

选用模板引擎需要考虑的因素

  • 进入生产状态的时间
  • 流行度和活跃度
  • 风格
  • 性能/渲染时间
  • 功能

JavaScript

基本概念，基本语法等、DOM、BOM、事件、事件驱动编程、事件处理模型、作用域、词法作用域、作用域链、闭包、提升、最佳实践、正则、原型对象、class、this、框架优缺点

JS概述

  • 一种脚本语言，由js解释器/引擎计算和执行
  • 解释型语言，更加宽松的语法和规则，关键类型是函数，包含在网页中
  • 基本语法：略

DOM和BOM

  • DOM：文档对象模型，是获取、更改、添加或者删除HTML元素的标准；
    • 通过该模型，js可以获取创建动态html所需的所有功能
  • BOM：浏览器对象模型
    • 通过该模型，赋予了js程序与浏览器交互的能力
  • window对象：document对象、location对象（当前URL信息）、navigator对象（浏览器信息）、screen对象、history对象，还可以通过window.cookie使用cookie

事件

  • 使web应用程序的响应性、动态性和交互性更强，一般通过回调函数处理
  • 允许脚本去响应用户与网页上元素的交互，允许通过事件进行对页面的修改

事件驱动编程

  • 事件驱动编程是一种编程范式，其中程序流由事件决定，执行特定的操作来响应用户输入
  • 在事件驱动的应用程序中，通常有一个主循环监听事件，然后在检测到其中一个事件时触发回调函数
  • 事件处理程序可用于处理和验证用户输入、用户操作和浏览器操作

事件处理模型

  • DOM0：内联模型：事件处理程序作为元素的属性添加；传统模型：可以通过脚本（js）添加/删除事件处理程序
  • DOM2：通过addEventListener和removeEventListener来添加和删除事件
  • DOM事件流：捕获阶段 =》目标阶段 =》冒泡阶段（处理事件）

作用域

  • 作用域是当前执行上下文，可见或者可被访问的值和表达式，即有权访问的变量集合
    • 全局作用域
    • 模块作用域
    • 函数作用域
    • 块级作用域（const和let）

闭包

闭包是一个函数及其捆绑的周边环境状态的引用的组合；闭包让开发者可以从内部函数访问外部函数的作用域，会随着函数的创建而创建

词法作用域：（静态作用域）根据源代码中声明变量的位置来确定该变量在何处可用

闭包的应用场景：

  • 实现私有成员
  • 保护命名空间
  • 避免污染全局变量
  • 变量需要长久驻留在内存

作用域链

作用域链包含了一个函数被创建的作用域中对象的集合，决定了哪些数据可以被函数访问，用于在处理标识符的时候进行变量查询

提升

  • 可以先使用变量，再进行声明而不会引发异常，感觉像是 声明 被提升到了使用语句的前面
  • 只有使用var声明的变量才能被提升
  • 类和函数表达式不能被提升，函数声明可以被提升
  • let先声明后使用会引起暂时性死区（TDZ）

最佳实践

  • 避免全局变量，始终声明局部变量
  • 使用严格模式
  • 在顶部声明，声明变量时初始化
  • 使用===比较
  • 减少循环活动

严格模式：use strict

消除js语法的一些不合理、不严谨之处，减少一些怪异行为；消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的js做好铺垫

框架优缺点

  • 优点
    • 封装了复杂困难的代码
    • 加快开发速度，更快完成项目
    • 专注于产品内容的价值，而不是实现过程
    • 让合作更简单
  • 缺点
    • 如果遇到问题需要钻研框架
    • 框架更新快速，升级更新是问题

正则表达式

  • 以/开始和结束
  • .匹配单一字符
  • i：对大小写不敏感
  • |选择、()子表达式、^匹配开始、$匹配结束、\转义
  • *：0+次；+：1+次；?：0/1次
  • {min,max}：min-max次
  • []：字符集

class

JS中声明类的关键字

this

  • 全局环境下的this：严格模式下是undefined；非严格模式下是window
  • 上下文对象调用中的this：绑定到该对象上
  • bind、call、apply改变this指向：指定参数上
  • 构造函数和this：构造函数内的this绑定到新创建对象上
  • 箭头函数中的this：由外层作用域来决定

原型对象

  • 每一个对象都有它的原型对象，它可以使用自己原型对象上的属性和方法
  • 可以通过原型对象扩展对象
  • 原型链：任何对象都有原型对象=》形成原型链

CSS

基本概念、选择器、层叠排序、CSS3新特性、CSS Sprites、布局、盒模型、BFC、响应式web设计、移动优先设计、渐进渐强

CSS概述

  • Cascading Style Sheets 层叠样式表，用于设计风格和布局
  • CSS优势：丰富的样式定义、简洁、清晰、易于修改和使用

选择器

语法：selector { property: value; [...] }

例如：h1 { color: blue; }

  • id(#)/class(.)/标签(p)/属性([title])/伪类(:hover)/伪元素(:first-line)/选择器
  • 组合选择器：
    • 后代选择器：div p （对div标签下的所有p标签生效）
    • 子元素选择器：div>p（对div标签下的子p标签生效）
    • 相邻兄弟选择器：div+p（对div标签相邻的p标签生效）
    • 普通兄弟选择器：div-p（对div标签同一层级的p标签生效）

层叠排序

  • 内联样式 > 嵌入样式（头部style） > 外部样式 > 浏览器缺省样式
  • 优先级计算：a(是否来自style属性即是否是内联样式)-b(ID)-c(属性/伪类)-d(元素/伪元素)

CSS3

  • 被分成若干个相互独立的模块：有利于规范及时更新和发布，及时调整模块的内容；厂商可以有选择地支持一部分模块，有利于CSS3推广。
  • 新特征：圆角效果、图形化边界、块阴影与文字阴影、渐变效果、定制字体（@font-face）
  • CSS Sprites：是单个图像中包含的图像集合
    • 优点：减少服务器请求节约带宽；更换风格方便
    • 缺点：维护麻烦；图片合成费时费力

布局

盒模型

BFC：（块级格式化上下文）是一个独立的布局环境，其中的元素布局不受外界的影响，并且在一个BFC中，块盒与行盒都会垂直地沿着其父元素的边框排列，只有Block-level box参与，规定了内部的Block-level Box如何布局，并且与这个局域外部毫不相干

响应式web设计

（RWD）是一种网页设计方法，该设计可以使网站在多种浏览设备上阅读和导航，同时减少缩放、平移和滚动

  • 优点：可用性得到提升；简化服务器端；更易维护；支持未知设备

  • 缺点：性能较差；限制应用的复杂性；用户混淆

  • 流畅或灵活的页面布局，根据浏览器窗口大小成比例缩放

  • 灵活、比例适中的图像和试听媒体

  • 使用CSS3媒体查询，确定浏览器屏幕的宽度并作出相应调整

移动优先

  • 优先内容和功能
  • 好处：通用访问，即使没有js也能看到一个拥有基本功能的网站
  • 移动优先是渐进渐强理念的良好范例，所有用户都能访问核心内容和功能

渐进渐强：首先基于一个具有广泛兼容性的核心方案，创建一个基线版本，然后再根据可能用到的浏览器特性，慢慢添加一些特性和功能。

HTML

基本标签、块内元素和行内元素、HTML5、优势、应用、新元素、新功能、语义化

HTML概述

  • HyperText Markup Language，超文本标记语言，定义了网页内容和结构
  • 块级元素占据父元素（容器）的整个水平空间，垂直空间等于内同高度；行内元素只占据元素边框所包含的空间
  • <title>：用于定义浏览器工具栏中的标题；提供页面被添加到收藏夹的标题；显示在搜索引擎结果中的页面标题
  • <meta>：用于提供HTML文档元数据；只出现在head里；用于给出网页描述、关键词、文档作者、最后修改日期等信息
  • em vs i，strong vs b：i和b都是无强调或着重意味的
  • table 不要用于布局：结构混乱不清晰；机器难以理解，不利于SEO；
  • 表单中的隐藏字段：目的在于收集或发送信息，以利于被处理表单的程序所使用；帮助确认用户身份；保存全局变量；

HTML5

  • HTML5是最新的稳定版本

  • 优势：跨浏览器兼容性、大道至简（各种简化）、语义化、可用性和用户体验的改进、无插件范式、安全、大量用于移动应用和游戏，对SEO友好

  • 应用：本地数据存储、访问本地文件、本地SQL数据、缓存引用

  • 新元素/新功能

    • 新元素：article、section、header、footer等语义化标签、

    • 更多原生功能，原生支持音视频

    • 完全支持CSS3

    • 提供原生的绘图功能（svg和canvas对比）

      canvas svg
      依赖分辨率 不依赖分辨率
      不支持事件处理器 支持事件处理器
      弱文本渲染能力 强文本渲染能力
      最适合图像密集型游戏 不适合游戏

    • web存储：相比cookie更加安全快速；localStorage（整个网站数据）sessionStorage（当前会话数据）

    • 其他新特性：缓存、数据库、web worker、webSocket

  • 语义化：根据结构化的内容选择合适的标签；有利于SEO、开发维护体验好、用户体验更好、更好的可访问性，方便任何设备对代码进行解析。

    • 帮助实现ARIA（Accesible RIA）无障碍富网络应用

  • 无插件范式：过去很多功能只能通过插件实现，但是在HTML5中提供了原生实现

    • 插件的问题：安装可能失败；被禁用或者屏蔽；被攻击

  • CORS：Cross-Origin Resource Share 跨域资源共享 SOP：Same Origin Policy 同源政策

  • RIA：Rich Internet Applications 富网络应用

概述

DNS、URL/URI/URN、web发展历程、Web3.0

web发展历程

  • web1.0 =》web2.0 =》web3.0
  • web2.0的局限性：用户缺乏自主权（数字身份、个人数据、算法）
  • web3.0的特征：语义化、3D、人工智能、去中心化

DNS

  • Domain Name System
  • 其出现之前使用 hosts.txt保存name-to-IP的映射关系
  • 应用程序（DNS客户端）——解析器——DNS服务器
  • DNS名称树形层次结构
  • FQDN：Fully Qualified Domain Name 全限定域名
  • 主名称服务器和辅名称服务器
  • 递归和迭代查询
  • DNS服务器有缓存

URI/URN/URL

  • RR：Resource Records 资源记录
  • URI：Uniform Resource Identifier ⽤于标识某⼀互联⽹资源名称的字符串 （最大 是后面两个超集）
  • URL：Uniform Resource Location 属于URI 标识互联网资源
    • URL协议：http https file mailto
    • 超链接：绝对URL、相对URL、同一网页内
    • URL编码：只能使用 ASCII 字符集
      • %20/+ => 空格
      • %xx => 中文
  • URN：Uniform Resource Name 仅用于命名 位置无关 通过名称指定

2020级web前端期末考试（2022）

名词解释

  • URN
  • CSSOM
  • SVG
  • CANVAS
  • ES6
  • WebAssembly
  • Cookie
  • Session
  • Render Tree
  • RWD

简答题

  1. web3.0核心技术
  2. 对闭包的理解、优缺点和应用
  3. 前端智能化的理解和典型应用
  4. JavaScript的数据类型
  5. JavaScript的动态和弱类型是什么意思
  6. 状态码的解释：200、301、303、404、500
  7. 箭头函数和普通函数的区别
  8. Nodejs如何实现高并发

问答题

  1. 流行的前端框架？Vanilla JavaScript是什么？为什么要推广？
  2. HTTP1.0-3.0的发展过程？HTTP/3相比之前的HTTP协议解决了什么问题？
  3. 简述四种前端鉴权方案？
nju-course-review
#front-end
Web前端复习
http://example.com/2023/02/22/nju-course-review-notes/web前端/
作者
zhc
发布于
2023年2月22日
许可协议