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

时间 2019-11-26

标签前端应用优化使用基础知识繁體版

原文原文链接

原文地址：css

www.yuque.com/xiezhongfu/…html

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

文中有些连接虽有导流嫌疑，仍是建议看一看vue

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

工具链优化

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

应用优化

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

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

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

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

使用 HTTP 2，浏览器能够只用一个 TCP 请求全部资源。web

具体参见：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/…，求拍砖，学习，推荐工做。