Hybrid APP 开发：JSSDK今天介绍的是 JSSDK，通过 JSSDK 可以实现：抹平 JSBridge 的平台实现差异；对齐端能力，内部消化版本差异；SDK 封装后的代码更加符合前端习惯；权限控制、鉴权、对外开放，实现生态建设。Airbnb 的前端重构本文将讨论催生一些变化的产品驱动因素；如何一步步摆脱遗留的 Rails 解决方案；一些新技术栈的关键性支柱。彩蛋：文章将透露一下未来的发展方向。Node.js v8.0 新特性一览Node.js 于 5 月 30 号在其官方博客上发布了 Node.js v8.0.0。最新发布的版本代号为 Carbon，带来了很多重要的特性改进和一些全新的特性。XOR 加密简介本文介绍一种简单高效、非常安全的加密方法：XOR 加密。Server-Sent Events 教程服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events，本文将介绍它的用法。小程序组件化框架 WePY 在性能调优上做出的探究性能调优是一个亘古不变的话题，无论是在传统 H5 上还是小程序中。因为实现机制不同，可能导致传统 H5 中的某些优化方式在小程序上并不适用。因此必须另开辟蹊径找出适合小程序的调估方式。本文旨在介绍两点在小程序开发过程当中碰到的一些性能问题以及 WePY 的一些优化方案。基于 DHT 的 Scalable ...继续阅读 (4)

谈谈像素以及微信小程序的 rpx作者研究了微信小程序中的长度单位 rxp，发现rpx 压根就不需要关心 DPR 和 PPI 的概念。Web 开发者安全速查表想要开发出一个安全的、健壮的 Web 应用其实是非常困难的，如果你觉得这实现起来非常简单的话，那么你一定是一个X炸天的程序猿，要么你就是在白日做梦……Session 一致性架构设计实践采用“冗余+故障转移”的多台服务器来保证高可用时，每次 HTTP 请求不一定能路由到正确的 session。本文总结了保证 session 一致性的架构设计常见方法。使用 husky 和 lint-staged 构建代码检查工作流具备基本工程素养的同学都会注重编码规范，代码风格检查是保障代码规范一致性的重要手段。从零开始用 Proxy 实现 Mobx从零开始用 Proxy 实现 Mobx 功能。“Mobx 这样的库黑科技没有我们 yy 的那么多，设计思路可谓中规中矩，了解实现思路也增强了使用时的信心。”全球首届 Vue Conf 资料合集首届 Vue Conf 上周在京成功举办，快一起来看看相关资料吧~ 附PPT 下载地址：https://vue.w3ctech.comNode.js cluster 踩坑小结内容如题。主要分为三个部分：Process（介绍进程与 process 对象）；child_process（介绍子进程 & IPC 与踩坑）； ...继续阅读 (3)

现代浏览器引擎的构建之道Mozilla 在 2016 年 10 月公布了 Quantum 项目， 旨在开创下一代浏览器引擎。 Firefox 53 中首次包含了该项目部分核心代码 。 本文是深度解读 Quantum 项目的系列文章的第一篇。A/B 测试的边界与想象“或许 A/B 测试会有边界，但想象无界。在想象力的驾驭下，A/B测试会有无限的场景与应用可能。”如何实现一个 Git Diff 解析器代码审阅中一个重要功能是对两个 commit 进行 diff 并展示到页面中，这篇文章尝试总结其实现过程。哈希函数介绍“在记录的关键字与记录的存储地址之间建立的一种对应关系叫哈希函数。哈希函数就是一种映射，是从关键字到存储地址的映射。”这篇文章介绍了哈希的概念、常见的哈希算法及其 JavaScript 实现。学习 CSS Grid全面介绍 CSS Grid 的一篇文章，简单明了。如何使用 CSS Grid 布局实现限宽容器全屏效果在 Web 布局设计中时常会碰到全屏的效果时，可能会碰到在限制宽度的容器中实现全屏效果。本文通过 CSS Grid 解决这种布局问题。记一次 Vue 项目的重构本文记录了作者重构 Vue 项目后的总结和心得体会。靠谱程序员必备技能——重构“重构本质上是一种代码整理技术，这项技术使得代码整理的效率更高，风险更小。”作者从是什么、为什么、怎么做、何时做等多个角度分享了 ...继续阅读 (7)

Vue 的 Virtual DOM 实现：snabbdom 解密Vue 2.0 的 Virtual DOM 实现复刻自 snabbdom。本文对 snabbdom 的源码进行了解读。HTML标签及在实际开发中的应用HTML5 中 area 和 map 标签依然顽强存在。浅谈 HTTP/2 Server PushServer Push 的意义很简单，说白了就是为了提前推送响应。这其中包含两个问题：推什么？怎么推？使用 Headless Chrome 进行页面渲染Chrome 59 之后提供了 Headless 模式，允许在命令行中使用 Chromium 以及 Blink 渲染引擎提供的完整的现代 Web 平台特性。作者通过实验发现，目前 Chrome 的远程接口仍然无法提供较好的开发者体验。GUI 应用程序架构的十年变迁“随着现代浏览器的日渐流行，Web 以及混合开发技术的发展，大前端的概念日渐成为某种共识；而无论 iOS、Android、Web 这样的端开发还是 React Native、Weex 这样的跨端开发，其术不同而道相似。”CSS 变量教程目前的所有主要浏览器都已支持 CSS 变量，本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。CSS Animations v.s Web Animations APIWeb Animations API 为开发人员提供了 ...继续阅读 (4)

