tzllxya的博客

Angular-使用好NgForOf的trackBy带来性能上的提升官方文档，查看“变更的传导机制”即有详细的表述：即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就...

Redux applyMiddleware 原理剖析最近在总结最近用的知识，好记性不如烂笔头，所以写出来记录下。“It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.”这是 Dan Abramov 对 middl...

一文掌握React性能优化1 shouldeComponentUpdateshouldComponentUpdate应该是提到的优化方法里面提到最多的，使用的也是最多的，如果返回false，就会阻止下面组件的渲染，反之，返回true，就会进行接下来的渲染，默认返回的事true。但是有个问题，shouldComponentUpdate进行的是浅比较，为什么不进行深比较，因为伤不起，深比...

浮点数精度问题透析:小数计算不准确+浮点数精度丢失根源在知乎上上看到如下问题：浮点数精度问题的前世今生？1.该问题出现的原因 ？2.为何其他编程语言，比如java中可能没有js那么明显3.大家在项目中踩过浮点数精度的坑？4.最后采用哪些方案规避这个问题的？5.为何采用改方案？例如在 chrome js console 中：alert(0.7+0.1); //输...

再谈js对象数据结构底层实现原理-object array map set如果有java基础的同学，可以回顾下《再谈Java数据结构—分析底层实现与应用注意事项》：java把内存分两种：一种是栈内存，另一种是堆内存。基本类型(即int,short,long,byte,float,double,boolean,char)在栈区分配空间，所有的对象都在堆(Heap)中分配空间。按照这思路来谈...

常见 五大CSS 布局方式 总结之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解 概括角度看c...

一文读懂JavaScript函数式编程重点-- 实践 总结好记性不如烂笔头,有时间将JS函数式编程,在JS方面毕竟有限，如果真要学习好函数式编程，建议学习下Haskell，本文就是将关于JS方面知识点尽可能总结全面。柯里化 偏应用 组合与管道 函子 Monad1. 柯里化什么是柯里化呢？柯里化是把一个多参数函数转化为一个嵌套的一元函数的过程。下面我们用介绍柯里化时候很...

一次网站的性能优化之路 -- 天下武功，唯快不破首屏作为直面用户的第一屏，其重要性不言而喻，如何加快加载的速度是非常重要的一课。本文讲解的是：笔者对自己搭建的个人博客网站的速度优化的经历。效果体验地址：https://biaochenxuying.cn1. 用户期待的速度体验2018 年 8 月，百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到：页...

Vue + TypeScript + Element 项目实战及踩坑记前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目，并在此过程中踩过的坑 。TypeScript 具有类型系统，且是 JavaScript 的超集，TypeScript 在 2018年 势头迅猛，可谓遍地开花。Vue3.0 将使用 TS 重写，重写后的 Vue3.0 将更好的支持 TS...

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构1.前言本文内容讲解的内容：一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。项目地址：https://github.com/biaochenxuying/vue-family-mindmap文章的图文结合版[1]Vue-family.md[2]...

学几招 vscode 技巧俗话说「磨刀不误砍柴工」，对于开发者来说，一款优秀的 IDE 或者 text editor 能有效提升工作效率。Visual Studio Code（下文中简称 vscode）因其强大的功能，较快的运行速度以及众多的扩展，在开发者中相当流行。本文就来介绍 vscode 的一些技巧，希望能给大家一些启发。作者本人使用的 Mac 版的 vscode，一些快捷键...

如何解决 iframe 无法触发 clickOutside前言在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。查看在线示例为什么无法触发 clic...

闲话 CDN开头这篇文章通过 FCC 上海线下和成都微信的分享，整理成文字稿顺便凑一下更新，考虑到吃瓜读者们不知道都了解到啥程度，以及我科普作者的身份（自己定的），我决定从入门到放弃的介绍一下，大致涉及：什么是 CDN 为什么我们要用 CDN 访问原理 架构 应用与踩坑 现实世界的 CDN由于每个地方都事无巨细讲起来非常费劲，费劲就容易跳票，而且会导致篇幅过长，所以其...

