likes
comments
collection
share

前端开发技术随笔-第一期前端开发技术随笔；碎片化记忆；面试八股文；技术杂项；路上背书；内卷；软件开发；在线炒粉；考公是尽

作者站长头像
站长
· 阅读数 55

通过 animation-delay 控制动画的方案

根据动画运行时间，通过 js 控制 delay 的负数值控制其行进。

缺点：需要有明确的运行总时间

Encrypted Media Extensions API

判断系统是否被录屏

requestIdleCallback

利用浏览器空间时间执行回调。（性能优化）

requestIdelCallback(myNonEssentialWork);
function myNonEssentialWork (deadline) {
  // deadline.timeRemaining()可以获取到当前帧剩余时间
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    doWorkIfNeeded();
  }
  if (tasks.length > 0){
    requestIdleCallback(myNonEssentialWork);
  }
}
​

antd form 包裹自定义封装的控件无法被消化

需要透传 value & onChange

const CustomSelect = ({ value, onChange, ...rest }) => {
  return (
    <Select
      value={value}
      onChange={onChange}
      {...rest}
      >
      <Select.Option value="option1">Option 1</Select.Option>
      <Select.Option value="option2">Option 2</Select.Option>
      <Select.Option value="option3">Option 3</Select.Option>
    </Select>
  );
};

​

object 的自动排序 key

当 object 的 key 为数字键时，调用 Object.entries 方法转换，其会按照 key 进行升序排列

console.dir

输出目标的具体对象信息，例如 HTMLElement 节点

fetch、axios的跨域携带 cookie

fetch: header 设置 credentials 为 include

xhr: header 设置 withCredentials 为 true

typeof value === 'undefined' & value === undefined

  1. typeof value === 'undefined' 安全性: 这种方式在 JavaScript 中被认为是更安全的，因为 typeof 操作符在检查一个变量时，即使这个变量未被声明，也不会抛出错误。例如，如果你尝试对一个未声明的变量使用 typeof，它会返回 'undefined'，而不是抛出 ReferenceError。
  1. value === undefined 声明前的变量: 如果变量还没有被声明，直接使用 value === undefined 会抛出 ReferenceError，因为 JavaScript 无法在没有声明的变量上执行任何操作。

try_catch 只能捕获同步代码内的错误

try {
  setTimeout(() => {
    throw new Error('err')
  }, 200);
} catch (err) {
  console.log(err);
}
​
try {
  Promise.resolve().then(() => {
    throw new Error('err')
  })
} catch (err) {
  console.log(err);
}
​

​

showOpenFilePicker

赋予浏览器操作本地文件的能力

cloud.tencent.com/developer/a…

BroadcaseChannel

BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

兼容处理：如果不要求在标签页a直接触发标签页b的效果，那么可以通过本地缓存配合页面的显隐事件来进行刷新。

空白代码

可用于实现只通过字符串展示的间距控制。（魔法方案）

ᅟᅠ        ‌‍

aLink download

正常情况下，download 属性用于执行下载资源的别名。当前后端配合完成文件下载时，往往会受到资源响应头中 Content-Disposition信息的影响。

当Content-Disposition不为空时，以其值作为文件名；否则 download 可以重置其文件名。

开源许可协议

前端开发技术随笔-第一期前端开发技术随笔；碎片化记忆；面试八股文；技术杂项；路上背书；内卷；软件开发；在线炒粉；考公是尽

​

瀑布流布局

功能调整

业务或功能模块在需要更新前需要规划影响的地方，不要着急落笔。避免迁一发而动全身。

前端节流

  1. 常规方案，对一些方法设置节流限制
  2. 对请求做拦截器，如果两个相同的请求触发间隔小于 200ms，则丢弃后者。
  3. 添加 loading 进行ui 覆盖。

package.json 属性说明

blog.csdn.net/lipskye/art…

本地服务器测试静态网页

  1. 安装 npm i --global http-server
  2. 进入对应的项目储存目录
  3. 开启服务 http-server
  4. 找到对应的文件，运行

时间和空间复杂度

用来衡量算法的性能指标。

时间复杂度：受限于环境因素，通过运行一次算法程序的执行时间是较大误差的。通过大O表示法：

T(n) = O(f(n))，f(n)表示每行代码的执行次数之和。大O符号表示法并不是用来真实代表算法执行时间的，而是表示代码执行时间的增长变化趋势。

常见时间复杂度：

  • O(1)： （没有循环结构） 约定常数的时间复杂度为1。
  • O(n):线性阶
  • O(logN):对数阶
int i = 1;
while(i<n)
{
  i = i * 2;
}
  • O(nlogN):线性对数阶
  • O(n<sup>2</sup>):平方阶，线性阶的代码再循环一遍
  • O(n<sup>3</sup>)、O(n<sup>k</sup>):立方阶、K 次方阶。

空间复杂度：衡量原理同时间复杂度，同样使用符号表示法。区别在于，时间复杂度看代码的执行次数，空间复杂度看创建内存的地方的执行次数。