从前端工程师到 AR 工程师这篇文章介绍了一个图像识别 demo，将不同的图片对准检测区域，会出现不同天气效果。Vuex 框架原理与源码分析Vuex 是一个专为 Vue 服务，用于管理页面数据状态、提供统一数据操作的生态系统。该文从实践中产生的问题出发，对 Vuex 的工作流程与原理进行了深入分析。SVG 动画精髓这篇文章详细讲解了 SVG 中的一些高级动画特效，如 SVG 动画标签、渐变、路径动画、线条动画、SVG 裁剪等。V8 Ignition：JS 引擎与字节码的不解之缘Ignition 是 V8 引擎最近推出的字节码解释器。本文带我们分析了 V8 引入字节码的动机到底是什么。10 个基于 JavaScript 的机器学习实例基于 JavaScript 的机器学习生态体系正在不断的发展，通过浏览器和一些熟知的 JavaScript 代码就能体会到机器学习的极大乐趣。Canvas 学习：图像合成合成是指如何精细控制画布上对象的透明度和分层效果。通过控制 globalAlpha、globalCompositeOperation 这两个属性就可以实现 Canvas 中的不同合成效果。实现精准的流体排版原理精准流体排版最核心的问题，就是浏览器视窗大小改变时，font-size 能够根据视窗大小做到精准变化。解剖 WebGL & Three.js 工作原理这篇文章主要解答两个问题：We ...继续阅读 (2)

Webpack 与 Browser-Sync 热更新原理从 EventSource 开始讲起，分析 webpack-hot-middleware 和 browser-sync 背后的技术。Vue2.0 源码阅读：模板渲染作者带你读 Vue2.0 源码之模板渲染。前端工程化的部署与测试现在前端构建工具广泛应用于执行一些自动化的构建任务，但实际上，它们能做更多，Nodejs 的发展也支持我们能做更多，如自动化部署和自动化测试。CSS :focus 伪类、JS focus 事件提高网站键盘可访问性所谓“键盘可访问性”，指的是用户只使用键盘访问网站的能力。其实我们只要平时注意 HTML 语义化，不要重置 outline，基本上键盘可访问性就已经及格了。熟练工如何拔高 & 零碎知识的整理“在学习这些变化的知识时，也有不变的东西存在。知识是学不尽的，但是能力可以不断地提升，随着经验的丰富，能力也会跟着一起上去。”CSS 新知识： flow-root该文介绍了 CSS 中 display 的新属性值 flow-root，这是一种最新的浮除浮动的方案。Redux 源码剖析及应用该文主要包含 Redux 设计思想、源码解析、Redux 应用实例应用三个方面。CSS Grid 布局这样玩通过几张图快速掌握 CSS Grid 的核心概念和使用技巧。Weex 中别具匠心的 JS Framework作者 ...继续阅读 (5)

如何让博客速度快到哭 —— Web 性能优化实践前方高能，一份 PPT 带你看屈屈老师如何分析、优化个人博客~Vue SSR 从入门到 Case Study作者在使用 Vue 服务端渲染之后出现严重性能问题，于是就有了这篇 Case Study。如何处理好前后端分离的 API 问题API 使用的第一原则：不要『相信』前端提供的数据，不要『相信』后台返回的数据。单页应用的数据流方案探索民工叔最近的分享，从 Model Driven View 聊到 Reactive Programming，从 Cycle.js 的 MVI 模型聊到组件化、状态管理。推荐必读。基于 Node.js 的声明式可监控爬虫网络爬虫重构过程的记录。大型高性能 React PWA 如何消除各类性能瓶颈?看看 Twitter Lite 作为一个 React.js PWA 应用是如何消除各类常规与罕见之性能瓶颈的。JavaScript 内存泄漏教程阮老师的讲解内存泄漏、GC 的教程。移动 web 之滚动篇移动端 Web 开发中滚动相关问题及其解决方案的总结。纯 CSS 实现瀑布流布局实现瀑布流布局的三种方式，Multi-columns、Flexbox 和 Grid layout。Matter.js 2D 物理引擎试玩报告物理引擎是一个计算机程序，使用质量、速度、摩擦力和空气阻力等变量，模拟了一个近似真实的物理系统，为 ...继续阅读 (11)

H5 互动的正确打开方式对前端来说，互动应该怎么去做？应该怎么把前端各种的技术如何到互动页面里面来，让我们的观众和用户更好的去理解你的产品，或者更好的去吸引他来用我们的产品？通往未来的前端工程师畅想一下，未来的前端工程师会是什么样的呢？Emoji 简介这年头谁不会用 emoji 呢，但我们还真不一定谈得上有多了解。GPU 加速是什么本文主要介绍了以下几点问题：GPU 加速能做什么；GPU 是什么，如何用 Chrome devtools 进行分析 debug；如何开启 GPU 加速；GPU 加速隐藏的坑。用 Git 钩子进行简单自动部署Git 钩子是在 Git 仓库中特定事件触发后被调用的脚本。通过钩子可以自定义 Git 内部的相关行为，在开发周期中的关键点触发自定义的行为。天天写业务代码的那些年，我们是如何成长过来的天天写业务代码如何成长？本文作者分享了自己的经验：组内技术活动，花时间投入练习，假想项目的重构。在 Node.js 中引入模块：你所需要知道的一切都在这里本文介绍了 Node.js 中引入模块的解析、加载、打包、VM 功能处理、缓存等五大步骤。CSS 揭秘整理之半透明边框和 CSS 边框有关的那些事儿~为什么你统计 PV 的方式是错的？Google 工程师 Philip Walton 对 PV 统计方式的一些反思，他认为目前的 PV 统计手段“已经和 WEB 技术的演进 ...继续阅读 (6)

