编程(code) on lategege 的技术博客

Next.js 三种网页处理方式

Mon, 08 Apr 2024 03:05:20 +0000

我看到很多文章提到Next.js的三种所谓渲染方式，如下：

客户端渲染 BSR (Broswer Side Render)
静态页面生成 SSG (Static Site Generation)
服务端渲染 SSR (Server Side Render)

我对此不敢苟同，渲染一词随意滥用分明在误导初学者，我们所认知的那个渲染是将图形信息展示到屏幕上，所以何来服务器渲染一说？服务器能控制客户端的GPU、CPU来进行图形绘制？简直瞎搞! Render一词在React框架中根本不是这个意思。React或者Next.js所谓的Render只不过是生成html标记语言，而不是所谓中文意义上的渲染，虽然Render翻译过来是渲染，但是此Render并非GPU那个Render，这一点很重要。如果简单理解为服务器渲染会让初学者觉得非常困惑。

所以渲染从来都是客户端的事情，和服务端没有任何关系。

客户端渲染，BSR，它的意思就是客户端自己执行JS去处理完善html,然后由引擎根据html、css来生成dom树，css树，接着才是由cpu或者gpu根据dom树来渲染到屏幕，所谓白屏就是指客户端在载入不完整的带有js脚本的html文件时，下载和加载js所需要的时间，在这段时间内数据还没到达所引发的页面空白，所以~~客户端渲染~~我觉得应该改为客户端加载比较恰当。
静态页面生成，就是字面意思，客户端请求完整的不带动态请求数据js的静态页面，当然一些交互肯定需要js来处理，所以这里是不带动态请求数据的js。
~~服务端渲染~~ 服务器无法渲染页面到屏幕，这个说法严重误导初学者，这里改为服务器加载比较贴切，所谓服务器加载，就是把本来客户端js要干的事情放在了服务端，本来客户端向服务端请求一个不完整的html页面和带有动态请求数据的js，然后加载js请求数据形成完整的html页面，然后渲染。服务器加载就是客户端直接向服务端请求一个完整的html页面，不需要在客户端本地执行js来异步获取数据，相当于html是一步到位的，所谓没有白屏就是因为一步到位而非多次获取带来的效率上面的提升。绝对没有白屏是不现实的，网络必然会有延迟，当你请求html慢的时候你页面必然会loading。

所以没有所谓的服务器渲染，如果生成html叫做渲染的话那就太可笑了，html只是一种标记语言，它离渲染差十万八千里！

npm npx cnpm yarn pnpm nodejs包管理乱局

Sun, 07 Apr 2024 10:50:53 +0000

对于前端项目如vue、react大多由nodejs环境来构建编译，事实上，nodejs做的事就是将vue、react代码翻译成html,css,js，浏览器最终也只能运行html,css,js，随着nodejs版本的演进，包管理可谓是一团乱麻。作为一名资深工程师，有时候避免不了跑跑前端开源项目，但是一直非常困惑，这个项目用npm,另一个项目用yarm，别的又用了其他，这尼玛变来变去，花样太多了，我觉得本质上就是一开始包管理器没有设计好，java有maven、gradle ，python 有 pip，go 有mod，rust 有cargo,从没听说包管理器名字都换了- -！

面对这乱局，偶尔会接触前端项目的我，也只能水一篇文章了，也方便后期查阅，因为实在记不住~

npm: nodejs官方包管理器,默认从官网下载https://www.npmjs.org/ npx: nodejs 执行器，本质就是npm run,执行方便而已 cnpm: 本质和npm一样，只是包会从国内仓库下载 yarn:相对于npm有性能优化，包管理扁平化，而不是嵌套依赖。 pnpm:更进一步的磁盘占用优化，通过软硬连接管理，同时会有差分管理，下载更新速度快，节省磁盘空间。

特征/工具	npm	Yarn	cnpm	pnpm	npx
时间	2010	2016	未知	2016	2017
特点	Node.js的官方包管理器，广泛使用。支持大量包和版本，易于入门。	由Facebook开发，注重速度和包的稳定安全。使用锁文件确保依赖一致性。	针对中国开发者的npm镜像，提高在中国大陆地区的访问速度和安装效率。	侧重于性能和空间节省，通过硬链接和符号链接来重用包，减少冗余。	npm的包运行器，允许直接执行npm仓库中的包而不需要全局安装。
性能对比	标准基准，较慢	相对更快，通过并行下载和更好的缓存管理优化性能	依赖于npm，性能提升主要来源于镜像的使用	在多项目中重用包，节省空间和安装时间，性能优异	适用于执行单次任务，避免全局安装，性能取决于npm

