1.1. 工具链和其他

1.1.1. 异步模块加载

工作日常、面试重点、前端架构

整体结构

在传输时，会转化成CMD/AMD给到浏览器，因为浏览器不支持CommonJS，需要执行CMD/AMD，在加载执行时，是通过一些加载器进行加载的require.js、webpack等

AMD&CMD

是底层建设

AMD（Asynchronous Module Definition）

解析依赖，创建模块，使用模块，

CMD（Common Module Definition）

依赖后置，使用时再require，模块后置，模块使用按需加载

ES6/CommonJS

编写程序时的模块化实现。是一种书写规范

加载器示例

let modules = {}
function define(name,fn){
  modules[name] = fn
}
function lookup(name){
  return reuiqre.path + name + '.js'
}
fucntion require(deps,callback){
  function loadModule(name){
    return new Promise((resolve)=>{
      const script = document.createElement('script')
      script.src = lookup(name)

      script.addEventListener('load',()=>{
        resolve(modules[name])
      })
      document.body.appendChild(script)
    })
  }
  const promises = deps.mao(name => loadModule)
  Promise.all(promises).then(modules => {
    callback(...modules)
  })
}

1.1.2. 超级好用的web调试工具whistle

工作日常、工具链、前端生态

• http代理/反向代理
• 捕捉/重放/组合请求（http/https/websocket/tcp）
• 基于模式匹配：hosts/文件替换/请求返回调试
• 移动端远程调试

修改host

代理

正向代理：指向外部网站

www.dev.com proxy://127.0.0.1:2299

反向代理：指向本地地址

www.dev.com/api http://127.0.0.1:3000

替换文件

在上线后，可能会出现错误，但是线上的js文件已经压缩过了，会很难调试，就可以替换文件，替换成本地的开发时js文件。

www.dev.com/require.js 「本地文件地址」

替换UA

www.baidu.com ua://{i-ua}

远程调试

winerer

js注入

vconsole：腾讯的调试代码

把这个注入到页面中通过jsAppend://{文件名}

1.1.3. Web服务器和caddy

工作日常、工具链、前端生态

web服务器需要哪些能力

• web server：

• proxy：

正向代理将客户端和服务器绑定在一起

反向代理将服务器和另一个服务器绑定在一起

• cache：

CPU缓存 > 计算机缓存 > 缓存服务器 > 硬盘

• logging：

日志能力斯因为web节点处在集中的位置，最方便做日志。

access_log：用户访问产生的日志

error_log：错误日志

• API gateway

caddy的特性。

具有缓存，可以配置分发接口，将cookie转化为参数给相应服务

sdk

• TLS终结（termination）

服务内部的协议用tcp会更快，tls终结就是将加密服务终结掉，换用tcp协议。

caddy

apache、nginx

go语言编写的高性能https服务器

提供命令行工具和cli

caddy run 前台启动，caddy start 后台启动

1.1.4. 实战B站爬虫

工作日常、工具链、前端生态

Scheduler：调度器

downloader：下载器

storage：存储

quene：下载器获取到的urls推到队列

爬取B站卡片数据

模拟登录

1.1.5. 移动端网络优化的指标和策略

工作日常、数据分析、前端优化

浏览器一次最多发六个请求。

一个请求的时间消耗：

准备

• scheduling（排队时间）

• stalled（准备建立连接）

开始建立连接

• DNS Lookup（DNS查询时间）

• initial connection（TCP的连接，也就是三次握手）

• SSL（加密时间）（与握手时间有重合时间）

发送请求处理请求

• request sent 接受请求时间
• waiting（TTFB）（第一个字节的返回时间）包含网络延迟和服务器处理时间
• content download（内容下载）

常见的性能指标

是否显示？

• 首次绘制时间（FC）（白屏可能也算），首次内容绘制（FCP）

关键元素是否显示？

• 首次有效绘制（FMP）（关键元素）、主角元素计时

是否可用？

• 可交互时间（TTI）

是否卡顿？

• CPU消耗（API可以直接监控）、输入延迟

网络优化策略

• 本地缓存：

http缓存、移动端缓存（native）、服务器缓存（redis、ssr等）

• 压缩：

JS压缩、CSS压缩、HTML压缩（unligyjs、xxx minify）

Gzip压缩（express/nginx/caddy）

合并（雪碧图）

• 请求合并：

服务器做这个合并，通过部署一个函数，来合并几个API，这样子客户端的请求就会少很多

• 离线包：

再打开APP期间将资源（离线包）推送到APP的缓存中（通过APP闲置时间）

• 预加载：

APP预加载完整容器（Webview）

H5应用预加载下一个页面的数据