用户行为监控（轨迹追踪）
前言作为一名前端，最头疼的问题莫过于用户反馈了线上问题但是却复现不了。有些复现不了的问题跟操作步骤有关，但是用户描述问题常常不够准确，需要通过客服再进行多次沟通。还有一种情况就是用户明明进行了某项操作（比如出价）却硬说自己没有任何点击行为。因此，对用户行为进行监控，对于定位线上问题和减少客诉来说很重要。
如果要监控用户的操作行为，我们采用的是埋点上报的形式，这样做的好处是上报准确，而且依托于我们现有的埋点搜集系统，使用起来也比较方便。缺点也比较明显，那就是对代码的耦合度比较高，如果新增操作或者改变交互，上报的方法也要随之变动，如果操作过程的上报有所遗漏，整个用户行为其实是不完整的。本文尝试采用通用的一种上报方式，可以追踪用户的所有轨迹，希望能够在不侵入业务代码的情况下，对用户轨迹进行上报。
用户行为要监控用户行为，不仅仅要监控用户的操作，比如打开页面、点击等，还需要监控这些行为产生的的数据请求以及js报错问题。当然还有更复杂的用户行为，这里我们不做探讨。
我们可以用枚举定义上面的四类用户行为：
123456789101112131415161718{ jsError: ...
Script Error原因及解法
Script error 可能是你遇到的最神秘的错误之一, 最让人抓狂的是这种错误没有提供完整的报错信息(错误堆栈), 让排查无从下手.
产生Script Error的原因Script error 有时也被称为跨域错误. 当网站请求并执行一个托管在第三方域名下的脚本，就可能抛出 Script error 最常见的情况是采用CDN托管JS资源.为了更好地理解Script error, 假设有如下HTML页面，部署在 test.com 域名下
123456789101112131415<!doctype html><html><head> <title>Test page in http://test.com</title></head><body> <script src="http://another-domain.com/app.js"></script> <script> window.onerror = function (messa ...
微前端实践三（Micro-App落地）
微前端架构之Micro-App经过前面一系列调研，最终决定使用京东出品的微前端框架Micro-App来落地我们的新项目
关于Micro-Appsingle-spa是通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。因为qiankun是基于single-spa进行封装，所以这些特点也被qiankun继承下来，并且需要对webpack配置进行一些修改。
micro-app并没有沿袭single-spa的思路，而是借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改web ...
TypeScript分享
typescript 分享
为什么要使用 TypeScript微软推出 TypeScript 主要是为了实现两个目标。
为 JavaScript 提供可选的类型系统：TypeScript 会在编译代码时进行严格的静态类型检查，这意味着你可以在编码阶段发现可能存在的隐患，而不必把它们带到线上。
兼容当前及未来的 JavaScript 的特性：TypeScript 会包括来自 ES 6 和未来提案中的特性，比如异步操作和装饰器；也会从其他语言借鉴某些特性，比如接口和抽象类。
基础类型基础在了解 ts 的各种基本类型之前，首先先了解一下类型语言。
在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须与被调用函数中声明的类型兼容强类型语言不允许改变变量的数据类型，除非进行强制类型转换弱类型语言中，变量可以被赋予不同的数据类型
静态类型语言：在编译阶段确定所有变量的类型（如 c++）
1. 对类型要求极其严格
2. 立即发现错误
3. 运行时性能较好
4. 自文档化
动态类型语言：在执行阶段确定所有变量的类型（如 js）
1. 对类型非常宽松
2. Bug可能隐藏 ...
垃圾回收
垃圾回收
JavaScript的内存管理
不管什么程序语言，内存生命周期基本是一致的：
分配你所需要的内存
使用分配到的内存（读、写）
不需要时将其释放\归还
与其他需要手动管理内存的语言不同，在JavaScript中，当我们创建变量（对象，字符串等）的时候，系统会自动给对象分配对应的内存。
12345678910111213141516171819var n = 123; // 给数值变量分配内存var s = "azerty"; // 给字符串分配内存var o = { a: 1, b: null}; // 给对象及其包含的值分配内存// 给数组及其包含的值分配内存（就像对象一样）var a = [1, null, "abra"]; function f(a){ return a + 2;} // 给函数（可调用的对象）分配内存// 函数表达式也能分配一个对象someElement.addEventListener('click', function(){ so ...
为什么使用 Svelte(下)
为什么使用 Svelte （下）
Svelte是如何判断变更的
12345handleClick () { $$invalidate(1, count1 *= 1);}if ($$.ctx[i], $$.ctx[i] = value) {}
Svelte是如何标记脏数据的
1234567891011function make_dirty(component, i) { if (component.$$.dirty[0] === -1) { console.log('我是干净的') dirty_components.push(component); schedule_update(); component.$$.dirty.fill(0); } console.log('标记前：', component.$$.dirty) component.$$.dirty[(i / 31) | 0] ...
为什么使用 Svelte(上)
为什么使用 Svelte （上）背景自2019年Svelte框架横空出世，短短两年时间就迅速占据开发者满意度、开发者兴趣度榜首，同时市场份额稳步提升，仅次于React、Angular、Vue排至第四位。并且作为一个比较年轻的框架，已经拥有和Vue几乎等同数量的贡献者员。
可行性报告
开发者满意度
2020数据统计
开发者兴趣度
市场占有率
性能
Svelte 性能整体表现优于 Vue 和 React。在操作大规模 DOM 节点时，性能表现优于基于虚拟 DOM 的 Vue 和 React。 经过 Svelte 编译过的代码体积小，所以在首屏加载时有明显的优势。
类目
Svelte
Vue
React
创建 1000 行表格
132.3 ms
162.3 ms
165.7 ms
创建 10000 行表格
1,212 ms
1,252 ms
1,594.9 ms
在 1000 行表格中交换两行
51.8 ms
66.6 ms
429.6 ms
首屏加载时间
19.5 ms
59.6 ms
55.6 ms
这个网站统计了现实世界中 Web 应用 ...
浅谈let、const、var区别
浅谈let、const、var区别var
在 ES6 之前我们都是通过 var 关键字定义 JavaScript 变量。ES6 才新增了 let 和 const 关键字
在全局作用域下使用 var 声明一个变量，默认它是挂载在顶层对象 window 对象下（Node 是 global）
12var num = 1console.log(window.num) // 1
用 var 声明的变量的作用域是它当前的执行上下文，可以是函数也可以是全局
1234567var x = 1 // 声明在全局作用域下function foo() { var x = 2 // 声明在 foo 函数作用域下 console.log(x) // 2}foo()console.log(x) // 1
如果在 foo 没有声明 x ，而是赋值，则赋值的是 foo 外层作用域下的 x
1234567var x = 1 // ...
前端性能优化手段
前端性能优化手段
1、谈谈你对重构的理解。
网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。对于传统的网站来说，重构通常包括以下方面。
把表格（ table）布局改为DV+CSS。
使网站前端兼容现代浏览器。
对移动平台进行优化。
针对搜索引擎进行优化。
深层次的网站重构应该考虑以下方面：
减少代码间的耦合
让代码保持弹性。
严格按规范编写代码。
设计可扩展的API。
代替旧的框架、语言（如VB）
增强用户体验。
对速度进行优化。
压缩 JavaScript、CSS、 image等前端资源（通常由服务器来解决）。
优化程序的性能（如数据读写）。
采用CDN来加速资源加载。
优化 JavaScript DOM。
缓存HTTP服务器的文件。
2、如果一个页面上有大量的图片（大型电商网站），网页加载很慢，可以用哪些方法优化这些图片的加载，从而提升用户体验？
对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。如果为幻灯 ...
我如何解决Android上字体不能垂直居中的问题
我如何解决Android上字体不能垂直居中的问题某个风和日丽（coding）的下午，老大突然发给我一个截图，[单品页标签文字不居中.png]
拿出iPhone测试机检查 ？？？ 是居中的呀。。。。。。
看来事情并不简单，基本是Android手机兼容性的问题
换了两个Android手机测试，果然都有不同程度的偏移
而且发现同一页面上，有的会偏移有的却能正常垂直居中
通过测试，发现字体小于12px会产生很明显的偏移
问题：Android手机上当字体小于12px通过lineheight或padding撑开无法做到垂直居中
听他们说字体原因及解决办法
字体基本不可取，UI已经指定字体
实践出真知
table布局
123<div class="solution" style="display: table; height: 16px;"> <span style=" display: table-cell; font-size: 10px; vertical-align: middle;">table ...
