路旁有花，心中有歌，

天上有星。

Browser

2021.09.20

浏览器渲染基本流程 进程和线程的区别 浏览器线程和进程 浏览器进程？线程？傻傻分不清楚！ 进程 什么是进程 进程类似工厂，线程类似工人。 进程是cpu资源分配的最小单位（系统会给它分配内存）。操作系统会为每个进程分配私有、独立的一块内存资源，进程之间互不影响； 当进程被杀掉，分配的内存空间也被释放； 一个进程中可能有一个或多个线程在工作；...

Web

Web API

2021.09.20

目前的 Web 设备接口API： Web USB API; (USB通信) Web Serial API; （串口通信） Web NFC API; （NFC通信） Web Bluetooth API; （蓝牙通信） Web HID API; （人机接口设备通信） 为保证安全，这些API： 只在htttps或wss协议下...

Web

Web Component

2021.09.20

Web组件相关API： HTML模板) Shadow DOM 自定义组件 一、HTML模板 使用<template>标签包裹一系列DOM元素，叫做HTML模板。它有以下特性： 默认不会被浏览器渲染，内部内容包裹在一个DocumentFragment节点内； 内部内容不属于活动文档，因此document.querySel...

Vue

2021.09.12

Vue3组件：script setup 语法糖 Vue3 RFC: script-setup <script setup>语法糖引入的动机，是简化冗余代码，让SFC书写更简洁。 1. 书写形式 <script setup> // codes.. </script> 2. <script setup>基本用法 内...

Vue

2021.09.08

Vue使用的注意事项 一、v-for 与 v-if 不要同时使用 原因： 浪费性能。 v-for在Vue中比v-if优先级高，因此无论如何都会遍历所有列表中的子元素，才能确定哪些子元素被显示。（本意是只遍历+显示v-if为true的子元素集合） 解决方式： 使用computed等提前筛选出要显示的列表元素，然后用v-for遍历。 二、多个根节点的组件，需要显式指定Att...

Safety

2021.09.06

前端鉴权：掘金 一、cookie + session 浏览器登录发送账号密码，服务端查用户库，校验用户; 服务端把用户登录状态存为 session，生成一个 session_ID; 通过登录接口返回，把 sessionID set 到 cookie 上; 此后浏览器再请求业务接口，session_ID 随 cookie 带上; 服务端查 session_...

Safety

2021.09.06

前端安全 一、XSS：跨站点脚本攻击 二、CSRF：跨站点请求伪造 基本形式： 通过cookie等经过用户鉴权的页面，伪造用户请求，骗取服务器信任。 三、CSP：内容安全策略 四、HSTS：强制HTTPs连接 HSTS（HTTP Strict Transport Security） 五、X-Frame-Options：控制iframe嵌入 六、SRI： 子资源完整性校...

HTML

Performance

2021.09.06

一、preload和prefetch的功能 待补充。 二、preload和prefetch的区别 待补充。

Vue

2021.09.06

一、Vue3中的diff算法 Vue3中对于没有key的片段，采用的是直接数组比较方法； 对于有key的片段，采用的是先掐头去尾，然后执行最长递增子序列的方法。 1. 最长递增子序列算法 最长递增子序列算法： 贪心策略：为了找到最长的递增子序列，我们希望递增序列增长得慢一些。这样后面的元素就更容易与其形成更长的递增子序列。 因此，假设我们在遍历过程中当前找到的最长递增...

Frontend

2021.09.02

实用前端工具库 一、UI组件 Element UI: Element UI View UI: View UI 轮播图：swiper 滚动：mescroll.js 二、工具类 函数库： Lodash 解析时间: day.js 显示timeago日期效果: timeago.js 数据可视化： ECharts Markdown编辑器： MEditor 表单验证： v...

Vue

Vuex

2021.09.02

Vuex: 中心型状态管理工具 核心概念和基本操作 安装使用 npm 安装: npm i vuex@next; 在main.js引入：import { createStore } from 'vuex'; 创建新store(vuex仓库实例): const store = createStore({ state(){ return { ...

Vue

Vue-Router

2021.09.02

Vuex-Router: 路由管理工具 路由链接、路由出口 这是两个vue-router内置组件： <router-link>: 用来存放路由链接的内置组件，点击即可进行路由跳转； <router-view>: 用来显示路由匹配结果的内置组件，路由匹配到的组件会显示在这里。 JS: 配置一个vue-router基本流程 // 官方代码示例...

Webpack

2021.09.02

什么是Source Map？ 怎样设置Source Map？ An Introduction to Source Maps 一、Source Map 是什么 当代码被打包完成后，开发调试变得困难，无法查看到一段压缩后的代码在它源文件中的位置。 source map是一种将压缩后代码，映射到源代码位置的方式，用于开发调试。 Source Map文件以 xxx.js....

Webpack

2021.09.02

一、Webpack基本概念 二、Webpack配置 三、常用 Webpack Plugins 开启Source Map 一、Webpack基本概念 二、Webpack 配置 通过外部webpack.config.js文件来配置。 1. 模式 Mode development: 开发模式。 会使用DefinePlugin把代码中的...

Vue

2021.09.01

一、虚拟DOM是什么？基本实现流程是？ 1. 什么是虚拟DOM 虚拟DOM是用JS对象，对真实DOM树进行的简化模拟。 基本的虚拟DOM元素，叫做VNode，它包含以下几个属性： tag: 对应的DOM元素标签名； props: 对应的DOM元素Attributes； children: 子元素。可以是纯文本子元素，也可以是VNode子元素。 2. 基本的虚拟DOM...

JavaScript

2021.08.31

前端路由相关 一、页面路由的历史 1. 早期：路由由服务端控制 流程： 客户端发起http请求 -> 服务端根据请求url匹配不同的资源（不同html） -> 返回请求数据 -> 客户端渲染显示 好处： 直接生成html，seo友好； 首屏渲染快； 首屏时间（白屏时间）： 从输入url按下回车到页面任意元素加载出来的时间。 缺点： ...

JavaScript

2021.08.31

RFC 3986： Uniform Resource Identifier (URI): Generic Syntax 通用资源标识符： 通用语法 2. 符号 2.1 百分号编码 2.2 保留字符 2.3 非保留字符 2.4 何时编码、何时解码 2.5 3. 语法组成 Syntax Components 一般的URI语法，由层次化的序列串组成。它们包括：协议、主机、路径...

JavaScript

2021.08.31

Express框架基本操作 引入与创建express app实例 const express = require('express') const app = express() 基本路由 app.METHOD(PATH, HANDLER) METHOD: http方法； PATH: 请求路径，一旦匹配执行handler; HANDLER: 路径匹配后的...

JavaScript

2021.08.23

部分原生API的手动实现 一、数组 reduce()方法 二、对象 深拷贝 一、数组Array 1. reduce()方法 function myReduce(arr, fn = (accu, item, index, array) => {}, init) { // 判断arr是否是数组； if (Object.prototype.toString.c...

JavaScript

2021.08.23

Airbnb JavaScript Style Guide 中文版： Airbnb JS 样式指南 1. 函数 不使用arguments，使用...args收集函数参数； 参数带有默认值的，放在参数列表最后； 不使用Function构造函数生成函数； 参数分为多行时，每行只存在一个参数，并用逗号结尾； 箭头函数的参数，永远用小括号包裹； 2. 操作...