运行 npm run xxx

  • 运行 npm run xxx的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到则运行；
  • 没有找到则从全局的 node_modules/.bin 中查找，npm i -g xxx就是安装到到全局目录；
  • 如果全局目录还是没找到，那么就从 path 环境变量中查找有没有其他同名的可执行程序

常用 JS 工具库

  1. Day.js 时间日期库
  2. js-cookie
  3. flv.js 哔哩哔哩开源 html5 flash 视频播放器，无需借助 flash 插件便可播放 flv 流媒体
  4. animate.css 跨浏览器的 css3 动画库
  5. animejs 结合 css3 属性，svg，dom 和 js，制作高性能，平滑过渡的动画效果。
  6. lodash.js 一致性、模块化、高性能的 js 语法工具库
  7. introjs、vue-tour、driverjs 用于添加实现用户向导
  8. grcode.react react 的生成二维码
  9. bytemd markdown 编辑器
  10. wangEditor 富文本编辑器
  11. xlsxjs操作文档表格相关
  12. 页面滑动库 lax.js、scrollmagic、AOS、skrollr

环境命名代码

pro: 生产环境，面向外部用户

sit: 系统集成测试，开发人员自测

uat: 用户验收测试环境，生产环境下软件测试者测试

test: 专给测试人员使用

pre: 灰度测试（内测），开放给外部用户访问，常在版本初期

dev: 开放环境

fat: 功能验收测试环境，软件测试者测试使用

魔法字符串

魔法字符串：指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或数值。风格良好的代码，应该尽量消除魔法字符串，而由含义清晰的变量代替。

URL 编码及解码

编码：encodeURIComponent、encodeURI

解码：decodeURIComponent、decodeURI

encodeURI用于对整个资源符进行编码，他不会对本身属于 URI 的特殊字符进行处理。 encodeURIComponent 对 URI 中的某段进行编码，常是 query 参数。

为了避免服务器收到不可预知的请求，对任何用户输入的作为 URI 部分的内容都需要用 encodeURIComponent 进行转义。

console.log(`?x=${encodeURIComponent('test?')}`);
// expected output: "?x=test%3F"
​
// 除了普通的字母，数字，中文，还有特殊字符，但是规范的使用应该是使用字符转义。
"+" URL 中+号表示空格 %2B
"空格" URL中的空格可以用+号或者编码 %20
"/" 分隔目录和子目录 %2F
"?" 分隔实际的 URL 和参数 %3F
"%" 指定特殊字符 %25
"#" 表示书签 %23
"&" URL 中指定的参数间的分隔符 %26
"=" URL 中指定参数的值 %3D
"" 表示目录路径 %5C
"." 句号 %2E
":" 冒号 %3A
​

前端跨域问题

blog.csdn.net/weixin_3036…

浏览器遵循同源访问策略，能够帮助阻挡恶意文档，减少可能被攻击的媒介。认定请求的 url 中协议号、域名、端口号都一致的情况下为同域请求，才能返回对应的文档数据。

非同源受限制的行为有

  1. DOM 无法获取
  2. ajax 请求无法发送
  3. 无法读取cookie 、 localstorage、sessionstorage 、indexedDB(数据库) 等储存信息。

解决同源限制的方法：

  1. 页面通过修改document.domain 的值为当前域或当前域父域。
  2. 使用JSONP 模拟ajax 请求。

动态追加和删除页面中的script 标签，并为其src 插入需要的请求地址，从而伪造出一种网络请求。

需要服务端返回对应的回调函数。

  1. CORS 跨域共享资源。是在服务器中进行配置，客户端不需要进行配置。 跨域携带cookie

meta 标签的理解

meta 元数据不会展示在页面上，是提供给机器阅读的用于设置浏览器如何显示和加载页面等一些 web 服务。其必须值是 content，非必须值是 http-equiv和 name。

  • 项目使用 http 地址，如果加载 http 资源，浏览器会认为是不安全的资源并阻止。通过添加 <<font style="color:rgb(51, 51, 51);">meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /></font>可解除其限制。

使用 localStorage 存取一个对象

需要 json 进行转换

// 存
const User = {
    name: 'zty',
    age: 32,
}
localStorage.setItem('loginedUser', JSON.stringify(User))
// 取
let UserInfo = JSON.parse(localStorage.getItem('loginedUser'))

性能优化的方法

（详情请看雅虎14条性能优化原则）。

  （1） 静态资源使用CDN 进行引用；
  （2）对图片进行按需加载
  （3）减少阻塞的发生
  （4）尽量使用transform 和 opacity 进行动画处理

iframe 内联框架

<iframe style = "width: 100%;height: 500px;" id= "newiframe">

</iframe>

页面渲染过程

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM  + CSSOM --> 渲染树（rendering tree） 。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

www.cnblogs.com/caizhenbo/p…

XHTML 和 HTML

XHTML：可拓展超文本标志语言。是更严谨纯净的HTML 版本。将逐渐取代HTML。