移动端通过 input[type="file"] 开启前置摄像头iOS 10.3 以后可以通过给 input[type='file'] 的标签里指定 capture="user" 来调用手机前置摄像头了。色域媒体查询标准与使用色域媒体查询是 CSS Media Queries Level 4 中新增的媒体属性。色域媒体查询允许我们根据输出设备的支持色域分类应用不同的样式。搜索结果的最佳实践分享10 个有效的设计指南，以帮助你改进搜索结果的用户体验。浅析 GIF 格式图片的存储和压缩深入理解表情包~从 Chrome 源码看 JS Object 的实现通过 V8 的源码尝试分析 Object 的实现。关于缓存的那些风流事儿了解 preload、HTTP/2 Push、Service Worker 等浏览器缓存技术及其运作方式，能让我们更好地解决问题，减少不必要的麻烦。剖析 Babel：Babel 总览Babel 不仅可以让我们的新技术的普及提前几年，还让我们可以通过写插件做更多的事情，比如做自定义规则的验证，做 node 的直出、node 端的适配工作等等。聊聊 HSTS 下的 HTTPS 降级问题HSTS 的作用是为了在用户通过 HTTP 访问网站时不需要服务器做 301/302 跳转，直接一个 307 本地强制使用 HTTPS 访问网站，这可以防止用户在第一次发出请求时被劫持，也减 ...继续阅读 (14)

深入理解 JSON如何理解 “JSON是一种轻量的数据交换格式”？JSON 和 JS 对象的区别在哪里？与 JSON 相关的函数你真的都弄懂了吗？移动应用设计：综述、导航和浏览移动应用如何做到有用，有意义并且有价值，以使客户满意并留存呢？ Google 的 UX 研究主管 Jenny Gove 为您详细介绍创建一款优秀的移动应用的 25 条原则。聊聊前端开发的测试养成写测试的好习惯能避免很多问题，极大的提升效率，避免重复 debug。在写代码的时候就要从可测试如何测试的角度思考，尽量每一行代码都是有用且符合预期的。真正了解 CSS3 背景下的 @font face 规则@font face 的玩法，不止字体图标而已，已远远超出想象。CSS font-family 常见中文字体对应的英文名称那些中文字体的英文名到底是什么？除了 “Microsoft Yahei” 之外，你还知道些别的吗？Canvas 学习：贝塞尔曲线重温 Canvas 中的贝塞尔曲线。Canvas 提供了 quadraticCurveTo() 和 bezierCurveTo() 两个独立的方法，分别用于绘制二次、三次贝塞尔曲线。你真的理解 CSS 的 linear-gradient？图解 CSS 线性渐变工作原理。移动端上遇到的各种坑与相对解决方案内容如题，移动端开发中需要注意的问题和解决办法，总结还挺全面。如何正确 ...继续阅读 (15)

fetch 没有你想象的那么美对 fetch API 的一些反思、总结。“fetch 是一个相当底层的 API，在实际项目使用中，需要做各种各样的封装和异常处理，而并非开箱即用，更做不到直接替换 $.ajax 或其他请求库。”如何撰写 Git 提交信息一个项目的长期成功靠的是其可维护性，以及一个拥有比项目的日志更强大的工具的维护者。Reduce 和 Transduce 的含义reduce 是三种运算的合成：遍历，变形，累积。移动端输入框填坑系列移动端输入框总会遇到各种各样的问题，如何使移动web的输入框体验更贴近原生呢？脚本错误量极致优化：监控上报与 Script error本文基于在手 Q 家校群前端脚本错误量优化的方案，致力于打造极致的脚本错误优化。WebAssembly 为什么比 asm.js 快？WebAssembly 是为 Web 而设计的、可以生成浏览器可执行的二进制文件的编程语言。通过本文可以阅读到一系列关于 WebAssembly 的介绍。解析 vue 2.0 的 diff 算法尽量不要跨层级的修改 DOM；设置 key 可以最大化的利用节点；不要盲目相信 diff 的效率，在必要时可以手工优化。页面滤镜效果及高斯模糊效果CSS filter 属性示例。全面解读 Math 对象及位运算对 Math 对象、位运算等基础知识比较全面的介绍。10 个关于 Node.js ...继续阅读 (8)

