前端老应用优化中我使用的基础知识

原文地址：

www.yuque.com/xiezhongfu/…

本文总结的是，今年上半年经前端项目优化中涉及到的一些基础知识。点到即止

文中有些链接虽有导流嫌疑，还是建议看一看

！！！开篇文章，仓促而成，留言指教！！！

工具链优化

• 引入 typescript
• eslint
• css-module
• styleint
• prettier
• 增加 git 钩子
• webpack node api 自定义编译
• webpack 自定义插件
• rollup 编译项目 lib
• 项目自定义CI/CD
• docker

应用优化

浏览器的基础是一个 HTML 解析引擎。它遍历 HTML 文档，按照顺序解析成 DOM。加载解析完样式表后再渲染出页面。文档中会加载 js，默认加载 js 的方式会阻塞浏览器解析 HTML，在浏览器渲染完body之前，页面都是空白，应该尽可能快地加载。

具体介绍参见：www.yuque.com/xiezhongfu/…

具体工作原理参见：www.html5rocks.com/zh/tutorial…

浏览器控制加载页面的不同资源的顺序，以 chrome 浏览器为例子，HTTP 1.1 限制了浏览器一个 TCP 最多6个请求。因此需要严格控制浏览器的请求，具体参见：www.yuque.com/xiezhongfu/…

使用 HTTP 2，浏览器可以只用一个 TCP 请求所有资源。

具体参见：www.yuque.com/xiezhongfu/…

HTTP 0.9/1.x/2 下层是TCP 参见：www.yuque.com/xiezhongfu/…

WebRTC 和 http3 的下层是 UDP，UDP 具体参见：www.yuque.com/xiezhongfu/…

我们应该尽快加载页面的可见部分(尽快加载自定义字体，图片；设置骨架图/转场动画；服务端渲染；HTTP 缓存/PWA/各层的缓存；CDN......)，并力争做到秒开。

后来在看 react 源码的时候注意到，其实用户对约 500ms 以内的延迟是看不见的，所以你打开把 500ms 作为你优化的标准。看 react 源码确实帮助了我很多，对源码注释的版本也即将开源，目前正在找人校对。到时候地址及时更新到这里

图像的渲染尽量不要用“背景图”，picture 标签了解下：developer.mozilla.org/zh-CN/docs/…

chrome 自定义字体加载的 API：developers.google.com/web/fundame…

了解下网络负载均衡：www.yuque.com/xiezhongfu/…

在 HTTP 2 下，浏览器怎么控制请求的优先级：calendar.perfplanet.com/2018/http2-…

结合 www.yuque.com/xiezhongfu/… 介绍的 singe-spa 元框架，把前端大应用拆分成小应用或者在大应用内部共存前端 react/vue/angular。是一个很好的优化策略。node 层接口聚合，采用 BFF 的方式，正在调研 serverless。计划基于 serverless 改造下前端开发模式。

最后贴上最近工作内容：www.yuque.com/xiezhongfu/…，求拍砖，学习，推荐工作。

转载于:https://juejin.im/post/5cf68586f265da1b934deeb7