Vue业务实践指北写业务，对于一个前端而言，应该是再正常不过的事了，业务对标着需求，前端 er 们根据产品的需求以及设计师的设计稿开发出相应的 web 应用，无论是一个简单的页面或是一套复杂的系统，或多或少掺杂着业务逻辑。然而，我们有时候写的业务逻辑到底是为了去写业务逻辑而写的吗，作为一个常年与业务抗战的骚 nian，我认为我们写的业务不光光是为了在排期内完成简单的任务，而是要打磨自己写...

Grafana 插件开发从零到一阅前高能提醒：这篇文章总的来说并不是在教你怎么开发，而是告诉你怎么去学习开发一个 Grafana 的插件，说是从零到一，MAX_VALUE 其实是 100，望珍重。引子前一阵子突然接到了一个新任务：开发一个 Grafana 的 Datasource——差不多是这个表情。作为一个新时代的好码畜，上一次配置 Grafana 面板的时候，含着热泪...

CSP：给大家介绍下我爸爸 — Performance这篇文章主要讲如何利用 PerformanceAPI 辅助书写CSP 指令里的域名名单的思路，并不是写 CSP 的最佳实践，也未提供成熟工具。如果你还不了解 CSP 或者 PerformanceAPI，可以看下第 0 步（由于我并未特别深入 CSP 规则，如果有写的不对的地方，请大力指正），大佬请跳过。0. 名词解释C...

Event Loop 这个循环你晓得么？(附GIF详解)前言我们都知道JavaScript是一门单线程、非阻塞的脚本语言，目的是为了实现与浏览器交互。这里我们提到了两点：一是单线程，二是非阻塞。单线程是指JavaScript在执行的时候，有且只有一个主线程来处理所有的任务。但是他为什么一定是单线程，而不是多线程的呢？我们设想一下，如果JavaScript是多线程的，现...

Web 应用中的撤销与重做撤销（Undo）与重做（Redo）是绝大部分应用中都有的功能，它给用户提供了后悔药，这样用户即便误操作也能使损失达到最小，或者没有损失，给用户提供更好的使用体验。本文介绍 Web 应用中常用的两种撤销与重做实现思路，并提供一个在线案例。Web 应用中的撤销与重做，很容易想到富文本编辑器，但本文不特指富文本编辑器，而是更具有普遍意义的 Web 交互应用。只要有...

Cookie 知识二则SSO？你需要知道的SSO，即单点登录，其作用是用户登录一遍之后可在几个不同应用之间实现登录态。如当你在 A 网站登录了之后，在 B 网站也是登录状态了。实现 SSO 的方法有很多，一个要点是需要有一个标示某个用户已经登录的凭证，且该凭证能够在多个系统之间共享。使用 Cookie 保存相关的信息是一个广泛被使用的方法。那么，如何做到登录网站 A 之后，B 网站也...

Vue的打包优化之路场景分析一个结构简单，依赖蛮多的可视化项目，用到的库有1. Vue + VueRouter + Vuex + axios2. ECharts + 全省份地图文件 + 中国地图文件3. ElementUI4. moment (后面被 date-fns 代替)5. lodash + lodash-decorator (用到了装饰器)EChart...

为什么说Egg.js是企业级Node框架自从Node.js问世以来，阿里就是国内跟进Node.js最激进的公司之一。阿里不仅在公司内大范围使用Node.js用作服务端开发，2016年还将他们使用Node做Web开发的经验沉淀下来，推出Egg.js开源项目，号称为企业级框架和应用而生。企业级开发对于框架有着诸多要求，那么Egg.js又是怎么满足这些要求的？在7月6日的ArchSummi...

Redux 4.0，用Kotlin重构Java应用新闻热点国内国外，前端最新动态Redux 4.0：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。近日，Redux发布了最新版本的Redux 4.0，相对上一版本，它的文档进行了大量更新，还包括TypeScript定义、打包CommomJS/ES模块等，详情可进入GitHub查看。安卓病毒爆发，300多...

web 开发之 —— 列表的分页列表的分页是 web 开发中非常常见的一个需求，目前我接触过的分页有一下几类：静态列表 动态无序列表 动态有序列表静态列表常见于企业的时间轴列表中，它的列表内容几乎是不变的，因此使用 page + count 进行分页就可以了动态无序列表这里的无序指的是这个列表除了动态的分数来作为排序规则之外，没有其它的额外规则，比如说不能根据创建...