使用说明/工具	npm	Yarn	cnpm	pnpm	npx
安装包	`npm install package_name`	`yarn add package_name`	`cnpm install package_name`	`pnpm add package_name`	-
安装特定版本包	`npm install package_name@version`	`yarn add package_name@version`	`cnpm install package_name@version`	`pnpm add package_name@version`	-
全局安装包	`npm install -g package_name`	`yarn global add package_name`	`cnpm install -g package_name`	`pnpm add -g package_name`	-
更新包	`npm update package_name`	`yarn upgrade package_name`	`cnpm update package_name`	`pnpm update package_name`	-
卸载包	`npm uninstall package_name`	`yarn remove package_name`	`cnpm uninstall package_name`	`pnpm remove package_name`	-
列出已安装包	`npm list`	`yarn list`	`cnpm list`	`pnpm list`	-
运行脚本	`npm run script_name`	`yarn run script_name`	`cnpm run script_name`	`pnpm run script_name`	`npx script_name` (执行项目中或远程的npm包命令)
创建项目	`npm init` 或 `npm init project_name`	`yarn init` 或 `yarn create project_name`	`cnpm init` 或 `cnpm init project_name`	`pnpm init` 或 `pnpm create project_name`	-
查看包信息	`npm view package_name`	`yarn info package_name`	`cnpm view package_name`	`pnpm info package_name`	-

官方文档： npm: https://docs.npmjs.com/ Yarn: ttps://classic.yarnpkg.com/en/docs cnpm: 和npm一致 pnpm: https://pnpm.io/ npx: npm文档中包含npx使用说明

git常用命令大全

Mon, 04 Jul 2022 13:01:40 +0000

一、配置用户名、邮箱
git config --global user.name "late"
git config --global user.email "late@lategege.com"

二、查看配置信息、配置本地git config、配置全局git config
git config --list
git config -e
git config -e --global

三、将当前目录用作git仓库、使用指定目录用作git仓库
git init
git init 目录名

四、添加文件到git仓库
git add . //所有文件
git add *.java //所有java文件
git add xx.java //指定java文件

五、提交修改至本地git仓库
git commit -m '描述信息'

六、克隆远程仓库、克隆到指定目录
git clone http://xxxxxx/xxx.git
git clone http://xxxxxx/xxx.git 目录

七、查看仓库当前的状态，显示变更文件
git status

八、比较不同的文件
git diff

九、回退版本
git reset --hard 提交hash码

十、将文件从暂存区和工作区删除 、恢复删除文件
git rm
git restore ./

十一、移动或重命名工作区文件
git mv

十二、查看提交日志
git log

十三、以列表形式查看历史修改
git blame 文件名

十四、获取更新
git fetch

十五、拉取并合并
git pull

十六、推送并合并
git push 远程主机名 本地分支名:远程分支名 (本地远程名称一致可省略)

十七、创建分支
git branch 分支名

十八、切换分支
git checkout 分支名

十九、合并分支
git merge 分支名(分支名为要将哪个分支合并到当前分支)

二十、查看分支
git branch //本地
git branch -a //所有
git branch -r //远程

二十一、有冲突合并处理:
git add 文件名、git status -s 、git commit

二十二、打标签、查看标签、用log查看标签、带标签信息打标签
git tag -a v1.0
git tag
git log --decorate
git tag -a xxxxx -m 'xxxxxxx'

程序员的内功修炼

Wed, 15 Jun 2022 11:42:48 +0000

做了很多年移动开发，有时候也会疲倦，当你一遍又一遍的写着业务代码的时候，你会发现自己很孤独，你就像站在了一座小岛上，岛屿周围都是迷雾，看不清周围的全貌，这个时候就该想想，我会一辈子困在岛上吗？面对浩如烟海的计算机知识，完成业务对自身技术水平提升非常有限，面对这种状况，如果你还想一辈子干下去，必然就要抱着终生学习的心态来思考。

很多人尤其是学历没那么好的，没有名校光环，有的时候会妄自菲薄，我觉得大可不必，无论你是哪所学校毕业的，你的学历如何？既成事实的事情没有办法改变，你的抱怨不能将现状变好，反过来如果你用心去学习，别去考虑以后，只要踏实做好当下，我始终相信量变会达到质变，学历不好又怎么样？不是名校又如何？王侯将相宁有种乎？世界上哪来那么多天才，大家智商都差不多，千万别把自己看低了，把别高看别人，你学习知识根本不需要通过学历去证明，现在互联网不像以前，如今的网络能找到全世界最好教师的课程，有最牛老师出的书籍，跟着他们学，不必顾及以后，不要顾及你的付出是否有回报，不要抱怨社会不公，以后的事情自然而然会是你理想的样子。

作为程序员而不是码农，我觉得内功修炼分为三大块，第一块是算法与数据结构，第二块是计算机操作系统与计算机组成原理，第三块是网络。

