Make progress every day

背景一天产品大大向 boss 汇报完研发成果和产品业绩产出，若有所思的走出来，劲直向我走过来，嘴角微微上扬。产品大大：boss 对我们的研发成果挺满意的，balabala…（内心 OS：不听，讲重点）产品大大：咱们的客服 IM 桌面客户端现在已经有能力做到 1 对多接待在线访客了，后面我们想要将专项问题访客在当前接待客服不能解决的情况下，可以拉专项客服发起群聊。我：嗯，这个想法不错，专项客服还能一眼看到之前对话上下文，访客还无须重新发起聊天。哒哒哒，功能做完了，两周后上线验收，客户很满意，boss 在群里也点了个 👍🏻。产品大大又来了：嗯，这个功能不错，我们也支持给客服自己群聊吧，有助于客 ...

近期组员接手了一个“古老“的初始由后端大佬写的前端项目，业务层面的组件复用，全靠是 copy 相同代码咱不说，经过不同大佬们的维护，代码风格更是千奇百怪。该前端项目还在正常迭代更新，又不可能重写，面对 💩 一样的代码，两个接手的小前端抱着欲哭无泪，瑟瑟发抖。见状，只能安慰之，暂时发挥啊 Q 精神，规范自己的新代码，然后每次迭代开发任务重构一两个旧组件，此过程持续 2-3 个月后，上 eslint 和 prettier 自动化检测语法和格式化代码。本着“代码不规范，新人两行泪”的警示，总结出如下 JavaScrip、ES6 和 Vue 单文件组件相关代码风格案例，供大家参考。 开发流程规范这里 ...

网络七层协议应用层、表达层、会话层、传输层、网络层、数据链路层、物理层。 如何让你设计网络物理层 - 集线器数据链路层 - 交换机，维护 端口 - MAC 地址表网络层 - 路由器，对比源 IP 和目标 IP 子网掩码，不同则走默认路由 TCP 协议TCP 重传：TCP 重传机制包括：1、超时重传，2、快速重传，3、SACK，4、D-SACK。超时重传：数据发送时，设定一个定时器，当超过指定时间，没有收到对方的 ack 确认应答报文，就会重发该数据。超时重传时间 RTO 应该略大于往返时延 RTT（数据发送到接受确认的时刻的差值）。快速重传：收到三个相同的 ack 报文时，会在定时器过期之前， ...

垃圾回收机制Javascript 垃圾回收机制分为：标记清除和引用计数。常用的垃圾回收方式是标记清除。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记，然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上标记的变量将被视为准备删除的变量。最后垃圾收集器销毁那些带标记的值并且回收它们所占用的内存空间。另一种不常用的垃圾收集策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋值给该变量时，则这个值的引用次数就是 1。如果同一个值又赋值给另外一个变量，则该值的引用次数加 1。相反，如果包含对这个值引用的变量有得到了另外一 ...

浮点数整数位每三位添加一个逗号12345function commafy(num) { return num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($1) { return $1 + ',' })} 如何实现数组的随机排序？ 方法一：依次取出一个位置和随机一个位置交换 1234567891011var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]function randSort1(arr) { for (var i ...

顺丰在线客服访客端项目 顺丰在线客服访客端是用于智能机器人与访客自助交互服务，还能与客服人员在线沟通。项目包括 PC 端和 H5 端，接入顺丰体系应用 100 多个渠道，比如速运、冷运、丰巢和航空等与之相关微信、App 和小程序渠道客服入口。 前端项目使用 vue、es6、vant、element、better-scroll、webpack 等技术栈构建。 基于 websocket 实现 IM 通讯，http 轮询做兜底，实现消息确认机制，防止消息丢失和消息去重。 实现了输入框吸附 H5 软键盘兼容方案。 实现了前端 js 图片压缩方案。 等等相关难题。 追问：短轮询和长轮询区别？短轮询：浏 ...

Axios 原理 大致步骤：Axios 实例化 -> 执行请求拦截器（request： new InterceptorManager()） -> 派发请求（dispatchRequest） -> 转换请求数据（transformRequest） -> 适配器（adapter）处理请求 -> 转换响应数据（transformResponse） -> 执行响应拦截器（response: new InterceptorManager()） -> axios； axios 实际返回的是 Axios.prototype.request 方法，并且将 axios ...

前言作为一名前端 er，日常工作打交道最多（之一）的莫过于熟悉而又陌生的浏览器了，熟悉是每天都会基于浏览器的应用层面之上码业务，陌生是很多人可能跟我一样不熟悉其内部运行原理，比如 js 是怎样运行的呢？精美样式页面是怎样渲染到电脑屏幕的呢？在开放的互联网它又是怎样保证我们个人信息安全的呢？带着种种疑云开始肝李兵老师的《浏览器基本原理与实践》，不得不说，大家之作，通俗易懂，层层拨开云雾见青天，下面就（非常非常）简单总结一下。 浏览器工作原理与实践Chrome 架构：仅仅打开了 1 个页面，为什么有 4 个进程线程和进程区别：多线程可以并行处理任务，线程不能单独存在，它是由进程来启动和管理的。一个 ...

前言前端性能的优化的前提是要了解对页面加载全流程，正如老生常谈的 “浏览器从输入 URL 到页面加载出来发生了什么”，主要分为以下几个过程： DNS 解析:将域名解析成 IP 地址 TCP 连接：TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 断开连接：TCP 四次挥手 总结来看，可优化点有： 域名解析（DNS） 使用 HTTP2 减少 http 请求次数 减小请求大小 浏览器缓存 针对每个流程进行应对优化方案。 域名解析（DNS）DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，我 ...

单例（Singleton）模式基于单独的实例，来管理某一个模块中的内容，实现模块之间的独立划分，但是，也可以实现模块之间方法的相互调用。 早期的模块化编程AMD -> require.jsCMD/CommonJS -> sea.js & NodeES6 Module 1234567891011121314151617181920212223242526// 程序员A开发的模块var AModule = (function () { var data = [] function bindHTML() { //... } functi ...