Attribute 和 Property

  • Attribute 由html 进行定义，Property 由DOM 进行定义。
  • 一些attribute 和 Property 之间存在一对一的映射，如：id。
  • attribute 和 Property 之间的内容不是绝对相同的，也有一些没有一对一的映射。
  • attribute 用来初始化 Property ，HTML 属性 value 指向初始值，DOM value 值指向当前值。

前端实现即时通讯

  1. 短轮询，即客户端每过一段时间便向服务端发送请求以获取最新的数据，实现简单，开销较大
  2. comet，一种基于 ajax 的长轮询（服务端有新数据再响应请求，同样是数据完成一个接受后关闭连接），一种是长连接，前端通过侦听 readystatechanges 事件和 readyState 值是否为3 来接受数据。
  3. webSocket 协议实现服务端和客户端之间建立实时的双向通信，使用复杂度高，
  4. SSE，允许服务端向客户端推送新数据的 html5 技术，原理同长轮询很像，只不过是服务端和客户端建立长连接后，服务端等到有新数据可用于返回时，响应后并不会关闭连接。

注释问题

应该尽量避免使用过多的解释性注释，好的代码应该不难进行理解，如果一段代码需要过多的解释性注释，那么它应该被重写。

解决办法：

  • 分解函数。通过将一段函数中复杂的代码片段抽离成一个函数，这个函数形式上具有注释的作用，被称为自描述型代码。
  • 理解哪里需要注释。好的注释常用于描述架构、记录函数的参数及返回值、为什么以这种方式实现、代码巧妙的，不易觉察的解决方案。

四种常见的 post 请求 content-type

  • application/x-www-form-urlencoded。默认的浏览器表单提交编码方式，不特别设置 enctype 属性便会使用这种方式进行提交数据。
  • multipart/form-data。一般用来上传文件，较大的文件用这种编码方式比较好。
  • application/json。
  • text/xml。

五个不为人知的chrome 开发者工具特性

颜色杂谈

颜料的光线越少，颜色越深；色光相反。十六进制的颜色代码缩写要其中颜色值的两个十六进制数字相同才可以。

关于token与cookie、session的哪些事

mp.weixin.qq.com/s/yPdSQkSgI…

session 和 token 本质上没有区别，都是对用户的身份认证机制，只是实现的方式不一样（前者保存在server,通过redis等中间件获取来校验，后者保存在client,通过签名来校验），多数场景使用session会更合理，但如果单点登录，一次性命令认证上使用token更合适。

单点登录

多个系统的用户登录借助单独的登录系统。

浏览器命令行

地址栏输入about:about查看。

树摇晃Tree shaking

编译构建时将不需要的的无用的模块进行删除，以达到压缩代码体积的作用。

图像格式

  • jpg(jpeg) 。有损压缩、体积小、加载快、不支持透明，不支持动画；使用场景：大的背景图、轮播图、Banner 图
  • png。无损压缩、质量高、体积大、支持透明，不支持动画，分 png-8 和 png-24。使用场景：小的 logo，颜色相对简单且对比强烈的图片或背景。
  • gif。支持动画，支持透明背景，适用于多种操作系统，体积小。
  • svg。文本文件，体积小，不失真，兼容性好，可缩放的矢量图，不会损失图片质量，可编辑和可搜寻。
  • base 64。文本文件，依赖编码，小图标解决方案。大图使用 base64 编码后，图片大小会膨胀为源文件的 4/3。

浏览器缓存机制

http1.0 时期使用 Expires 储存请求资源的过期时间，http1.1 变成使用 Cache-Control 字段。

Expires: Wed, 22 Nov 2019 08:41:00 GMT

Cache-Control: max-age=3600

Expires 会因为服务器和浏览器的计时器存在差异从而带来一些实时性差别。

Cache-Control 还有其他的属性搭配使用。

  • public。浏览器和服务器都可进行缓存。
  • private。只有浏览器能缓存，中间代理服务器不能缓存。
  • no-cache。跳过当前强缓存，进入协商缓存阶段。
  • no-store。不进行任何形式的缓存策略。
  • s-maxage。针对代理服务器的缓存时间进行资源是否过期判别。

协商缓存

强缓存失效后，浏览器通过携带缓存 tag 向服务器发请求，服务器根据 tag 决定是否使用缓存。

缓存 tag 分两种：Last-Modified 和 ETag。

  • Last-Modified。最后修改时间。
  • ETag。当前文件内容。

缓存位置

  • Serivice Worker

借鉴了 Web Worker 的思路，让 JS 运行在主线程之外，提供诸如离线缓存、消息推送和网络代理等功能。

  • Memory Cache

内存缓存

  • Disk Cache

硬盘缓存

  • Push Cache

推送缓存。HTTP/2 内容。

webSocket 携带 token 进行鉴权

方法文章

重点：利用 Sec-Websocket-Protocol 子协议传输 token。后端响应时也携带上该 token 值进行响应。

理解：Sec-Websocket-Protocol 本意是传递前后端协商的协议，当客户端请求相关协议时，服务器需要使用 Sec-Websocket-Protocol 响应头来同意协议。

转载自:https://juejin.cn/post/7410672790021275684
评论
请登录