在Vue中使用JSX的正确姿势ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 H...

Airbnb 宣布放弃使用 React Native，Vue超越了React？前端每周清单专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态Vue.js超越React.js？勿以star数论高低！：...

如何让React(anujs)跑在IE8上本文不会慷慨激昂地控诉IE8怎么怎么的，因为没有意义，总有苦逼的人。群里也经常问到如此让anujs跑到低版本浏览器下，现在统一答复一下如何让anujs代替React，跑到IE8中。anujs仓库：https://github.com/RubyLouvre/anu本文例子：RubyLouvre/anu-ie8-example我的例子...

React转微信小程序:双模板联动这是本系列的最后一篇。小程序封死了操作DOM的可能性，并且也不让我们操作视图，所有与视图有关的东西一律接触不了。而它的自定义组件是非常恶心，基本不配叫组件，不能继承叫什么组件。因此我们使用它更早期的动态模板技术,template。我的思路如下，通过编译组件的render方法，将里面的自定义组件变成template类，然后在template类中自己初始...

前端周报：Udacity弃用RN，微信小程序将支持npm前端每周清单专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态微信小程序的下一步：支持NPM、小程序云、可视化编程、支持分包：7月11日，微信...

前端周报：TypeScript 3.0，前端面试指南免费下载前端周报专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端周报。新闻热点国内国外，前端最新动态TypeScript 3.0重磅发布：7月31日，微软正式发布 TypeScript 3....

使用BEM命名规范来组织CSS代码BEM是Block（块）Element（元素）Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）如何使用BEM一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（E...

各种小程序的组件机制差异在蚂蚁金服的开放平台上看到一些贴子，说提供一个工具，一键转换微信小程序为支付宝小程序。我与百度的人交流时，也听到相似的东西。其实都没有这么简单，它们最多是将一些循环条件分支指令改一下名，将一些文件的后缀名改一下，更多的差异点在API与各式的配置对象上，细节是魔鬼，我在娜娜奇的官网也列举了许多相关的东西，但也不能打票说已经很齐全。。。。各种小程序的差异点-...

教程：从零开始使用webpack 4, Babel 7创建一个React项目（2019）你会在本篇学到什么如何安装配置webpack 如何安装配置babel 如何安装react 如何创建两种React Component --- 容器/展示组件 在html文件中引用webpack生成的bundle文件 如何安装使用webpack dev server初始化项目首先我们先给项...

useEffect与useLayoutEffectReact Hook让无狀态组件拥有了许多只有有狀态组件的能力，如自更新能力（setState，使用useState），访问ref（使用useRef或useImperativeMethods），访问context(使用useContext)，使用更高级的setState设置（useReducer），及进行类似生命周期的阶段性方法（useEffe...

ReactFiber在并发模式下的运行机制新一年又开始了，React过去一年悄悄实现了Suspense，带来了React Hooks ,源码也大变换了。因此好有必须重新阅读一下，看它是如何实现这些功能，及未来准备开放的并发渲染功能。React16早期将原来的diff过程拆分成两个阶段，第一个阶段叫reconcile, 也就是原来diff虚拟DOM的过程。这阶段有大量叫reconcile...

React-coat深度对比DvaJS，是挑战者？还是又一轮子？DvaJS：项目地址 React-coat：项目地址DvaJS 和 React-coat 都是 React+Redux+Redux-router 生态的框架，都是把传统MVC的调用风格引入MVVM，两者诸多地方颇为相似。DvaJS已经广为人知，上线已经好几年了，从文档、稳定性、测试充分度、辅助工具等方面都自然比 re...

如何利用 React Hooks API 做全局状态管理？React 最新正式版已经支持了 Hooks API，先快速过一下新的 API 和大概的用法。// useState，简单粗暴，setState可以直接修改整个stateconst [state,setState] = useState(value);// useEffect，支持生命周期useEffect(()=&...

Vue组件库工程探索与实践之构建工具京东 JDC 团队近期发布了移动端 Vue 组件库 NutUI 的 2.0 版，2.0 不是 1.0 的升级，而是一个全新的组件库。从 1.0 到 2.0 一路走来，他们积累了一些 Vue 组件库的开发经验，接下来的一段时间，他们将以系列文章的形式与大家进行分享，欢迎关注。作者：李大凡作为《Vue 组件库工程探索与实践》系列文章开篇之作，我们从...

