search

chenfei-hnu / Blog

个人整理的跟前端相关的文档 ( This is some front-end development related documentation )
9 stars 2 forks source link

优秀技术贴收集 #52

Open chenfei-hnu opened 4 years ago

chenfei-hnu commented 4 years ago

1、资深技术Leader肺腑忠告:如何成为技术大牛?

2、P4-P7 的跨级瓶颈及如何有效突破

3、vite —— 一种新的、更快地 web 开发工具

4、一种高性能的Tree组件实现方案 5、动态加载js文件的正确姿势

6、如何为团队定制自己的 Node.js 框架？（基于 EggJS）

7、当表格排版遇到了合并单元格

8、Chrome 的调试技巧

9、替代 webpack？带你了解 snowpack 原理

10、前端精准测试探索：覆盖率实时统计工具

11、带你五步学会Vue SSR

12、5分钟看懂WebAssembly

13、A Complete Guide to useEffect

14、code-review之前端代码规范

15、如何选择 Git 分支模式

16、TypeScript 中高级应用与最佳实践

17、钉钉前端-如何设计前端实时分析及报警系统

18、前端国际化：自动管理工具

19、CSS变量对JS交互组件开发带来的提升与变革

20、HTTPS就安全了吗？会被抓包吗

21、Webpack 打包太慢？来试试 Bundleless

22、不走寻常路,CSS垂直居中的另类实现

23、精选大厂前端面试高频 100 题

24、为什么 setTimeout 有最小时延 4ms

25、还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下

26、Flex布局

27、前端项目开发规范意见

28、浅说虚拟列表的实现原理

29、十大经典排序算法

30、WEB前端安全自查和加固

31、JavaScript 核心概念之作用域和闭包

32、分享--node中的事件循环

33、TCP 的重传机制、滑动窗口、流量控制、拥塞控制

34、ESLint里的规则教会我，无规矩 不编程

35、高效软件开发团队的 4 个好习惯

36、多应用项目开发架构和多进程间构建优化分析

37、弄明白Deno与node的区别

38、puppteer ssr实践总结

39、前端错误监控指南

40、Web Worker 文献综述

41、初中级前端的高级进阶指南

42、一文入门DNS？从访问GitHub开始

43、一份值得收藏的 Git 异常处理清单

44、富文本编辑器初探

45、从敲下一行JS代码到这行代码被执行，中间发生了什么？

46、结构化的思考、做事、成长

47、彻底理解浏览器的Http缓存机制

48、git远程分支被删除恢复

49、从2.9秒到0.6秒，信息流首屏提效80%的秘诀

50、如何发现 GitHub 上的优质项目

51、 APNG 的格式分析，以及如何用 JS 解码与渲染

52、带你分析10 种跨域解决方案，及推荐的终极方案

53、Web 体验优化中和图有关的那些事

54、一文讲透 “进程、线程、协程”

55、JavaScript 启动性能瓶颈分析与解决方案

56、使用 react-docgen 自动生成组件文档

57、如何衡量前端工程质量？我们有了平台化的解决方案

58、前端应该知道的web调试工具——whistle

59、编写高质量可维护的代码之优化逻辑判断

60、React Hook 的体系设计之一 - 分层

61、Chorme 浏览器中的垃圾回收和内存泄漏.

62、tree shaking

63、页面通信懒加载，首屏加载时间及白屏时间计算等几个问题

64、flex 布局详解

65、前端后端运维

66、实用的web api

67、AST原理

68、Gitlab-ci: 从零开始的前端自动化部署

69、面向未来的前端构建工具-vite

70、 Chrome DevTools

71、HTTP keep-alive和TCP keepalive的区别

72、轻松玩转函数式编程

73、Animation动画技巧与细节

74、如何从 0 到 1 搭建性能检测系统

75、32份有关微服务、DDD与中台经典架构文档

76、如何有效地进行代码 Review

77、前端性能优化 24 条建议

分享文章 群内分享文章整理 1.关于浏览器是根据什么决定「from disk cache」与「from memory cache」

2.杂谈代码整洁 https://mp.weixin.qq.com/s/s_2dfOnMqND1qKjTfnmg5A

