hockor的博客

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。如果您有好的内容，我们诚挚的欢迎您的投稿。如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~【技术研究】1、边缘渲染提速随着边缘计算的发展，由于CDN节点距离用户更近，有更短网络延时的优势，我们可以将页面进行动静拆分，将静态内容缓存在CDN先快速返回给用户，然后在CDN节点上发起动态内容的请求，之后将动态内容与静态部分以流的形式进行拼接，从而进一步提高了用户的首屏加载..

你好，我是 hockor，在上一篇文章中我们讲了如何画好架构图，作为一个程序员，在工作中我们还会接触到很多的流程图，所以这一次我们就来聊聊工作中常见的流程图的绘制，帮助你更好的看懂和绘制流程图。什么是流程图流程图 = 流程 + 图。它是以特定的图形符号加上说明，表示算法的图，通常是用来表示流经一个系统的信息流、观点流或部件流的图形代表，流程图通常以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接。流程图的核心就在于如何排布事物进行的次序，不同的顺序可能造成截然不...

你好，我是 hockor，作为软件开发者，我们在工作中难免要画很多的架构图，但是很多人对于如何去画架构图其实是很模糊的，有那么多种类型的图，我们究竟该选哪个，用应该怎么画呢？今天我们一起来看看这个问题。什么是架构图在谈什么是架构图之前，我们先来聊聊什么是架构。软件架构指的是软件系统的顶层设计（Rank），它定义了系统由哪些角色（Role）组成，角色之间的关系（Relation）和运作规则（Rule），如下图所示。再回到我们的问题，到底什么是架构图，从字面意思上来讲，架构图 = 架构 + 图，它是.

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。如果您有好的内容，我们诚挚的欢迎您的投稿。如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~【技术研究】不用任何框架开发 Web 应用程序，可能吗？过去的很长一段时间，我们使用过各种框架 jQuery、 Ember、Backbone、 Angular、React、Vue.js …，经历了很多框架的崛起和跌落，多样的框架也给开发人员学习抉择和技术选型带来些许困惑。我们是..

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。如果您有好的内容，我们诚挚的欢迎您的投稿。如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~【技术研究】一文彻底搞懂前端沙箱沙箱，也称为沙盒/沙盘，是一种安全机制，为运行中的程序提供隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。本文讲解了前端和 Node 领域的沙箱实现原理。原文地址深入浅出前端监控本文讲解了前端监控中的各项指..

你好，我是 hockor，周末抬头看了一眼日历，发现明天竟然是自己入职阿里的一周年之际，所以借着这个机会，我想跟你一起来聊聊如何快速的融入一家新公司，其中很多的内容都是我自己的后知后觉，做为一个程序员，本着『复盘』的原则，今天对这个话题做出一些自己的总结，希望这些内容能对你日后有所帮助。btw： 首先做一个提前说明，本文针对的对象是一线开发者，并不针对空降的 TL等管理者。前言去年从杭州回到了成都，我离开了工作了近 6 年的网易，和很多每 2-3年就换一次工作的朋友相比，可能我因为太多年没有换过工作.

你好，我是 hockor，最近正值春招的好时节，各个面试官都奔忙在面试的过程中，曾经我也是一名面试官，也经历了很多次的春招秋招和日常社招，所以今天我想站在自己的角度来谈谈面试这件事，谈谈如何在面试中更好的找到自己想要的人才，避免在面试中看走眼。首先做为一位应聘者，在最近这几年应该是比较开心的，因为网上有太多的面经，一般来讲如果你面试前花几个月时间突击一下，很多的普通公司是非常容易进去的，而对于一位面试官，如果你面试前没有充足的准备的话，很可能会在面试过程中被应聘者滔滔如流水般的回答牵着鼻子走，结果可能你.

你好，我是 hockor，继上一篇如何打造良好的分享氛围后，很多小伙伴问我分享的时候到底应该怎么做才能达到好的现场效果，我寻思这还算个问题？这不就是坐那儿讲吗？小伙伴给了我这么个表情🙄，所以呢，今天这篇文章我们来聊聊如何才能做好一次技术分享。

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。如果您有好的内容，我们诚挚的欢迎您的投稿。如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~【技术研究】1、Web 中的“选区”和“光标”在 web 开发中，有时不可避免会和“选区”与“光标”打交道，比如选中高亮、选中出现工具栏、手动控制光标位置等。本文讲解讲解了 web 中的选区和光标的底层逻辑，以及在原生 web API 中我们可以怎样去操作他们。原文地...

如何提升团队分享的氛围~

《熊猫周刊》是一个专注于前端领域的技术周刊，我们为您收集了最新的前端技术文章和行业资讯内容，欢迎您的阅读。如果您有好的内容，我们诚挚的欢迎您的投稿。如果觉得内容对您有价值，麻烦点个赞和关注鼓励下我们哦！感谢您的支持~【技术研究】1、深入理解 Vite 核心原理本文通过阅读部分源码的方式讲解了 Vite 中的 Dev Server，HMR 热更新，基于 esbuild 的依赖预编译优化以及基于 Rollup 的插件体系。原文地址2、浏览器的 5 种 Observer本文系统性的讲解了浏览..

背景在我们常用的 Vue、React 中，组件除了可以定义展示内容以外，还有一个很重要的点就是组件是有生命周期的，我们可以监听到组件的创建、销毁、属性变化，对于这一些我们 web components 是否也支持，答案是肯定的，今天我们来看看 web components 中的生命周期。生命周期在 web components 中，主要包含了以下 4 个回调函数，它们将会在元素的不同生命时期被调用：connectedCallback：当 custom element首次被插入文档DOM时，被调用。

背景Web Components 是什么？顾名思义，就是“网页组件”，我们先来看看MDN 上是怎么描述的：Web Components 是一组 web 平台的技术API ，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web 应用中使用它们。从 MDN描述上来看，Web Components有以下几个关键词：技术 API，可重用、定制。接下来我们详细了解下这项技术对我们前端开发有什么好的改进。在目前大前端的开发背景下，React、Vue、Angular 等都支持组件化的