DNS服务器 | songth1ef`s code-note

# DNS服务器

Domain Name System 域名系统

将域名转换为服务器ip

# dns解析过程

应用程序缓存 =>本地hosts =>本地DNS服务器 =>根服务器 =>顶级域名服务器=> 权威服务器=>ip地址

域名=>不同网络运营商=>不同城市=>不同ip服务器（反向代理的负载均衡LB ，WAF服务器）真正的应用服务器IP地址是不会暴露于公网环境的

# CDN与DNS

不同地区的用户访问前端静态文件会从不同的CDN节点下载数据

不同地区=> 返回不同CNAME域名

xxx01.name.com,xxx02.name.com,xxx03.name.com

我们称为CDN加速域名

# 性能优化

<link rel="dns-prefetch" href="//cdn.example.com">

# 本地调试

可以修改本地hosts文件 localhost（127.0.0.1）映射为（例 local.bili.com）解决联调时cookie无法传输问题

# HTTP

http1.1 http2 http3

围绕安全性和速度迭代

状态码只需记住 2开头表示成功 3开头表示重定向 4开头表示客户端错误 5开头表示服务端错误

# 请求上下文

Host

Referer

User-Agent

# 响应上下文

Allow

Server

# 缓存

Cache-Control

Last-Modified/Last-Modified-Since

Etag-if-NoneMatch

Set-Cookie

# 安全

X-Frame-Options

Strict-Transport-Security（HSTS）

Content-Security-Policy（CSP）

# 跨域控制（CORS）

Origin

Access-Control

# 消息主体

Content-

# 异步请求

# XMLHttpRequeat（XHR）

jQuery

Ajax

Axios ...

# 新标准Fetch

# Content-Type

也可以是JSON，form其他任何MIME类型

# application/json

指定参数为json格式

# text/plain

参数为字符格式

# Gateway网关

对http定制增加登录验证，请求跟踪，监控，限流等功能

前端代码通过远程过程调用（RPC）的方式而非使用原始HTTP

#

ES6 TypeScript ...

# WebAssembly(WASM)

安全沙箱跨平台开发重度计算虚拟化技术容器...

在node环境直接运行

浏览器直接打开IDE就是WASM落地应用

# 领域特定语言（DSL）

微信小程序中编写wxml，react中写jsx，vue的template等

# 包管理

cnpm 的 bug-versions维护了一套黑名单

每次cnpm安装时都会检查和避免安装问题包

# 构建工具

# 转译器

jsx=>js 、箭头函数=>普通js 、less=>css

# 优化器

代码压缩、混淆、分割。提升传输效率、提升安全性

# 打包器

将转译好的代码合并到一块

# 开发服务器

通过HMR、传输原生ES模块、接口代理等功能来提升开发体验

# 插件系统

定制化需求

# CI/CD

Github Action

Jenkins

...

# 性能分析工具

前端性能问题

# 页面加载时间太长

# 资源体积过大

减少产物大小压缩树摇依赖外置

减少传输量代码拆分按需加载服务端渲染

# 网络延迟较高

HTTP/2协议提升网络并发传输效率

CDN分发静态资源

serverless应用

浏览器资源提示预加载

图片预览图优化

# 缺少缓存

# 本地缓存

http缓存头

localstroage/indexDB

Service Worker

# 远端缓存

内存缓存

边缘缓存

网关缓存

# 渲染受阻

可以将非关键的js文件标记为异步加载async或defer来阻塞他们加载

<script src="path.js" async></script>
<script src="path.js" defer></script>

白屏时间较长的SPA单页应用可以在主文档全局变量中预写入数据来减少首屏代码中的接口请求。加速页面渲染

# 交互过程不流畅

# 海量数据

# 长列表展示

分页和虚拟滚动，只渲染可视范围

# 大数据可视化

数据抽样

分片渲染

Canvas渲染

WebGL加速

# 离屏渲染

还可以在屏幕可视区域外先渲染好在一次性渲染在可视区域，这样减少屏幕卡顿和闪烁

# 大量动画

多在动画上使用带有硬件加速功能的css属性

requestAnimationFrame函数

开源动效方案Lottie， Framer Motion

# 频繁交互

防抖节流

# vue

keep-alive

v-show

# react

useTransition

useDeferredValue

useOptimistic

# 资源消耗过度

不合理的资源加载

# 代码质量问题

只监听不卸载的时间处理器

长时间执行的同步代码

频繁的网络请求

# UX

# 加载反馈

# 首屏加载时骨架屏

# 耗时操作按钮加loading

# 强/弱依赖

尽可能保证并发的前提下分别处理接口

# 异常反馈

网络错误等问题提示用户稍后重试

# 兜底渲染

预期条件不满足时执行默认动作，空数据展示

# 响应式设计

不同尺寸设备自适应横竖屏移动端优先原则

媒体查询原生性能最好（检查分辨率，色彩深度，触摸屏，黑白模式）

js监听window.innerWidth感知屏幕大小变化

# 交互习惯适应

PC,PE交互习惯

	PC	PE
分页查询	点击下一页	触底加载
选择框	form	Actionsheet
按钮	form	全宽

# 可访问性

# 国际化

# 障碍人士

适配屏幕阅读器

色盲用户色彩对比度检查

# 新手引导

# 个性化

# 主题

浅色/深色切换

自定义换肤

# 记忆

用户操作存储在本地下次访问读取本地状态回复页面状态

比如页面滚动位置，数据筛选条件，复杂表单的草稿等

减少用户操作

# A/B测试

不同用户画像展示不同页面，算法优化页面布局

# 性能调优

# 性能分析

# 缓存技术

# 网络优化

# 容器方案

# 服务端

使用服务端渲染缩短白屏时间减少客户端请求次数

# 运行时 Runtime

js引擎+js标准库以及一组环境相关的API

nodejs就是一种运行时它的上层应用提供了HTTP协议实现、文件系统、查询字符串处理等

# 基础框架

express 、koa、fastify

# 应用框架

# 应用架构

MVC RESTful BFF

# 编码质量

# 防御性编程

判空处理

异常处理

默认状态

# 质量管理工具

ESLint

Prettier

# 代码评审

# 测试

# 单元测试

# 集成测试

# 兼容性测试不同浏览器

# 质量和安全

# 编码质量

# 边界处理

# 异常处理

# 降级策略

# 质量工具

# 静态代码检测

# 代码风格控制

# 测试工具

# 稳定性

# 供应链安全

# 应急预案

# SOP

# 攻击防御

# CSRF

同源检查和token检查

# XSS

对用户输入进行过滤

# Clickjacking

# 持续集成和部署

# CI

自动化流水线

# CD

提升依赖安装速度

# 灰度发布

减少故障影响面

# 依赖一致性

package-lock.json依赖锁

# 回滚止血

# 云基础设施

如何加快应用访问速度

降低应用部署成本

有效存储优化资源存储

# OSS

图片视频资源压缩处理存储

# WAF

web应用防火墙

# 可观测性

# 日志

# 监控

异常信息收集代码运行异常网络请求异常用户输入异常页面渲染异常

# DNS服务器

# dns解析过程

# CDN与DNS

# 性能优化

# 本地调试

# HTTP

# 请求上下文

# 响应上下文

# 缓存

# Cookie

# 安全

# 跨域控制（CORS）

# 消息主体

# 异步请求

# XMLHttpRequeat（XHR）

# 新标准Fetch

# Content-Type

# application/json

# text/plain

# Gateway网关

#

# WebAssembly(WASM)

# 领域特定语言（DSL）

# 包管理

# 构建工具

# 转译器

# 优化器

# 打包器

# 开发服务器

# 插件系统

# CI/CD

# 性能分析工具

# 页面加载时间太长

# 资源体积过大

# 网络延迟较高

# 缺少缓存

# 本地缓存

# 远端缓存

# 渲染受阻

# 交互过程不流畅

# 海量数据

# 长列表展示

# 大数据可视化

# 离屏渲染

# 大量动画

# 频繁交互

# vue

# react

# 资源消耗过度

# 代码质量问题

# UX

# 加载反馈

# 首屏加载时 骨架屏

# 耗时操作按钮加loading

# 强/弱依赖

# 异常反馈

# 兜底渲染

# 响应式设计

# 交互习惯适应

# 可访问性

# 国际化

# 障碍人士

# 新手引导

# 个性化

# 主题

# 记忆

# A/B测试

# 性能调优

# 性能分析

# 缓存技术

# 网络优化

# 容器方案

# 服务端

# 运行时 Runtime

# 基础框架

# 应用框架

# 应用架构

# 编码质量

# 防御性编程

# 质量管理工具

# 首屏加载时骨架屏

# 兼容性测试不同浏览器