3.最近新出的vue脚手架create-vue https://mp.weixin.qq.com/s/ASEFCLh6gPuvjGilWe8RIw

4.前端相关的跨平台方案了解 https://juejin.cn/post/6966626823912308772

  1. HMR webpack热更新实现分析 https://juejin.cn/post/7022690123502321671

  2. 另外一种基于webpack5的微前端解决方案 - EMP https://github.com/efoxTeam/emp/blob/main/README-zh_CN.md

7.微前端框架EMP和qiankun，single spa的对比 https://juejin.cn/post/6911496724938752007

  1. 不推荐使用index作为key的原因分析 https://juejin.cn/post/7026119446162997261

  2. 搭建Vue3前端框架可以优化的一些方向 https://juejin.cn/post/7025524870842679310

  3. Vue3的组件重复渲染问题排查的思路 Vue3 子组件重复渲染问题排查

  4. 前端所有UI组件库 https://www.yuque.com/u1003394/fn574a/wg59gc

  5. 很多大厂项目UI交互设计相关的总结，比较适合UI、交互、产品看 https://www.yuque.com/weijin_is_wiki/ykf0s9

13.Edge 联动 VSCode https://mp.weixin.qq.com/s/-4lcQYZQHuezT7pypG9AYQ

  1. el-table二次封装 https://juejin.cn/post/7025627462608355358 https://juejin.cn/post/7007693292825477128 上面这个对多表头自定义表头都有处理，自定义内容写法也很简单，比较完整的二次封装 下面这个是用slot和template处理自定义内容的实现，比较简单的二次封装

  2. 如何通过调试器Performance页面查看查看页面性能 https://www.yuque.com/yixuan-vgm3v/kwbda0/wqyusl

  3. vue3 中使用mitt进行事件发布订阅及其源码解析 https://www.yuque.com/istao/blog/ngsvwi

  4. Vue2.X 3.0 3.2各版本的组件通信方式汇总 https://juejin.cn/post/6999687348120190983

  5. PostCSS https://segmentfault.com/a/1190000014782560

  6. vue3 和 vue3.2的两个githubg高星的管理系统例子 https://github.com/newbee-ltd/vue3-admin https://github.com/xiaoxian521/vue-pure-admin

  7. vue3的最新动态和相关的知识链接 https://github.com/vue3/vue3-News

  8. 低代码平台 http://www.jeecg.com/#

  9. 打造自己的Vue组件文档生成工具 https://www.cnblogs.com/nextl/p/15121136.html

  10. 抖音的国际化方案 https://mp.weixin.qq.com/s/tPT3qCDJaLUNACU_GMm9HA

24.介绍chrome CSS Overview Panel的功能 https://juejin.cn/post/7020968058139181069

  1. 一篇比较全的typescript相关知识的文章 https://juejin.cn/post/7031787942691471396

  2. 前端中几种规范格式化代码的方式，包括评论里面提到的 https://juejin.cn/post/7023529741248364580

  3. 前端中如何实现录屏功能 https://juejin.cn/post/7028723258019020836

  4. 微软开发的vscode插件用来替代注释更好的动态展示代码执行流程及逻辑开发思路 https://mp.weixin.qq.com/s/55snlZvRuxD4xS_KZPVZYA

  5. 头条的Semi Design用来管理项目的颜色，圆角，组件等产品设计规范 https://juejin.cn/post/7023260926963318820

  6. css种content的多种用法 https://juejin.cn/post/7030806479212904456

  7. 前端导出excel https://juejin.cn/post/7030291455243452429

  8. 使用localStorage时需要注意的一些问题 https://juejin.cn/post/7033749571939336228

33.vue 中 tsx的用法 https://www.w3cways.com/2411.html

  1. Vue Hook的使用及于React Hook的对比 https://juejin.cn/post/6844904132109664264

35.程序员副业 - 公众号和面试辅导，赚钱的同时保持市场竞争力

36.ts中命名空间的相关知识 https://juejin.cn/post/6844903921031479309

  1. 使用promise的几种错误示范 https://juejin.cn/post/7034661345148534815