教你如何在React及Redux项目中进行服务端渲染服务端渲染（SSR: Server Side Rendering）在React项目中有着广泛的应用场景基于React虚拟DOM的特性，在浏览器端和服务端我们可以实现同构（可以使用同一份代码来实现多端的功能）服务端渲染的优点主要由三点1. 利于SEO2. 提高首屏渲染速度3. 同构直出，使用同一份（JS）代码实现，便于开发和维护...

深入理解JavaScript的事件循环（Event Loop）一、什么是事件循环JS的代码执行是基于一种事件循环的机制，之所以称作事件循环，MDN给出的解释为因为它经常被用于类似如下的方式来实现while (queue.waitForMessage()) { queue.processNextMessage();}如果当前没有任何消息queue.waitForMes...

安卓移动微信页调试大法在开发移动端页面时，一般都得保证在微信页面中能够正常访问，虽说微信内置浏览器统一了各个不同安卓机的WebView，但在不同的机子上，还是会出现不一样的兼容问题。调试页面，有几个维度要考虑：能够访问页面、审查元素查看页面输出、抓包查看请求模拟登陆、断点调试、性能测试、在模拟器上调试、在真机上调试本文仅涉及基础页面的调试，不涉及Hybrid app、公众号JDK 、小...

使用BEM命名规范来组织CSS代码BEM是Block（块）Element（元素）Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）如何使用BEM一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（E...

JS 跨域问题常见的五种解决方式一、什么是跨域？要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的.简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.URL 说明 是否允许通信http:...

CSS布局 -- 圣杯布局 & 双飞翼布局按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。但在这里实现起来还是有一些区别的【圣杯布局】在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。<!DOCTYPE html><html>...

