模糊点杂记

伶邪
67 阅读9分钟

乱七八遭

SPU 和 SKU

SPU:表示一个产品单元，包含产品的所有信息，颜色，尺寸，来源等所有销售属性 （相当于类）

SKU:库存量最小单位 (相对于类的实例)

长列表优化

  1. 虚拟列表
  2. css
  content-visibility:auto .只渲染可见部分的内容。
  contain-intrinsic-size:300px;实现渲染不抖动
  1. 分页配合上拉加载更多

大屏适配

rem自适应就是根据屏幕大小用js重新设置html字体的大小。

html根字体大小 =（js获取到的当前设备宽度 / 设计图宽度 ）* 设计图宽度下1rem的大小

对应自动转化库： postcss-pxtorem

屏幕分辨率： 一般是

2k：1920 * 1080

4K: 3840 * 2160

8k: 7680 * 4320

第一种方案：(全屏设计) vw | vh方案

新增单位 ，ie8以上可用 。 字体会有问题

假设设计稿为 1980 * 1080 ，则1vw = 19.8px; 1vh = 1.08px

100vm,100vh表示全屏

对应自动转换 库： postcss-px-to-viewport

第二种方案： scale 方案

...

文件断点上传(大文件切片上传)

（1）切片上传失败怎么办

（2）上传过程中刷新页面怎么办

（3）如何进行并行上传

（4）切片什么时候按数量切，什么时候按大小切

（5）如何结合 Web Work 处理大文件上传

（6）如何实现秒传

什么是单点登录( SSO)？如何实现？

SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统.

例子：淘宝、天猫都属于阿里旗下，当用户登录淘宝后，再打开天猫，系统便自动帮用户登录了天猫，这种现象就属于单点登录

同域名下的单点登录

Cookie的domain属性设置为父域，将 Session ID（令牌）（或 Token）保存到父域中 。子域应用就都可以访问到这个Cookie

不同域名下的单点登录(一)

Session ID （或 Token ）保存 LocalStorage 中，让前端在每次向后端发送请求时，主动将LocalStorage的数据传递给服务端。 单点登录完全可以在前端实现。前端拿到 Session ID （或 Token ）后，除了将它写入自己的 LocalStorage 中之外，还可以通过特殊手段将它写入多个其他域下的 LocalStorage 中。

iframe+postMessage()

不同域名下的单点登录(二)

Cookie是不共享的，部署一个认证中心。专门处理登录请求的独立的 Web 服务

用户统一在认证中心进行登录。应用系统检查当前请求有没有Token判断是否登录。

如何实现jwt鉴权机制？说说你的思路

JWT（JSON Web Token）本质就是一个字符串书写规范。

作用是用来在用户和服务器之间传递安全可靠的信息。

前后端分离的开发过程中，使用token鉴权机制用于身份验证是最常见的方案，流程如下：

  • 服务器当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证
  • 后续访问会根据这个令牌判断用户时候有权限进行访问

Token，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以.进行拼接。其中头部和载荷都是以JSON格式存放数据，只是进行了编码

  • 生成token：登录成功的时候，颁发token
  • 验证token：访问某些资源或者接口时，验证token

可防护CSRF攻击

Web攻击（WebAttack）

是针对用户上网行为或网站服务器等设备进行攻击的行为

  • XSS (Cross Site Scripting) 跨站脚本攻击
  • CSRF（Cross-site request forgery）跨站请求伪造
  • SQL注入攻击

Socket.IO

支持实时、双向和基于事件的通信。 它能够在任何平台、浏览器或设备上运行，可靠性和速度同样出色。

  • 实时分析
  • 即时通讯和聊天
  • 二级制数据流
  • 文档协作

Git

说说Git 中 HEAD、工作树和索引之间的区别？

在git中，可以存在很多分支，其本质上是一个指向commit对象的可变指针，而Head是一个特别的指针，是一个指向你正在工作中的本地分支的指针

  • HEAD 指针通常指向我们所在的分支，当我们在某个分支上创建新的提交时，分支指针总是会指向当前分支的最新提交

  • 工作树是查看和编辑的（源）文件的实际内容

  • 索引是放置你想要提交给 git仓库文件的地方，如工作树的代码通过 git add 则添加到 git 索引中，通过git commit 则将索引区域的文件提交到 git 仓库中

对git reset 和 git revert 的理解？区别？

都用来回退版本。

  • git reset: 回退版本，移除不要的版本。 head指针往前移

    直接删除指定的commit

  • git revert : 撤销某次提交【回滚提交】，新建一个提交。 head指针往后移 。

    用一次新的commit来回滚之前的commit,在创建一个新的commit

image.png

注：保留了原来的版本。以便后续可以用 image.png

操作系统

进程 线程

进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位 进程相当于程序

线程相当于一个任务

系统：有多个（程序）

进程（程序）：有多个线程（任务）

一个进程至少有一个线程，一个进程可以运行多个线程。这些线程共享同一块内存，线程之间可以共享对象、资源，如果有冲突或需要协同，还可以随时沟通以解决冲突或保持同步。

函数式编程

基于underscore.js的使用作为基础知识，展开此书

闭包

捕获外部绑定（不是自己的变量和参数）。

HTTP

HTTP（超文本传输协议，HyperText Transfer Protocol）

分布式、协作式、超媒体信息系统的应用层协议。HTTP是万维网（WWW）的数据通信的基础

设计目的

确保客户端与服务器之间的通信

基本工作原理

