前端 - 知识库 - 一个程序员的技能图谱

前端技能树

浏览器 BOM
- 浏览器兼容
- 页面渲染机制
- 浏览器缓存机制
- XMLHttpRequest、fetch
- Extension
- 路由 history & hash
- 本地存储
  - localStorage、cookie、indexedDB、Web SQL
- Web Workers
- Service Worker
- WebContainers
- PWA
- 离线存储 applicationCatch(即将废止)
- 通知 Notification
- 通信
  - Server-sent events
  - Web Sockets
JavaScript
- 基础
  - 数据类型、基础语法
  - 作用域、原型链、this
  - 面向对象、构造函数
  - 闭包
  - Event 事件
  - 单线程、异步队列列（工作线程）
  - AJAX、定时、事件回调
  - DOM 文档对象模型
  - BOM 浏览器对象模型
- ES6/ES7
- Node
  - 框架
  - 守护进程 pm2、forever、nodemon
  - Node DOM
  - Cluster
  - Node Redis
    - Node使用Redis
  - Puppeteer
    - https://blog.csdn.net/m0_54531505/article/details/114641645
    - https://www.r9it.com/20171106/puppeteer.html
  - 文件操作，加密 asar
- Deno
HTML
- 标准、语义化
- iframe、form(表单)
- SVG
- WebGL
- Canvas
  - 绘图 D3/Three.js
  - 游戏
- Media(媒体)
  - WebRTC
  - AudioContext
- MathML & latex
- SEO
CSS
- 选择器优先级
- 模块化、可伸缩
  - CSS Modules
- 预处理器
  - Sass ✔
  - PostCSS 通过配置插件实现 css 处理
  - Stylus
  - Less ✔
- framework
  - tailwindcss
- CSS 方法：BEM、SMACSS、OOCSS
- 盒子模型
- 浮动、定位
- 现代CSS：Flex、Grid
- 雪碧图 Sprite
- iconfont
- 重绘和回流
- 过渡、动画
框架、库、引擎
其他
- 性能优化
- 调试
- 代码跟踪、监控
- 无头浏览器 PhantomJS
- 测试
  - Unit testing
    - Karma, jasmine, Mocha + Chai, Jest
  - E2E testing
    - Cypress, Nightwatch, Spectron, Playwright
- graphQL
- JWT ✔
- 安全
  - XSS
构建工具
- 包管理 npm、pnpm、Bower、Yarn
- 实现一个脚手架
- webpack、Rollup、Parcel、tsup
- 效率插件 TSLint、ESLint
- 编译 Babel、tsc、esbuild、swc；插件 Autoprefixer
- Rollup 打包工具 rollup.js 入门教程
- FIS3
- Parcel
- gulp
- grunt
- Roadhog
  - 深入学习roadhog
跨终端
- webview（微信、Native）
- Electron
- uniapp
- Taro
- React Native、Weex、Rax、Ionic、Cordova、Dcloud、Instant、WeX5、WePY、mpvue、kbone、Mpx、Chameleon、megalo、OKAM、remax
其他开发工具
- IDE
  - VSCode、Cursor、trae、Atom、HBuilder、WebStorm、Sublime Text
  - 插件
- 版本管理语义化版本
  - git
    - GitHub Actions
- 调试
  - Charles、Fiddleer
  - apifox、postman、apipost
- 设计
  - PhotoShop、Sketch
  - 协作：蓝湖、Figma

何为前端

前端开发中的解决方案主要用于解决以下7个方面的问题：

DOM
Communication(通信)
Utililty(工具库)
Templating(模板集成)
Component(组件)
Routing(路由)
Architecture(架构)

页面渲染机制

页面渲染就是浏览器的渲染引擎将html代码根据CSS定义的规则显示在浏览器窗口中的过程。大致工作原理如下：

用户输入网址，浏览器向服务器发出请求，服务器返回html文件；

渲染引擎开始载入html代码，并将HTML中的标签转化为DOM节点，生成DOM树；

如果中引用了外部css文件，则发出css文件请求，服务器返回该文件；

如果中引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行；

渲染引擎继续载入html中的部分的代码，并开始解析前面返回的css文件，然后根据css选择器计算出节点的样式，创建渲染树；

从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标；

如果body中的引用了图片资源，则立即向服务器发出请求，此时渲染引擎不会等待图片下载完毕，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排版，因此引擎需要回过头来重新渲染这部分代码；

如果此时js脚本中运行了style.display=”none”, 布局被改变，引擎也需要重新渲染这部分代码；

直到为止，页面渲染完毕。

重绘和回流

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。

会引起重绘和回流的操作

添加、删除元素(回流+重绘)
隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
移动元素，比如改变top,left,transform的值，或者移动元素到另外一个父元素中。(重绘+回流)
对style的操作(对不同的属性操作，影响不一样) 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

Tips

在魅族pro5 webview 发现修改未在播放的音频的 currentTime 会立马触发播放，但是不触发onplay 事件

ios 部分手机，如果没有播放过，没法定位到音频的某个位置

playing 触发不一定立即开始播放（目前在iOS比较明显），所以如果要限定多久之后停止播放，在停止行为之前，应该判断当前时间是否真的到期（允许误差）。比如0.0000秒开始，5.0000秒后结束播放，在结束的时候看看当前时间是否超过了 4.9000

Safari 和 Chrome 解析音频时长不一样 https://stackoverflow.com/questions/20711488/html5-audio-tag-showing-wrong-duration-of-mp3-in-chrome

curl -i http://file.readingpro.cn/readingpro/book/pdf/Food%20from%20the%20Farm_4.pdf 阿里云oss，不同的网络请求，header不一样。

如何统一管理ajax失败？

慎用 window.open

window.open被vue路由拦截？

有的安卓机在 keydown实践中 return false 不能阻止输入

key = e.key || e.code.repace(/^Key/,'').toLowerCase() || keyCodes[e.keyCode] || keyCodes[e.which] 拼写输入的 key 是 undefined

iframe有那些缺点？

iframe会阻塞主页面的Onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO; iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

onKeyUp 好像一般不会 229，onKeyDown 会返回 229，例如中文拼写时等情况。拼写时不触发 onKeyPress

前端

Links

前端技能树

何为前端

页面渲染机制

Tips