其中算法与数据结构是重中之重，程序员首要任务就是编程，编程能力的高低表现在你写出的程序是否具备优秀的性能，时间和空间复杂度是否满足或超出当前需求。这种能力的提升只有一个字，练！没有其他任何捷径可走。或许你会觉得算法有个毛用，如果你对自己的定位是码农确实没用，任何优秀的软件或者开源项目乃至操作系统本身底层全部都是算法与数据结构，或许你觉得算法与数据结构对眼前工作没什么帮助，公司也不要求你掌握这方便知识，但是你自己必须励志成为一个优秀的软件工程师，你的待遇，你的前途都是建立在你足够优秀的基础上，你或许会觉得国内大环境不好，都是cv战士，如果是这样，别在意别人，和你自己比，换个角度站在国家民族的高度上去看这个问题，我们国家在基础软件方面严重落后，大环境都喜欢赚快钱，没有沉淀，但是现在国家已经意识到问题的严重了，所以作为个人更应该去准备应对未来，知识与技能的学习没有尽头，学习算法数据结构前期推荐书籍《算法4》、推荐视频课程是左程云的数据结构算法课，不用看其他的，只要你吃透它们，任何算法面试都不会有问题，不过满足工作需要就结束了吗？未必，如果有志自研算法，深入研究的话，推荐《算法导论》和配套麻省理工大学配套视频课程，如果书中知识理解困难就去补对应的课，怕个啥，就算你高中毕业那又如何？你又不需要向这本书、这套视频课程去证明你的学历，哪个不会就突破哪个，终生学习就意味着学无止尽，没念过高等数学就不能学了吗？看不懂不能想办法看懂吗？一遍不行两遍，两边不行三遍，要有愚公移山的精神，没人规定只有博士才能看算法导论，普通人一样可以，知识装在脑子里才是自己的，写不写paper对于存在于你脑海中的知识没有任何影响。

计算机操作系统与计算机组成原理，推荐《深入理解操作系统》这本书，B站也有配套的作者视频课程。操作系统的重要性不言而喻，理解操作系统底层原理能让你写出更健壮的代码，考虑问题直接上升一个层次，比如嵌套循环遍历矩阵，如果你学过系统内存空间分配原理，你就知道行优先遍历比列优先遍历在性能上优秀好几倍，如果你知道每个基本数据类型所占字节数，再结合实际问题就能预判系统数据溢出的可能性。知道计算机编程语言的每个符号在计算机底层的运作机理有助于开发更优秀的软件，甚至具备开发操作系统的能力。

计算机网络，推荐《计算机网络教程自顶向下方法》《TCP/IP详解》卷一、卷二、卷三。现在开发程序基本不再是单机软件了，计算机网络相关知识在现在乃至将来都非常重要，从理论的七层网络模型，再到实际的各层次的协议，从ip报文经过层层网关到达世界的另一端，无数个比特在各种底层网络系统中来回穿梭，为什么端口是16位的？为什么ipv6地址取之不尽？为什么有了TCP还要设计UDP？tcp握手挥手为什么要这么设计？https如何保证安全？很多网络知识都能从这些经典书籍中找到答案，学习计算机网络知识能让你了解数据在网络世界之间是怎么传递的，在开发设计与网络相关的产品中，会更加注重诸如网络延迟、网络安全、高并发、高可用等性能与指标。

以上是我总结的程序员需要修炼的三大方面内功，这些内功无论哪一个都胜过无数个外功，那些个编程语言的设计开发者、操作系统的开发者、芯片的设计者、著名开源框架的开发者，哪个不是内功高手，内功高手创造外功招式，让码农们依照他们的招式来练武，芯片设计出来，芯片所有引脚的含义也出来了，芯片内部就是黑盒，你不用关心，嵌入式程序员必须按照他们的文档来操作对应的寄存器，这能说明底层嵌入式开发很高深吗？springboot开发者指定你必须使用java开发语言，按照我的套路来开发。微软操作系统规定可执行文件叫exe，动态库名称必须以dll结尾。学人工智能来python这，这里汇聚了很多数学大牛开发了很多ai相关api。音视频编解码领域，几乎所有的软件解码都基于ffmpeg。随着时间的推移，新的语言，新的框架层出不穷，golang、docker、k8s，新语种让程序员一行顶旧语言几行，效率是提升了，可人也变傻了，变聪明的永远是语言的创造者，编译器的发明人。当你在争论哪种编程语言世界第一，别人在创造更加优秀的语言，docker、k8s让人也变懒了，方便易用的事物底层其实全部都是最本质的东西，只要计算机还是二进制，这些东西不会改变，而如果在新框架、新语言这些表层工具的使用上花费大量时间，将会得不偿失，因为你不是制定规则的人，所以努力让自己成为具备制定规则能力的人才是程序员这一辈子所要追求的。