38.非常炫的CSS边框 https://juejin.cn/post/7029468162462580750

39.列举对象结构和函数解构的各种用法 https://juejin.cn/post/7026495227112194062

41.Vue3.0死循环问题 接口返回的表格数据中包含了一个未处理的数组类型导致死循环，接口突然调整了数据变更导致

42.快速删除node_modules 打开根目录所在文件夹，在地址栏输入cmd，回车弹出cmd窗口

执行 rd/s/q node_modules 命令删除node_modules

43.一个比较全的webpack配置介绍 https://juejin.cn/post/7038433081526583310?utm_source=gold_browser_extension

  1. element里面一些视图组件的使用问题总结 https://juejin.cn/post/7017957779176423454

45.如何进行JS任务的分批处理 比如有一个几十万条数据的列表，一次性渲染肯定会卡顿，或者空白显示很长时间，如果通过JS的分批处理进行渲染 使用requestAnimationFrame将数据分批填充进待渲染的数据

  1. 阿里的一个流程图组件库 https://github.com/alibaba/butterfly

47.vue中使用element组件时事件想要传递其他参数的问题 https://www.cnblogs.com/ttjm/p/11536788.html

  1. 实习期间可能学习技术并不是最主要的，可能如何适应职场环境，学会如何正确的表达自己更重要 https://juejin.cn/post/6964987018677862436

  2. 移动端调试方法介绍 https://juejin.cn/post/7041049806562656293?utm_source=gold_browser_extension

  3. Vue3.2相对3.0的语法区别 https://juejin.cn/post/7041038709906472974?utm_source=gold_browser_extension

  4. 一个webpack5+qiankun的问题解决，及部分基础原理介绍 https://juejin.cn/post/7021334808144019492

  5. 前端打断点的几种方式 https://juejin.cn/post/7041946855592165389?utm_source=gold_browser_extension

  6. vite的生态及现状 https://juejin.cn/post/7042241755265269768?utm_source=gold_browser_extension

54.一个用vue3 Composition API语法写的按需加载组件库 Hello @idux, 一个全新的 vue 3.x 组件库来了 - 掘金

55.VSCode 快速生成自定义代码模板 前端提升开发效率之vsCode 快速生成自定义模板

56.使用Web Components开发跨前端框架的组件 https://juejin.cn/post/7044055764532461605?utm_source=gold_browser_extension

57.使用monorepo的开发模式将各自独立的项目变成一个统一的工程整体 https://juejin.cn/post/7043990636751503390?utm_source=gold_browser_extension

58.一种前端中使用图标库的方式 https://juejin.cn/post/7043981084857466893?utm_source=gold_browser_extension

59.webpack对于splitChunks拆包的使用解析 https://juejin.cn/post/7044339681135329294?utm_source=gold_browser_extension#heading-0

60.element 更改时间选择器的图标及位置 https://juejin.cn/post/7021324324325851149

61.文章的博主里面还总结了很多Vue element编码过程中的实际问题 https://juejin.cn/user/1406974769508679/posts

62.three.js的一个比较好游戏案例 https://www.kodeclubs.com/

63.移动端扫码实现 https://juejin.cn/post/7018722520345870350

64.position:sticky 粘性定位的几种应用场景 https://juejin.cn/post/6953145161895378951

65.西安一码通崩溃中可以总结出哪些前端性能优化措施 https://juejin.cn/post/7044758038858694687?utm_source=gold_browser_extension

66.基于前端表格导出excel，10W 条数据 耗时 4s 左右 https://juejin.cn/post/7044756905884909598?utm_source=gold_browser_extension

67.通过JS判断字体大小，中英文字符宽度写的截取字符串拼接...的实现 https://juejin.cn/post/7044731185889001503?utm_source=gold_browser_extension

68.前端中如何实现AI的目标检测，实现类型找出图片中人像，二维码的功能 https://juejin.cn/post/7044717306823311368?utm_source=gold_browser_extension

69.2021前端大事记 https://juejin.cn/post/7046206863897002014?utm_source=gold_browser_extension

70.Vue项目中如何做到修改代理地址不重启本地项目 在vue中修改代理地址不用重启项目 - 掘金

