前端

前端技能树

前端基础
├ HTML
┊ ├ 标准、语义化
┊ ├ iframe、form(表单)
┊ ├ Media(媒体)
┊ ┊ ├ [WebRTC](https://github.com/RTC-Developer/WebRTC-Documentation-in-Chinese)
┊ ┊ └ AudioContext
┊ ├ [history & hash](https://www.cnblogs.com/tugenhua0707/p/10859214.html)
┊ ├ Canvas
┊ ┊ ├ 绘图 D3/Three.js
┊ ┊ └ 游戏
┊ ├ SVG
┊ ├ WebGL
┊ ├ 通信
┊ ┊ ├ Server-sent events
┊ ┊ └ Web Sockets
┊ ├ 本地存储
┊ ┊ └ localStorage & cookie websql indexedDB
┊ ├ [离线存储 applicationCatch(即将废止) ](https://www.cnblogs.com/wuzhiquan/p/4844258.html)
┊ ├ Web Workers
┊ ├ WebContainers
┊ ├ MathML & latex
┊ └ SEO
┊
├ CSS
┊ ├ 选择器优先级
┊ ├ 模块化、可伸缩
┊ ┊ └ [CSS Modules](https://www.ruanyifeng.com/blog/2016/06/css_modules.html)
┊ ├ CSS 预处理器 ★
┊ ┊ ├ Sass ✔
┊ ┊ ├ PostCSS
┊ ┊ ├ Stylus
┊ ┊ └ Less ✔
┊ ├ CSS 方法：BEM、SMACSS、OOCSS
┊ ├ 盒子模型、Flex
┊ ├ 浮动、定位
┊ ├ 现代CSS：Flex、Grid
┊ ├ Sprite(雪碧图)
┊ ├ iconfont(字体图标)
┊ ├ 重绘和回流
┊ └ 过渡、动画
┊
└ JavaScript
├ 基础
┊ ├ 数据类型、基础语法
┊ ├ 作用域、原型链、this
┊ ├ 面向对象、构造函数
┊ ├ 闭包
┊ ├ Event 事件
┊ └ 单线程、异步队列列（工作线程）
┊   └ AJAX、定时、事件回调
├ ES6/ES7 ★
┊ └ 扩展、新特性
├ [Node](https://www.liaoxuefeng.com/wiki/1022910821149312/1023025235359040) ★
┊ ├ Web框架
┊ ┊ ├ Express、Koa
┊ ┊ └ [Egg](https://eggjs.org/zh-cn/core/cluster-and-ipc.html) ★
┊ ├ 守护进程 pm2、forever、nodemon
┊ ├ [Node DOM](https://github.com/fgnass/domino)
┊ ├ [Cluster](https://cnodejs.org/topic/56e84480833b7c8a0492e20c)
┊ ├ [Node Redis](https://github.com/NodeRedis/node-redis)
┊ ├ [Node使用Redis](https://zhuanlan.zhihu.com/p/96762107)
┊ ├ Puppeteer
┊ ┊ ├ <https://blog.csdn.net/m0_54531505/article/details/114641645>
┊ ┊ └ <https://www.r9it.com/20171106/puppeteer.html>
┊ └ 文件操作，加密 asar
├ Deno
└ Web API
├ Notification 通知
├ Storage 存储(localStorage/sessionStorage)
├ XMLHttpRequest
├ Service Worker ★
├ DOM 文档对象模型
└ BOM 浏览器对象模型

跨终端
├ 移动端
┊ ├ H5场景动画
┊ ├ webview（微信、Native）
┊ ├ [Flutter](https://flutter.dev/docs/get-started/install/macos) ★
┊ ┊ ├ Fuchsia
┊ ┊ └ Dart
┊ ├ 微信生态
┊ ┊ ├ 小程序
┊ ┊ ├ 微信登录、JSSDK
┊ ┊ └ 微信支付
┊ ├ uniapp ✔
┊ ├ [Taro](https://nervjs.github.io/taro)
┊ └ 其它多端框架
┊   └ React Native、Weex、Rax、Ionic、Cordova、Dcloud、Instant、WeX5、WePY、mpvue、kbone、Mpx、Chameleon、megalo、OKAM、remax

工具
├ Task & Build 构建工具
┊ ├ 包管理 npm、Bower、Yarn - <https://yarn.bootcss.com/docs/migrating-from-npm.html>
┊ ├ 自动化 & 脚手架
┊ ┊ ├ [Roadhog](https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md)
┊ ┊ ┊ └ [深入学习roadhog](https://blog.csdn.net/qq_41609775/article/details/103162499)
┊ ┊ ├ [实现一个脚手架](https://segmentfault.com/a/1190000015222967)
┊ ┊ ├ [gulp](http://javascript.ruanyifeng.com/tool/gulp.html)
┊ ┊ └ grunt
┊ └ 模块化
┊   ├ webpack ★
┊   ├ Rollup ★ [打包工具 rollup.js 入门教程](https://www.ruanyifeng.com/blog/2022/05/rollup.html)
┊   ├ FIS3
┊   └ Parcel
├ 编译
┊ └ Babel @babel/preset-env 和 Autoprefixer ★
├ 代码跟踪
┊ └ Sentry
├ Linter(代码检查)
┊ └ TSLint, ESLint ...
├ Unit testing(单元测试)
┊ └ Karma, jasmine, Mocha + Chai, Jest ... ★
├ E2E testing - <https://juejin.im/entry/589d6f072f301e0069bda275>
┊ └ Cypress, Nightwatch, Spectron, Playwright ... ★
├ 调试工具
┊ ├ WebView 调试
┊ ├ Chrome Dev Tool
┊ └ Charles、Fiddleer
├ IDE
┊ └ WebStorm、Sublime Text、VSCode、Atom、HBuilder
├ 版本控制 - <https://semver.org/lang/zh-CN>
┊ └ Git、SVN
├ Git
┊ └ GitHub Actions <https://www.likecs.com/show-130250.html> <https://blog.51cto.com/u_11711012/4908018> <https://docs.github.com/cn/enterprise-server@3.5/actions/quickstart>
└ 切图
├ UI 协作工具: 蓝湖
└ PS、Sketch

其他
├ 性能优化
┊ └ [Lighthouse](https://github.com/GoogleChrome/lighthouse) ★
┊   └ Lighthouse集成CI：<https://github.com/GoogleChromeLabs/lighthousebot> 还有<https://github.com/GoogleChrome/lighthouse-ci>
├ [graphQL](https://graphql.cn/learn/) ★
├ PhantomJS
├ [JWT](https://www.cnblogs.com/tugenhua0707/p/10089894.html) ✔
├ 浏览器
┊ ├ Extension
┊ ├ 浏览器兼容
┊ ├ 页面渲染机制
┊ ├ 浏览器缓存机制
┊ └ 路由
├ PWA ★
└ XSS ✔

何为前端

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

  1. DOM
  2. Communication(通信)
  3. Utililty(工具库)
  4. Templating(模板集成)
  5. Component(组件)
  6. Routing(路由)
  7. 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

即使浏览器窗口在非激活状态（或者最小化）也让setTimeout、setInterval有效不休眠——Web Workers

在魅族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

更新时间：2025-03-13 13:01:32