如何去写一个jquery插件前些日子，因为项目的需求，自己定制了一款jquery弹窗，这得益于自己之前接触的项目让我对于面向对象编程有了深刻的理解。在jquery的基础上拓展一款弹窗插件：jquery源码中可知，jQuery.fn便是jquery的命名空间。jQuery.fn = jQuery.prototype = { constructor: jQuery, ini...

弹窗查看内容时 内容滚动区域设置为body区看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动什么意思呢？看个图片，一般正常弹窗是有宽高限制的，如果内容过长则直接在弹窗中进行滚动点我预览将滚动位置放到整个body中，让弹窗中内容自适应高度这么做的好处自然很明显，body区域有更大的可视区域，来看...

图片横向等高瀑布流，每行占满，限制行数 的实现图片的横向瀑布流，其实简单地按顺序排列就可以了但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度，需要按比例来动态计算另外，如要限制图片展示的行数，则只需判断好每行总高度与容器总高度的关系即可这里就来实现...

记一次vue长列表的内存性能分析和优化好久没写东西，博客又长草了，这段时间身心放松了好久，都没什么主题可以写了上周接到一个需求，优化vue的一个长列表页面，忙活了很久也到尾声了，内存使用和卡顿都做了一点点优化，还算有点收获写的有点啰嗦，可以看一下我是怎么进行这个优化的，也许有点帮助呢这个长列表页面，其实是一个实时日志上报的页面，随着页面打开时间的增加，日志数量也会增多，常规的页面...

HTML5的Websocket* 先请来TA的邻居：*http：无状态、基于tcp请求/响应模式的应用层协议 （A:哎呀，上次你请我吃饭了么? B:我想想, 上次请你吃了么）tcp：面向连接、保证高可靠性(数据无丢失、数据无失序、数据无错误、数据无重复到达)传输层协议。（看啊，大阅兵，如此规整有秩序）为什么要引入Websocket：RFC开篇介绍：本协议的目的是为了解决基于浏览...

Vue响应式原理源码浅析先大概说下Vue响应式实现的原理。Vue的响应式原理是通过“观察者/订阅者”模式实现的。首先，Vue会给data及data下的数组、对象循环调用Object.defineProperty方法来设置getter和setter，以此来拦截data的赋值和取值。也就是说，当我们赋值（如：this.property='string'）时，会调用Ob...

weex里native主动发送事件到JS的方案实现现在有很多页面需要在返回的时候刷新，比如从购物车跳转到详情页加购，再到购物车，这时候应该刷新页面；如果从订单列表页点击付款跳转后进行支付后，返回的时候刷新数据。viewappear 和 viewdisappear事件首先想到的是weex已经提供的绑定到根元素的viewappear 和 viewdisappear事件。使用方法是绑定到根元...

JavaScript 中的对象拷贝对象是 JavaScript 的基本块。对象是属性的集合，属性是键值对。JavaScript 中的几乎所有对象都是位于原型链顶部Object的实例。介绍如你所知，赋值运算符不会创建一个对象的副本，它只分配一个引用，我们来看下面的代码：let obj = { a: 1, b: 2,};let copy = obj;obj.a = 5...

JavaScript武器库前言作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到npm，以提高开发效率。这里，笔者已经封装并发布了自己的武器库outi...

原生js的常用方法以下是个人总结，也有一些是copy大神的，现在放到一起，方便以后查阅（有不对的地方，还望大家能够提出，我会尽快加以改正）。一、!!强制转boolean根据真值，假值 判断，返回true，false假值： 0 “” null undefined false NaN例如：var nu=null;var nul="";var str="abcd";co...

深入了解 JavaScript 中的 for 循环在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是：下面我们就来看看这 4 种 for 循环。简单 for 循环下面先来看看大家最常见的一种写法：const arr = [1, 2, 3]; for(let ...

20 个 CSS 高级技巧汇总使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate { filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: gr...

css实现图片背景填充的正六边形边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示：这里为了得到一个正的六边形，两个矩形旋转的角度必须为-60deg和60deg，以及矩形高宽比必须是Math.sqrt(3) : 1， 原谅我不会打根号3(:3」∠)。那么首先我们得创建三个重叠的矩形：<div class="hexagon"> ...

如何在CSS中使用遮罩maskmask是指通过在特定点遮盖或者剪裁改变元素的外观。CSS遮罩--如何在CSS中使用遮罩_CSS3, masking 教程_w3cplusCSS3 Filter的十种特效太棒了！mask 轻松构建炫酷CSS探照特效！mask-imagemask-image通过读取透明度对html元素进行遮罩，黑色代表透明，白色代表不透明，...

团队协作中的 Github flow 工作流程作为一名开发人员 Git 常用命令每天都在使用，大家肯定信手拈来，但是在团队协作中 Git 的使用姿势和个人开发还是有很多不一样的地方，对于技术团队，期望大家使用规范的 Git 操作流程，规范的 Commit Message，规范的代码风格。这样才能提高团队开发相率和项目的可维护性。今天主要为大家介绍一套基于 Github flow 的 Gi...

学几招 vscode 技巧俗话说「磨刀不误砍柴工」，对于开发者来说，一款优秀的 IDE 或者 text editor 能有效提升工作效率。Visual Studio Code（下文中简称 vscode）因其强大的功能，较快的运行速度以及众多的扩展，在开发者中相当流行。本文就来介绍 vscode 的一些技巧，希望能给大家一些启发。作者本人使用的 Mac 版的 vscode，一些快捷键...

再谈前端虚拟列表的实现书接上文，在之前的聊聊前端开发中的长列表中，笔者对「可视区域渲染」的列表进行了介绍，并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List，在本文中会使用「虚拟列表」来指代。在本文中，笔者会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表组件，旨在讲清楚虚拟列表的实现思路。阅读本文不需要阅读上一篇文章，但代码是使用 Vu...

自动化生成 H5 骨架页面骨架页面（Skeleton Page）指的是当你打开一个移动端 web 页面，在页面解析和数据加载之前，首先给用户展示页面的大概样式。在骨架页面中，图片、文字、图标都将通过灰色矩形块或圆形块来展示，在真实页面展示之前，用户能够感知到即将加载页面的基本 CSS 样式和页面布局。饿了么移动 web 端骨架页面如题图所示。本篇文章将给读者阐述一种自动化生成上图骨架...

前端工程师为什么要学习编译原理？前言普遍的观点认为，前端就是打好 HTML、CSS、JS 三大基础，深刻理解语义化标签，了解 N 种不同的布局方式，掌握语言的语法、特性、内置 API。再学习一些主流的前端框架，使用社区成熟的脚手架，即可快速搭建一个前端项目。胜任前端工作非常容易。再往深处学习，你会发现前端这个领域，总是有学不完的框架、工具、库，不断有新的轮子出现。技术推陈出新，版本快...

九种跨域方式实现原理（完整版）前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github 博客，纸上得来终觉浅，建议大家动手敲敲代码。一、什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所...

Vue源码阅读连载之响应式设计书接上回，谈到Vue是在Vue.prototype._init里调用了initState初始化了响应式的组成，看一下initState的源码export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) i...

介绍一个有趣的Web框架——Zero名字就看着很有趣。所谓Zero的意思是零配置、零烦恼，就是说直接写业务代码即可，其他的事情都交给Zero来搞定。它的官网地址是Zero Server。Hello World依照惯例，总是先看Hello World。npm install -g zero这个框架需要全局安装。新建一个文件夹，然后在里面新建一个time.js文件，输入...

Vue 全家桶学习笔记 —— Vue Router 的进阶使用本篇文章是对 Vue Router 官方文档的总结，已经看过的小伙伴可以忽略，没看过的小伙伴可以看看哟，能省掉你看官方文档的时间。先贴上上一篇文章的地址Vue 全家桶学习笔记 —— Vue Router 的基础使用上一篇说完基础使用，本篇就来总结下进阶的使用方式导航钩子导航钩子的用处是为了方便我们在路由正在改变...

Vue 全家桶学习笔记 —— Vue Router 的基础使用想要使用 Vue 来制作一个单页面应用，那么久不得不使用两个 Vue 官方提供的两个工具（当然你也可以不使用）——一个是页面路由工具 Vue Router，另一个是状态管理工具 Vuex。本篇文章先来说说 Vue Router 的基础使用基础使用与配置在引入 vue.js 和 vue-router.js 后，首先创建一...

聊聊Vue.js的template编译因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/lea...

使用 CSS Houdini 绘制平滑圆角原文链接：http://iamvdo.me/en/blog/smooth-corners-with-css-houdini已得到原文作者Vincent De Oliveira许可最近，我在推特分享了一篇关于人机交互界面的视错觉的文章。我向来喜欢视错觉，但这篇文章传达了一个新观点：与几何上的正圆比起来，一个微调过的圆形有可能给人以更加圆的...

GraphQL 初探—面向未来 API 及其生态圈什么是GraphQL？第一次看到这个名词未免让人联想到数据库查询语言 SQL 。但本质上，这是两个完全不同的东西， GraphQL 在官方文档里的定义如下：GraphQL is a query language for your API, and a server-side runtime for executing querie...

想象一双结实而富有弹性的大腿：理解 Flexbox 布局说明本站不支持 CodePen 的脚本插入，可以到我的博客阅读直接显示示例代码的版本。Flexbox 让人困惑有很多谈及 Flexbox 的文章，但依然有不少前端对此感到困惑。一方面，flex 相关的 CSS 属性繁多，影响到的具体效果也包含多个方面；另一方面，CSS 可以使用Shorthand properties...

从Vue.js源码看异步更新DOM策略及nextTick因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue。在学习过程中，为Vue加上了中文的注释https://github.com/answershuto...

JavaScript 中的继承：ES3、ES5 和 ES6选择一种继承方式JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式，可以分成下面四类：Mixin 模式，即属性混入，从一个或多个对象中复制属性到新的对象中 方法借用模式，即通过 call 或 apply 实现方法的重用 原型模式，使用 O...

你可能不知道的 css 内容块position我们都知道元素都拥有 position 这个 css 属性，先来看看他的基本定义和可用值。定义position 决定了元素位置是如何被渲染的可用值static: 默认值，元素在文档流中依次渲染absolute: 元素位置相对于其最近的非 static 的父元素fixed: 元素位置相对于浏览器窗口relativ...

Javascript中的求值策略介绍最近看到一个关于JS函数参数传值策略的讨论。很多人会认为JS的Object类型作为函数参数是按引用传递，而基础类型是按值传递，他们也提出了自己的佐证，而且网上搜索很多文章好像也这么说。但是这样的说发是不是正确的呢？让我们来探讨一下JS里面的求值策略。维基百科搜索Evaluate-Strategy你可以看到求值策略其实是编程语言里面的一个常用术语...

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。关于这道题目的吐槽暂且不提（这是一道被提到无数次的题，得到不少人的赞同，也被很多人反感），本文的目的是如何借助这道题...

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。----------超长文+多图预警，需要花费不少时间。----------如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。---...

使用 HeadlessChrome 来测试 WebRTC 应用最近正在做 WebRTC 相关的开发，在配置 ci 测试时发现传统的测试方案都不太合适。WebRTC 的很多 API 是jsdom无法模拟的，于是想到了 headlessChrome 这个方案。这里主要记录下配置 headlessChrome 自动化测试的步骤和一些踩到的坑。GoogleChrome/puppeteer...

如何让 node 也支持从 url 加载一个 module？使 node 也支持从 url 加载一个 module​zhangzhao.name最近两天 ry 大神的 deno 火了一把。作为 node 项目的发起人，现在又基于 go 重新写了一个类似 node 的项目命名为 deno，引发了大家的强烈关注。在 deno 项目 readme 的开始就列举出了这个项目的优势和需要解...

浅析当下的 Node.js CommonJS 模块系统在 ES2015 标准之前，JavaScript 语言没有原生的组织代码的方式。Node.js 用 CommonJS 模块规范填补了这个空白。我想通过这篇文章和大家分享一下当下的 CommonJS 模块系统的一些机制和细节。在写这篇文章的时阅读代码 Node.js 版本是 v10.0.0全文共由三个部分组成：什么是模块系统...

前端面试之手写一个bind方法bind 函数对于写react的人来说并不陌生。哦！是的，没错我的朋友，它的一个用处就是用来改变函数this指向的。如果细究一下bind的实现，发现里面还是有不少东西的，我们今天展开讨论一下。在说bind之前呢，我们还要先来讲讲我们的老熟人this。说到this，我们在《前端面试之js相关问题（一）》也有提到过，this的工作方式。今天我们再来看看它的四...

Javascript中的尾递归及其优化在平时的代码里，递归是很常见的，然而它可能会带来的调用栈溢出问题有时也令人头疼：我们知道， js 引擎（包括大部分语言）对于函数调用栈的大小是有限制的，如下图（虽然都是很老的浏览器，但还是有参考价值）：为了解决递归时调用栈溢出的问题，除了把递归函数改为迭代的形式外，改为尾递归的形式也可以解决（虽然目前大部分浏览器没有对尾递归（尾调...

你也想做掌控全局的 React 大师吗？你可能已经听说过大名鼎鼎的why-did-you-update，它能够发现程序中不必要的重新渲染：其大致原理是将React.Component.prototype.componentDidUpdate 覆盖为一个新的函数，在其中进行了每次渲染前后的 props 的深度比较，并将结果以友好直观的方式呈现给用户。但它有一个明显的缺陷——如...

从矩阵与空间操作的关系理解CSS3的transform（科普文）注：文中图片取材于线性代数的本质并加以合适的修改！推荐大家去观看这套视频，另外这套视频毕竟是一套数学性质的视频，不包含css的相关讲述，这篇文章将借鉴这套视频的思路为你讲述css变换的原理。矩阵 概述 向量 什么是向量 基向量 线性变换 如何用数值描述线性变换 回到 CSS 的 transform矩...

JavaScript中的Pipe本文会介绍Pipe在函数式编程中的基本概念，怎么用Pipe让我们的代码变得更美好，以及新的pipe操作符，Fancy的东西在后面！什么是Pipe？先用一个最简单的例子来看一下什么是pipe，现在我们有两个最简单的函数addOne和addTwo，分别对于参数加一和加二：const addOne = x => x + 1const addT...

JavaScript的环境模型《SICP》提到了环境模型（Environment Model）这一个概念，它用于解释Scheme的函数计算规则。同样，它也适用于JavaScript的函数计算规则。环境是什么节选《SICP》 3.2 The Environment Model of EvaluationThe environment is crucial to the evalu...

使用go编写webassemblywebassembly是什么？WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-le...

浅谈 ES 模块和 Webpack Tree-shaking这是我在参加 GSoC(Google Summer of Code) 2018 里的项目：为 webpack 改进 tree-shaking。本人是 19 届应届生，目前在今日头条效率工程部（深圳研发）实习。Tree-shaking

像呼吸一样自然：React hooks + RxJS上个月的 React Conf 上，React 核心团队首次将 hooks 带到的公众们的眼前。起初我看到这样奇怪的东西，对它是很抗拒的。Dan 说 JavaScript 里的 this 太黑了，从其他语言转来写 React 的人会很不适应。然而 hooks 本质上也是一种黑魔法，需要理解它的本质依旧需要对 JS 的各种闭包和作用域的问...

React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆2018年12月17日更新：修复在qq浏览器下执行pop跳转时页面错位问题本文的代码已封装为npm包发布：react-slide-animation-router在React Router中，想要做基于路由的左右滑动，我们首先得搞清楚当发生路由跳转的时候到底发生...

前端同构渲染的思考与实践之前的工作经历有幸分别在知乎和美图主导前端同构渲染的相关架构，给我最直观的感受，这是前端渲染最为复杂的一种方案，也是为了追求极致的用户体验不得不去做的一种尝试，虽然 Node.js 的引入赋能了传统前端领域、SEO 优化也不再是个问题，但很明显，这些只是副产品。问题上帝为了我们开了一扇窗，同时也会为我们关上一扇门。我们所知的传统型 SPA，单页面应用，贴近用...

Vue - Table表格渲染上千数据优化这次项目经验会谈谈经常在项目中，针对成千上万数据渲染优化的不断探索来谈谈自己的体会，其目的就是保证用户浏览上万条数据的时候，UI要很流畅，确保用户操作过程中不会出现UI卡顿或者最糟糕的情况，直接浏览器奔溃。其优化目录如下，由于内容很多，会分两篇文章进行研究，本文章主要会围绕如何设计一个虚拟滚动来渲染成千上万的数据。1.表格布局（To ...

NodeJS express框架核心原理全揭秘介绍express框架大家都已经都很熟悉，是NodeJS最流行的轻量web开发框架。他简单易用，却功能强大。最近一个月来一直反复研究调试express框架，深究其源码不觉为之惊叹，不论是原理与代码都非常简单，很容易理解也很受用，觉得有必要写个文章分享一下。本系列分2部分全面介绍express。上篇讲express框架主要原理和重要的组成部...

前端核心代码保护技术面面观1、 前言Web的开放与便捷带来了极高速的发展，但同时也带来了相当多的隐患，特别是针对于核心代码保护上，自作者从事Web前端相关开发的相关工作以来，并未听闻到太多相关于此的方案，『前端代码无秘密』这句话好似一个业界共识一般在前端领域传播。但在日常的开发过程中，我们又会涉及以及需要相当强度的前端核心代码的加密，特别是在于与后端的数据通信上面（包括HTTP、HT...

原来vue的v-model还能这么用前言大家都知道vue中的v-model是用来双向绑定，绑定input，textarea，select等元素上的数据，但是其本质仅仅是语法糖。是监听用户的输入事件用来更新数据，但是本片文章则不是来说这些大家都知道的东西，我们来讲讲你忽略的组件上的v-model。为什么会发现这么个东西，其实就是在公司里面每周分享的时候，我们的老大在看api的时候发现...

【web前端学习】12个非常实用的JavaScript小技巧在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量...

来点不一样的：解耦 HTML、CSS 和 JS之间的那些事当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS 和 JavaScript。随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于组织和维护你的前端代码的计划是绝对需要的。当今的一些大型互联网公司，由于越来越多的人会接触到日益增加的前端代码，它们会试图去坚持代码的模块化。这样更改程序的部分...

我是如何用JavaScript制作一个猜拳小游戏的知识点：switchswitch case break default条件 判断 退出 默认a.只要匹配上一个case，那么它下面的所有的case都会执行包括defaultb.break的意思跳出当前结构while/do…while一般情况下面，如果条件判断是数字的比较==<>，for循环优先.如果是非数值...

前端页面优化：如何更快速将你的页面展示给用户？现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台压力也会更小。请求优化首先我们来优化HTTP请求数由于用户浏览的，往往只是局部网页，所以...