滴滴 webapp 5.0 Vue 2.0 重构经验分享文中介绍了滴滴重构过程中遇到的问题，以及解决方案。可以看看大型应用是如何做产品升级和技术重构的。Pointfree 编程风格指南本文要回答一个很重要的问题：函数式编程有什么用？png 的故事：获取图片信息和像素内容现在时富媒体时代，图片的重要性对于数十亿互联网用户来说不言而喻，本文给大家剖析 png 格式。CSS Modules 入门及 React 中实践CSS Modules 很好的解决了 CSS 目前面临的模块化难题。支持与 CSS处理器搭配使用，能充分利用现有技术积累。如果你的产品中正好遇到类似问题，非常值得一试。CSS 自定义属性 — 基础篇本文介绍了什么是 CSS 自定义属性以及它们的语法。对 virtual-dom 的一些理解Vue 2.x 、React 都引入了 Virtual Dom 的概念，来更加高效地更新 dom 节点，提升渲染性能。本文以 Matt-Esch/virtual-dom 作为学习对象，深入浅出给大家介绍 virtual-dom。加快页面打开速度页面性能优化，常读常新。我眼中的 JavaScript 函数式编程本文不是形式化的概念介绍，而是重点展示在 JavaScript 中到底什么是函数式的代码、函数式代码与一般写法有什么区别、函数式的代码能给我们带来什么好处以及常见的一些函数式模型都有哪些。 ...继续阅读 (9)

Mobx 思想的实现原理从源代码剖析 mobx 思想的实现过程，并且使用了 proxy，对新增的变量也可动态检测。在 NodeJS 中体验 WebAssembly 技术WebAssembly 作为一个门新的语言，已经得到了许多 Javascript 引擎的支持，并可在 NodeJS 中体验。Ramda 函数库参考教程Ramda 函数库基本使用教程。从工程化角度讨论如何快速构建可靠 React 组件利用工程化手段去保障快速地开发可靠的组件，工程化是手段和工具，快速可靠是目标。借助 SVG 实现背景透明 jpg 图片抠图的事情不少见，又要 jpg 的小尺寸好效果，又要背景透明，clip-path 帮你解决难题。我理解中的“大前端”/“大无线”本文记录了小芋头君所在团队最近的一些变化和思考。深入浅出 JavaScript 中的隐式转换跟着标准看懂问题，长文一篇，真可谓深入浅出。我是如何开始制作 CSS 图片的作者参加了“每日 CSS 图像”的挑战，每天一个主题，只能使用 CSS 完成。“这个挑战给了我每天继续创建图像的组织性和一致性，它还帮助我创造性地思考如何用新的思维去表达自己，同时了解到更多的 CSS 技巧。”JavaScript Just-in-timeJIT 是使 JavaScript 运行更快的一种手段，通过监视代码的运行状态，把 hot 代码（重复执行多次的代码）进行优化。通 ...继续阅读 (22)

Vue.js 2.2.0 正式发布Vue.js 2.2.0 正式发布啦，快看看有哪些变化吧~浅析 requestAnimationFrame“写 JavaScript 的人了解一帧动画在哪行代码开始，哪行代码结束，却不了解应该何时开始，应该何时结束，而在内核引擎来说，事情却恰恰相反，所以二者很难完美配合，直到 requestAnimationFrame 出现。”线条之美，玩转 SVG 线条动画使用 SVG 和 CSS 制作酷炫的 SVG 线条动画。你不知道的前端新特性这些前端新知识，你有必要了解并付诸实践。浅谈 Web 客户端追踪随着互联网络的广泛普及，数以亿计网民的网络行为数据早已成为最宝贵的资源，企业通过五花八门的各种手段了解网民的行为和隐私数据，用于广告投递、用户兴趣分析等，进而作为决策的依据。利用Web客户端对用户行为进行收集和追踪是重要手段之一。编写 Node.js REST API 的 10 个最佳实践本文介绍了编写 Node.js REST API 的最佳实践，包括如何命名路由、进行认证和测试等话题。一张漂亮的可视化图表背后这篇文章讨论了可视化作品背后的一些视觉元素理论，以及人类的视觉识别机制。在这些机制的基础上，介绍了如何运用常用的设计原则来进行视觉编码。前端服务化——页面搭建工具的死与生“失败者最多的路，并不一定是死路。如果都没有抛开过头脑里的成见，没有进行过独立 ...继续阅读 (10)

多行文本溢出显示省略号的JS实现本篇文章主要介绍 JS 通过折半查找及折半查找的变种差值查找来实现最终目的的思路。RxJS 入门指引和初步应用“本篇通过一些简单例子介绍了 RxJS 的使用场景，可以用这么一句话来描述它：其文简，其意博，其理奥，其趣深。”Web 持续集成工作实践持续集成是通过平台串联各个开发环节，实现和沉淀工作自动化的方法。函数式编程入门教程阮老师的函数式编程入门教程~深入了解 CSS 字体度量，行高和 vertical-align我真的理解了 CSS 中的 line-height 和 vertical-align 属性吗？好像并没有。了解 CSS 属性 font-kerning, font-smoothing, font-variant本文很简单，了解几个可能平时用得不太多，长得不太熟的 font 相关的几个 CSS 属性，分别是：font-kerning，font-smoothing 和 font-variant。深入理解 JavaScript Errors 和 Stack Traces关于 JavaScript 中的 Error 处理和堆栈追踪。从 Chrome 源码看浏览器如何计算 CSS通过阅读源码，学习浏览器是如何解析 CSS 的。使用 Node.js 实现文件流转存服务一篇使用 Node 实现文件转存、分片上传的教程。聊聊 Node.js 中各种 de ...继续阅读 (9)