71.分分钟清除项目中无用的console.log代码 https://mp.weixin.qq.com/s/QcZ5Ki8Jm6PdNNudCR2JPA

72.React 原理之一的前端不可变数据 不可变数据实现-Immer.js - 掘金

73.前端WEB APP开发的框架对比 https://juejin.cn/post/7047465569255161864?utm_source=gold_browser_extension

74.Babel在不同项目场景下的应用 https://juejin.cn/post/7051355444341637128?utm_source=gold_browser_extension

  1. Babel在不同项目场景下的应用 https://juejin.cn/post/7051270083535962142?utm_source=gold_browser_extension%20%20%E9%81%BF%E5%85%8D%E5%95%86%E4%B8%9A%E6%8E%88%E6%9D%83%E7%9A%84%E5%85%8D%E8%B4%B9%E5%9C%B0%E5%9B%BE%E5%BA%94%E7%94%A8

76.大文件断点续传的前端方案 难点:大文件上传、断点续传 - 掘金

  1. 部分前端编码细节问题 https://juejin.cn/post/7052570403029385253?utm_source=gold_browser_extension

  2. 为什么 Promise 比 setTimeout() 更快，前端事件循环中工作队列和任务队列 https://juejin.cn/post/6923042090397990919

  3. 2022前端技术热点 https://juejin.cn/post/7054463941065310245?utm_source=gold_browser_extension

  4. 共享Vscode setting.json及插件配置 https://juejin.cn/post/7054457970284838948?utm_source=gold_browser_extension

  5. ts时代的Vue全局状态管理Pinia.js及其数据持久化 https://juejin.cn/post/7049196967770980389

  6. d3.js部分概念及用法介绍的文章 https://juejin.cn/user/3175045314389278/posts

  7. css calc表达式中为什么前后需要用空格隔开 https://juejin.cn/post/7055169229980434462?utm_source=gold_browser_extension

  8. 使用设计模式改造请求拦截 https://juejin.cn/post/7055149674650402824?utm_source=gold_browser_extension

  9. 防御式CSS提升页面交互体验 https://juejin.cn/post/7056925805976223751?utm_source=gold_browser_extension

  10. 组件递归实现树结构 https://juejin.cn/post/7056922161788747789?utm_source=gold_browser_extension

  11. webpack5的相关基础知识和应用场景解析 https://juejin.cn/post/7062899360995999780?utm_source=gold_browser_extension

  12. 前端鉴权的各种解决方案 https://juejin.cn/post/6898630134530752520

  13. 数组api array.flatMap解析 https://juejin.cn/post/7057313952031571999

90.10个CSS技巧，极大提升用户体验 - 掘金 https://juejin.cn/post/7062860159286149127

91.淘宝npm域名改动影响

老淘宝 npm 镜像域名即将停止解析，记得换！ https://zhuanlan.zhihu.com/p/465424728 https://zhuanlan.zhihu.com/p/430580607

要点总结如下：

  1. 淘宝 NPM 镜像站品牌升级，新品牌为 npmmirror （NPM 中国镜像站）。
  2. 广为人知的淘宝 NPM 镜像老域名（*.npm.taobao.org）将在 2022.06.30 号正式下线和停止 DNS 解析。
  3. 涉及到的域名迁移如下： 
    
http://npm.taobao.org/
=> 
http://npmmirror.com/

http://registry.npm.taobao.org/ => http://registry.npmmirror.com/


4. 可能产生的大影响：
简而言之，所有写死的都得换。
企业用户需要联系 网管/IT/SRE 更新防火墙白名单。
存量应用的 lock 文件，开发者需要自行执行 sed 等指令去替换或重新生成。
本地 npmrc 里面的 registry 地址（如果有，则）需要开发者自行更新。

92. es6代码简洁优化
https://juejin.cn/post/7063386798403584008?utm_source=gold_browser_extension

93. ts 里面 type和interface的区别
https://juejin.cn/post/7059725643365220366?utm_source=gold_browser_extension

94. 对象属性相关的几个JS api，以及如何判断对象为空
https://juejin.cn/post/7064158174579949576?utm_source=gold_browser_extension