客户端（通常是 web 浏览器）向服务器发送请求，服务器接收到请求后，返回相应的资源。

步骤：

  • 建立连接： TCP/IP 协议 、基于TCP 的二进制协议、（HTTP/2）或基于 UDP 的 QUIC 协议（HTTP/3）
  • 发送请求：
  • 处理请求：
  • 发送响应：
  • 关闭连接： （持久连接除外（如 HTTP/1.1 中的 keep-alive））

HTTP版本

HTTP/1.1：支持持久连接，允许多个请求/响应通过同一个 TCP 连接传输，减少了建立和关闭连接的消耗。 HTTP/2：基于二进制分帧，支持多路复用，允许同时通过单一的 HTTP/2 连接发起多重的、独立的、双向的交流。 HTTP/3：基于 QUIC 协议，旨在减少网络延迟，提高传输速度和安全性。

========== HTTPS ========

HTTPS（超文本传输安全协议，Hypertext Transfer Protocol Secure）是 HTTP 的安全版本，它在 HTTP 下增加了 SSL/TLS 协议，提供了数据加密、完整性校验和身份验证。HTTPS 通常使用端口 443。

构造函数继承

缺点：子类不能继承父类原型上的东西。

原型链继承

缺点：子类和父类共用同一个原型

Video

音视频的属性

可以设置也可获取的属性

  • src:设置或返回当前来源地址
  • currentTime ：设置或获取当前播放位置（以秒计）
  • volume:设置或返当前音量 必须是介于 0.0 与 1.0 之间的数字
  • playbackRate: 设置或获取当前播放速度 1.0 | 0.5 | 2.0 | -1.0 | -0.5
  • defaultPlaybackRate:设置或获取默认播放速度 1.0 | 0.5 | 2.0 | -1.0 |-0.5
    • 1.0 正常速度
    • 0.5 半速（更慢）
    • 2.0 倍速（更快）
    • -1.0 向后，正常速度
    • -0.5 向后，半速`
  • mediaGroup: 设置或获取音频/视频所属的组合（用于连接多个音频/视频元素）。auto|metadata|none
  • preload : 设置或获取是否在页面加载后立即加载音频/视频

只能获取的属性

  • duration:获取长度，以秒计
  • muted:获取或设置是否静音
  • currentSrc: 获取地址
  • networkState 获取当前网络状态（activity）
  • 0 ： 音频/视频尚未初始化
  • 1 ： 音频/视频是活动的且已选取资源，但并未使用网络
  • 2 ： 浏览器正在下载数据
  • 3 ： 未找到音频/视频来源
  • buffered:[object TimeRanges]:获取缓冲范围，秒计。返回TimeRanges对象
    • start(index)
    • end(index)
    myVid=document.getElementById("video1");
myVid.buffered.start(0) + " End: "  + myVid.buffered.end(0)
  • played :获得视频中的首段已播放的范围（部分）,秒计。返回TimeRanges对象
    • start(index)
    • end(index)
  • readyState: 返回音频/视频的当前就绪状态。就绪状态指示音频/视频是否已准备好播放。1 | 2 | 3 | 4
  • seekable :获取频/视频中用户可寻址的范围 ，返回 TimeRanges 对象
    • length - 获得音频/视频中可寻址范围的数量
    • start(index) - 获得可寻址范围的开始位置
    • end(index) - 获得可寻址范围的结束位置

判断的属性

  • autoplay:true | false : 是否播放
  • controls:true | false:是否显示音频/视频控件[播放、暂停、进度条、音量、全屏切换（供视频）、字幕（当可用时）、轨道（当可用时）]
  • loop: true | false:是否循环
  • paused:true | false:是否暂停
  • ended：true | false:播放是否已结束。

音视频的事件

onended = ()=>{} ：播放完成后触发 error = ()=>{}: 出错时触发 onpause = ()=>{} : 暂停时触发 onplay = ()=>{}:播放时触发 onprogress = ()=>{}:下载时触发 ratechange=()=>{}:播放速度已更改时触发 timeupdate=()=>{} :在音频/视频（audio/video）的播放位置发生改变时触发

当音频/视频处于加载过程中时，会依次发生以下事件：

  • loadstart
  • durationchange
  • loadedmetadata
  • loadeddata
  • progress
  • canplay
  • canplaythrough

HTML5

语义

  • 语义元素是拥有语义的元素,清楚地向浏览器和开发者描述其意义

CSS

BFC

页面上的一个隔离的独立容器，内部的子元素不会影响到外部的元素

响应式设计 RWD

  • 页面布局会随着屏幕大小而变化 。

视口viewport

  • 视口（viewport）是用户在网页上的可见区域。
  • 标签来控制视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">

网格视图

  • 响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展
  • 注意box-sizing 属性设置为 border-box

Flex布局模块

  • flex-flow: row wrap; // flex-direction 和 flex-wrap 属性的简写 row 横向排，wrap换行

grid网格布局模块

媒体类型 @meta

CSS resize属性 调整大小

css伪元素清楚浮动，解决浮动带来的溢出问题。

文本溢出解决方案

  • word-break: break-all; 换行 - 将在任何字符段开。
  • writing-mode：horizontal-tb | vertical-rl | vertical-rl 文本行是水平放置还是垂直放置。

CSS 多列布局

  • column-count: 3; //几列
  • column-gap: 40px; // 每列间隔
  • column-rule: 1px solid lightblue; //列直接规则的属性
avatar
文章
阅读
粉丝