JavaScript 启动性能瓶颈分析与解决方案“启动阶段的性能至关重要，缓慢的解析、编译与执行时间可能成为你网页性能的瓶颈所在。我们应该评估页面在这个阶段的时间占比并且选择合适的方式来优化。”CSS中的基本图形和路径学习使用 CSS 中的基本图形函数和路径图形函数。基于 CSS3 column 多栏布局实现水平滑页翻页交互挖掘 column 多栏布局的潜力，实现看上去很棘手的多栏布局实现水平滑页翻页交互效果。Node.js 这个反序列化的漏洞到底有多大？听说 Node.js 出了个漏洞？先别急，看看这篇文章，并默念三遍：eval 不能用，eval 不能用，eval 不能用。从达标到卓越 —— API 设计之道“新技术层出不穷，长江后浪推前浪，而浪潮褪去后能留下来的，是一些经典的设计思想。”“蝉原则”与 CSS3 随机多背景随机圆角等效果“蝉原则”，英文称作“cicada principle”，是一种以质数作为循环周期，让事物的重复出现符合“自然随机性”的规则。页面链接跳转历史 URL 不记录的兼容处理踩坑历史。“等一下，我碰！”——常见的 2D 碰撞检测各种碰撞检测方法：外接图形判别法、光线投射法、分离轴定理等。Effective 前端：避免页面卡顿学习分析、衡量页面卡顿的情况，并通过拆分代码段、减少 layout、简化 DOM 结构等手段进行优化。Vue.js 资源分享关于 V ...继续阅读 (12)

一次“失败”的尝试：在 JavaScript 中实现 LINQ本文利用 C# 中 LINQ 的思路，尝试用 JS 实现 LINQ。虽然性能不太给力，但思路还是很赞滴~Angular 中的通信方式本文简要介绍了 Angular 中的实体间通信方式，帮助读者编写更易于维护的代码。什么是 Physical Web ？“Physical Web 是一种基于位置的，可以和物理对象快速并无缝衔接的技术。设备能够向周围发送广播信号，任何设备都能够接收并进行处理。”Angular 2 视频教程来了第一个完整版的 Angular 2.0 系列中文视频教程，大漠穷秋出品，值得拥有~用 HSB 搭建 UI 色彩体系这篇文章介绍了 HSB 颜色模式与其他颜色模式的不同，以及如何通过 HSB 颜色模式的方法搭建 UI 颜色体系。为什么文件名要小写？文件名要小写的四个原因！聊聊设计模式：门面模式门面模式，要求一个子系统的外部与其内部的通讯必须通过一个统一的对象进行。门面模式提供一个高层次的接口，使得子系统更易于使用。聊聊设计模式：享元模式小胡子哥开始写“聊聊设计模式系列”啦。享元顾名思义便是共享小部件，很多系统或者程序包含大量对象，但是这些对象绝大多数都是差不多的，除了一些极个别的属性外。CSS Exclusions：让布局变得更有意思文章介绍了 CSS Exclusions 模块的两个新属性 wrap-fl ...继续阅读 (11)

V8 Object 内存结构与属性访问详解V8 主要从属性访问、动态机器码生成以及高效的垃圾回收等三方面着手性能优化。这篇文章阐述了 Obejct 在 V8 中的内部结构。Webpack2 升级随笔Webpack2.2 发布正式版后赶紧升级了一下，带大家看看 Webpack2 带来了那些变化和特性~理解 ES6 中的 Temporal Dead ZoneTDZ 并没有明确地写在 ES6 的标准文件中，一开始是出现在 ES Discussion 讨论区中，是对于某些遇到在区块作用域绑定早于声明语句时的状况时，所使用的专用术语。JavaScript 很少为人所知的玩法JavaScript 已将其触角延伸到了很多领域，变换出了很多新奇的玩法，本文将带着我们探索一些 JavaScript 很少为人所知的玩法。拥抱未来的 CSS 布局：flex 与 grid很详细的 flex 和 grid 布局系列教程。使用 Service Worker 实现加速/离线访问静态 blog 网站如题，一篇关于 Service Work 实践的文章，非常详细。JavaScript 异常处理的演进本文讲解了从函数回调，到 ES7 规范的异常处理方式。异常处理的优雅性随着规范的进步越来越高，不要害怕使用 try catch，不能回避异常处理。大话 Web Audio APIWeb Audio API 的功能与应用 ...继续阅读 (8)

V8 Object 内存结构与属性访问详解V8 主要从属性访问、动态机器码生成以及高效的垃圾回收等三方面着手性能优化。这篇文章阐述了 Obejct 在 V8 中的内部结构。Webpack2 升级随笔Webpack2.2 发布正式版后赶紧升级了一下，带大家看看 Webpack2 带来了那些变化和特性~理解 ES6 中的 Temporal Dead ZoneTDZ 并没有明确地写在 ES6 的标准文件中，一开始是出现在 ES Discussion 讨论区中，是对于某些遇到在区块作用域绑定早于声明语句时的状况时，所使用的专用术语。JavaScript 很少为人所知的玩法JavaScript 已将其触角延伸到了很多领域，变换出了很多新奇的玩法，本文将带着我们探索一些 JavaScript 很少为人所知的玩法。拥抱未来的 CSS 布局：flex 与 grid很详细的 flex 和 grid 布局系列教程。使用 Service Worker 实现加速/离线访问静态 blog 网站如题，一篇关于 Service Work 实践的文章，非常详细。JavaScript 异常处理的演进本文讲解了从函数回调，到 ES7 规范的异常处理方式。异常处理的优雅性随着规范的进步越来越高，不要害怕使用 try catch，不能回避异常处理。大话 Web Audio APIWeb Audio API 的功能与应用 ...继续阅读 (1)

requestIdleCallback 后台任务调度如果 JS 也可以多线程，是不是一个特别兴奋的事情呢？如果 JS 可以知道当前浏览器是否处于繁忙状态，是不是更兴奋呢？那就来看看 requestIdleCallback 吧，保证让你特别的兴奋的哦~聊聊 SVG 基本形状转换那些事SVG 预定义的几种基本形状可通过 path 路径转换实现，而常用的路径动画通常也可以由 stroke-dasharray 和 stroke-dashoffset 等两个属性实现。聊聊 CSS Shapes 规范的下一个版本学习使用 polygon() 函数绘制复杂多边形，并使用 Chrome 插件帮助绘制，利用 url() 函数引用图像，将图像当作图形形状。编写 Node 和浏览器共用的 JavaScript 包开发在 Node 和浏览器中都能正常工作的 package，需要注意些什么?CSS 书写模式的 24 种方式书写模式是我们创建的所有布局的首要基石。关于缓存和 Chrome 的“新版刷新”Chrome 54 默认启用新的刷新策略。只有页面本身被发起了条件请求，所有引用的子资源都直接读取了缓存。什么阻塞了 DOM？在这篇文章中，我们会深入了解 DOM 阻塞问题及其解决方法。1 月前端面试记最近流传挺火的一篇面试笔记，可以根据自己的知识结构对比下，看看你还缺些什么。2017 前端性能优化清单老外总结 ...继续阅读 (14)

requestIdleCallback 后台任务调度如果 JS 也可以多线程，是不是一个特别兴奋的事情呢？如果 JS 可以知道当前浏览器是否处于繁忙状态，是不是更兴奋呢？那就来看看 requestIdleCallback 吧，保证让你特别的兴奋的哦~聊聊 SVG 基本形状转换那些事SVG 预定义的几种基本形状可通过 path 路径转换实现，而常用的路径动画通常也可以由 stroke-dasharray 和 stroke-dashoffset 等两个属性实现。聊聊 CSS Shapes 规范的下一个版本学习使用 polygon() 函数绘制复杂多边形，并使用 Chrome 插件帮助绘制，利用 url() 函数引用图像，将图像当作图形形状。编写 Node 和浏览器共用的 JavaScript 包开发在 Node 和浏览器中都能正常工作的 package，需要注意些什么?CSS 书写模式的 24 种方式书写模式是我们创建的所有布局的首要基石。关于缓存和 Chrome 的“新版刷新”Chrome 54 默认启用新的刷新策略。只有页面本身被发起了条件请求，所有引用的子资源都直接读取了缓存。什么阻塞了 DOM？在这篇文章中，我们会深入了解 DOM 阻塞问题及其解决方法。1 月前端面试记最近流传挺火的一篇面试笔记，可以根据自己的知识结构对比下，看看你还缺些什么。2017 前端性能优化清单老外总结 ...继续阅读 (6)

Clean JavaScript：写出整洁的 JavaScript 代码这篇文章介绍了编写高可读性、高可用性的 JavaScript 代码的实践经验，常读常新。真的了解 Gzip 吗？介绍 Gzip 及其使用。如何设计一个前端监控系统“每一次迭代都要知道这个迭代哪里出了问题，然后再针对问题做优化，而不是频繁的改版，持续优化，这个就必须建立在比较良好的数据监控与数据分析上，人有偏见但是数据不会。”JavaScript 函数式编程存在性能问题么知乎上的一个问答，“先 map 再 reduce 把数据遍历了两次，而原来的写法只需要遍历一次”，这种疑惑想必很多人都有。justjavac 的回答值得一读，“越是使用奇技淫巧，性能就越高”，但对普通开发者而言，“过早优化是万恶之源。你应该把可读性，可维护性，可测试性放到首位”。10 个 HTML 5.1 的新功能HTML 5.1 为我们提供了新的方法，我们可以使用 HTML 来创建更灵活的网络体验。HTML5 语音合成 Speech Synthesis学习使用语音合成 (Speech Synthesis) API。JavaScript 正则表达式一条龙讲解这篇文章从正则原理、语法一览、JavaScript 中的正则、ES6 对正则的扩展、正则表达式实践等方面进性了讲解。Service Worker 全面进阶这篇文章对 Service Worke ...继续阅读 (10)

Clean JavaScript：JavaScript 风格指南这篇文章介绍了编写高可读性、高可用性的 JavaScript 代码的实践经验，常读常新。你真的了解 Gzip 吗？介绍 Gzip 及其使用。如何设计一个前端监控系统“每一次迭代都要知道这个迭代哪里出了问题，然后再针对问题做优化，而不是频繁的改版，持续优化，这个就必须建立在比较良好的数据监控与数据分析上，人有偏见但是数据不会。”JavaScript 函数式编程存在性能问题么知乎上的一个问答，“先 map 再 reduce 把数据遍历了两次，而原来的写法只需要遍历一次”，这种疑惑想必很多人都有。justjavac 的回答值得一读，“越是使用奇技淫巧，性能就越高”，但对普通开发者而言，“过早优化是万恶之源。你应该把可读性，可维护性，可测试性放到首位”。10 个 HTML 5.1 的新功能HTML 5.1 为我们提供了新的方法，我们可以使用 HTML 来创建更灵活的网络体验。HTML5 语音合成 Speech Synthesis学习使用语音合成 (Speech Synthesis) API。JavaScript 正则表达式一条龙讲解这篇文章从正则原理、语法一览、JavaScript 中的正则、ES6 对正则的扩展、正则表达式实践等方面进行了讲解。Service Worker 全面进阶这篇文章对 Service Worker 的 ...继续阅读 (4)

Clean JavaScript：JavaScript 风格指南这篇文章介绍了编写高可读性、高可用性的 JavaScript 代码的实践经验，常读常新。你真的了解 Gzip 吗？介绍 Gzip 及其使用。如何设计一个前端监控系统“每一次迭代都要知道这个迭代哪里出了问题，然后再针对问题做优化，而不是频繁的改版，持续优化，这个就必须建立在比较良好的数据监控与数据分析上，人有偏见但是数据不会。”JavaScript 函数式编程存在性能问题么知乎上的一个问答，“先 map 再 reduce 把数据遍历了两次，而原来的写法只需要遍历一次”，这种疑惑想必很多人都有。justjavac 的回答值得一读，“越是使用奇技淫巧，性能就越高”，但对普通开发者而言，“过早优化是万恶之源。你应该把可读性，可维护性，可测试性放到首位”。10 个 HTML 5.1 的新功能HTML 5.1 为我们提供了新的方法，我们可以使用 HTML 来创建更灵活的网络体验。HTML5 语音合成 Speech Synthesis学习使用语音合成 (Speech Synthesis) API。JavaScript 正则表达式一条龙讲解这篇文章从正则原理、语法一览、JavaScript 中的正则、ES6 对正则的扩展、正则表达式实践等方面进行了讲解。Service Worker 全面进阶这篇文章对 Service Worker 的 ...继续阅读 (8)

JavaScript 中的 delete 操作符作者详细讲述了 delete 操作的实现、局限以及在不同浏览器和插件中的表现。深入浅出 Vue 之 State本文对 Vue 中常用功能的内部工作原理进行介绍，推荐使用 Vue 开发的同学们看一看~2017 年前端开发者必学清单新的一年，前端开发者该学习一些什么呢？本文给出了一份清单。HTTP/2 Server Push 的研究使用 Node 进行 HTTP/2 Server Push 实验。理解 animation-fill-mode 属性animation-fill-mode 属性能够控制元素在动画执行前与动画完成后的样式。但你真的理解了如何使用吗？为什么 [ ] 是 false 而 !![ ] 是 true如果 [ ] == false，那么 !![ ] 相当于 !!false，难道不是为 false 吗，为什么会是 true 呢？如何写出好的 JavaScript —— 浅谈 API 设计普通程序员的代码和大神的代码之间，到底隔了几个段位？打造亚秒级页面加载速度网店实践经验贯穿前后端的优化经验介绍。总结起来就是三点：全面掌握关键呈现路径，充分理解网络方面的限制和缓存的重要性，并设计出可横向缩放的后端系统。提个问题：从技术到人生由“提问”得来的思考。“所有的成长过程都是从提出一个问题开始，并找到了答案，最后融入自身的价值观，完 ...继续阅读 (2)

JavaScript 中的 delete 操作符作者详细讲述了 delete 操作的实现、局限以及在不同浏览器和插件中的表现。深入浅出 Vue 之 State本文对 Vue 中常用功能的内部工作原理进行介绍，推荐使用 Vue 开发的同学们看一看~2017 年前端开发者必学清单新的一年，前端开发者该学习一些什么呢？本文给出了一份清单。HTTP/2 Server Push 的研究使用 Node 进行 HTTP/2 Server Push 实验。理解 animation-fill-mode 属性animation-fill-mode 属性能够控制元素在动画执行前与动画完成后的样式。但你真的理解了如何使用吗？为什么 [ ] 是 false 而 !![ ] 是 true如果 [ ] == false，那么 !![ ] 相当于 !!false，难道不是为 false 吗，为什么会是 true 呢？如何写出好的 JavaScript —— 浅谈 API 设计普通程序员的代码和大神的代码之间，到底隔了几个段位？打造亚秒级页面加载速度网店实践经验贯穿前后端的优化经验介绍。总结起来就是三点：全面掌握关键呈现路径，充分理解网络方面的限制和缓存的重要性，并设计出可横向缩放的后端系统。提个问题：从技术到人生由“提问”得来的思考。“所有的成长过程都是从提出一个问题开始，并找到了答案，最后融入自身的价值观，完 ...继续阅读 (3)

JavaScript 中的 delete 操作符作者详细讲述了 delete 操作的实现、局限以及在不同浏览器和插件中的表现。深入浅出 Vue 之 State本文对 Vue 中常用功能的内部工作原理进行介绍，推荐使用 Vue 开发的同学们看一看~2017 年前端开发者必学清单新的一年，前端开发者该学习一些什么呢？本文给出了一份清单。HTTP/2 Server Push 的研究使用 Node 进行 HTTP/2 Server Push 实验。理解 animation-fill-mode 属性animation-fill-mode 属性能够控制元素在动画执行前与动画完成后的样式。但你真的理解了如何使用吗？为什么 [ ] 是 false 而 !![ ] 是 true如果 [ ] == false，那么 !![ ] 相当于 !!false，难道不是为 false 吗，为什么会是 true 呢？如何写出好的 JavaScript —— 浅谈 API 设计普通程序员的代码和大神的代码之间，到底隔了几个段位？打造亚秒级页面加载速度网店实践经验贯穿前后端的优化经验介绍。总结起来就是三点：全面掌握关键呈现路径，充分理解网络方面的限制和缓存的重要性，并设计出可横向缩放的后端系统。提个问题：从技术到人生由“提问”得来的思考。“所有的成长过程都是从提出一个问题开始，并找到了答案，最后融入自身的价值观，完 ...继续阅读 (4)

Webpack 构建性能优化策略小结“随者工程开发的复杂程度和代码规模不断地增加，Webpack 暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。”这篇文章介绍了数种优化 Webpack 构建流程的办法，项目构建遇到瓶颈时可能用得上。深入 Vue.js 响应式原理一篇通熟易懂的关于vue响应式原理的文章。为什么这样也能运行? [ ].concat[1,2,3]“这段代码没有任何实用的价值，但是通过这段代码，你可以了解 JavaScript 被忽略的知识点和语法。”2016，我的前端之路：工具化与工程化作者对前端各方面的做了较深入的思考、回顾，值得一读。值得前端开发者在 2017 学习的东西慢下步伐，看看那些一直保持稳定的经典内容：它们可能会大幅提升我们的工作效率，也能让我们更好的理解不断涌现的各种新的工具。2016 前端开发技术巡礼盘点 2016 年以来前端领域发生的重要事件以及影响未来 2017 的关键性因素，这篇长文很赞。如何设计友好的 WebHook随着应用的复杂度提升，系统解耦变得越来越重要，WebHook 作为一种通用的交互方案，在设计上多留一个心眼，十分有意义！你真的了解 background-position 吗？background-position 竟然是这样计算的！以前真没发现还有这回事。这样使用 GPU 动画浏览器是如何使用 GPU 进行渲染 ...继续阅读 (5)

Webpack 构建性能优化策略小结“随者工程开发的复杂程度和代码规模不断地增加，Webpack 暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。”这篇文章介绍了数种优化 Webpack 构建流程的办法，项目构建遇到瓶颈时可能用得上。深入 Vue.js 响应式原理一篇通熟易懂的关于vue响应式原理的文章。为什么这样也能运行? [ ].concat[1,2,3]“这段代码没有任何实用的价值，但是通过这段代码，你可以了解 JavaScript 被忽略的知识点和语法。”2016，我的前端之路：工具化与工程化作者对前端各方面的做了较深入的思考、回顾，值得一读。值得前端开发者在 2017 学习的东西慢下步伐，看看那些一直保持稳定的经典内容：它们可能会大幅提升我们的工作效率，也能让我们更好的理解不断涌现的各种新的工具。2016 前端开发技术巡礼盘点 2016 年以来前端领域发生的重要事件以及影响未来 2017 的关键性因素，这篇长文很赞。如何设计友好的 WebHook随着应用的复杂度提升，系统解耦变得越来越重要，WebHook 作为一种通用的交互方案，在设计上多留一个心眼，十分有意义！你真的了解 background-position 吗？background-position 竟然是这样计算的！以前真没发现还有这回事。这样使用 GPU 动画浏览器是如何使用 GPU 进行渲染 ...继续阅读 (9)

Webpack 构建性能优化策略小结“随者工程开发的复杂程度和代码规模不断地增加，Webpack 暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。”这篇文章介绍了数种优化 Webpack 构建流程的办法，项目构建遇到瓶颈时可能用得上。深入 Vue.js 响应式原理一篇通熟易懂的关于vue响应式原理的文章。为什么这样也能运行? [ ].concat[1,2,3]“这段代码没有任何实用的价值，但是通过这段代码，你可以了解 JavaScript 被忽略的知识点和语法。”2016，我的前端之路：工具化与工程化作者对前端各方面的做了较深入的思考、回顾，值得一读。值得前端开发者在 2017 学习的东西慢下步伐，看看那些一直保持稳定的经典内容：它们可能会大幅提升我们的工作效率，也能让我们更好的理解不断涌现的各种新的工具。2016 前端开发技术巡礼盘点 2016 年以来前端领域发生的重要事件以及影响未来 2017 的关键性因素，这篇长文很赞。如何设计友好的 WebHook随着应用的复杂度提升，系统解耦变得越来越重要，WebHook 作为一种通用的交互方案，在设计上多留一个心眼，十分有意义！你真的了解 background-position 吗？background-position 竟然是这样计算的！以前真没发现还有这回事。这样使用 GPU 动画浏览器是如何使用 GPU 进行渲染 ...继续阅读 (5)