Alloy Team -- IT技术博客大学习 -- 共学习共进步！

• 浅谈 Web 应用的内存优化

随着 Web 应用复杂程度越来越高，以及 NodeJS 大规模投入生产环境，许多 Web 应用都会长时间运行， JavaScript 的内存管理显得更为重要。 JavaScript 具备自动回收垃圾的机制，执行环境会负责管理代码在执行环境过程中使用的内存，将某些不再被使用的的变量所占用的内存释放掉，正因如此，大多数情况我们在前端开发的时候，并不是那么关注我们的页面用了多少内存，是否合理，需不需要优化。 JavaScript 基础中有很多重要的知识点是和内存相关的，比如深拷贝和浅拷贝、闭包、原型、引用数据类型和引用传递等。

• 哈希函数介绍 | 哈希算法

在记录的关键字与记录的存储地址之间建立的一种对应关系叫哈希函数。哈希函数就是一种映射，是从关键字到存储地址的映射。通常，包含哈希函数的算法的算法复杂度都假设为O(1)，这就是为什么在哈希表中搜索数据的时间复杂度会被认为是”平均为O(1)的复杂度”.

• 多个动画间存在部分相同动画的优化方案:gka

“抓娃娃”并不陌生，存在两种结果:抓到与抓不到。在 Web 动画中，如上图，“抓到”与“抓不到”对应着两个动画，可以使用不同的动画图片资源来实现，似乎毫无异义。细做观察，不难发现：两个动画中“动画初始到抓取”及“抓取结束到动画结束”的区间中存在相同动画(滑动和晃动抓杆)。既然动画相同，那么可以通过引用同一份动画图片资源，不做相同图片的重复加载，从而减少总资源大小。 “两个动画间存在部分相同的动画，相同部分可以引用同一份动画图片资源，来减少图片的总大小。” 肉眼进行辨别哪些动画是一样的？那是不可能的。gka提供一键式制作多个动画的方式，支持多种图片优化方案(含图片去重)。 gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

• 使用 gka 一键生成帧动画

gka 是一款简单的、高效的帧动画生成工具。通过对图片集进行处理，一键式生成序列帧动画文件，并内置相关优化。

• 脚本错误量极致优化-监控上报与Script error

在前端开发工作中，除了项目开发保质保量上线以外，项目的数据监控也应该配套起来，确保线上的正常运转。如上报 pv 监控项目是否正常运转；测速上报反应项目质量；脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化、减少损失。本文基于在手Q家校群前端脚本错误量优化的方案，致力于打造极致的脚本错误优化。作为首篇，主要讲解基础的脚本错误监控和上报方式，以及常会遇到的 Script error. 的产生原因和处理方法。

• 从工程化角度讨论如何快速构建可靠React组件

React 的开发也已经有2年时间了，先从QQ的家校群，转成做互动直播，主要是花样直播这一块。切换过来的时候，业务非常繁忙，接手过来的业务比较凌乱，也没有任何组件复用可言。为了提高开发效率，去年10月份也开始有意识地私下封装一些组件，并且于今年年初在项目组里发起了百日效率提升计划，其中就包含组件化开发这一块。本文并不是要谈如何去写一个 React 组件，这一块已经有不少精彩的文章。例如像这篇《重新设计 React 组件库》，里面涉及一个组件设计的各方面，如粒度控制、接口设计、数据处理等等（不排除后续也写一篇介绍组件设计理念哈）。本文关键词是三个，工程化、快速和可靠。我们是希望利用工程化手段去保障快速地开发可靠的组件，工程化是手段和工具，快速和可靠，是我们希望达到的目标。前端工程化不外乎两点，规范和自动化。

• Omi应用md2site发布-markdown转网站利器

Md2site是基于Omi的一款Markdown转网站工具，使用简单，生成的文件轻巧，功能强大。当我们想把一堆markdown文档转成网站时，你可能有许多选择，倘若选择 md2site ，你一定会爱上她。

• AlloyTouch实现下拉刷新

在手机QQ内部，其实客户端提供了下拉刷新的能力，拖动整个webview进行下拉刷新，loading以及loading相关的wording和动画都是客户端的。解决了一部分需要下拉场景的问题。但是在某些场景下，还是需要web拥有自身的下拉刷新的能力。

• 从零开始React服务器渲染

当我们选择使用Node+React的技术栈开发Web时，React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处： 1.利于SEO：React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构，方便Google等搜索引擎的爬虫能爬到网页的内容。 2.提高首屏渲染的速度：服务器直接返回一个填满数据的HTML，而不是在请求了HTML后还需要异步请求首屏数据。 3.前后端都可以使用js。

• 你必须收藏的Github技巧

GitHub Pages大家可能都知道，常用的做法，是建立一个gh-pages的分支，通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。这里经常遇到的痛点是，master遇到变更，经常需要去sync到gh-pages，特别是纯web前端项目，这样的痛点是非常地痛。 Github官方可能嗅觉到了该痛点，出了个master当作网站是选项，太有用了。

• 用webgl打造一款简单第一人称射击游戏

背景：不知道大家还记不记得上次那个3D迷宫游戏，有同事吐槽说游戏中间有一个十字瞄准器，就感觉少了一把枪。好吧，那这次就带来一款第一人称射击游戏。写demo锻炼，所以依旧用的原生webgl，这次重点会说一下webgl中关于摄像头相关的知识，点开全文在线试玩~~

• 漫谈Nuclear Web组件化入门篇

目前来看，团队内部前端项目已全面实施组件化开发。组件化的好处太多，如：按需加载、可复用、易维护、可扩展、少挖坑、不改组件代码直接切成服务器端渲染（如Nuclear组件化可以做到，大家叫同构)… 怎么做到这么强大的优势，来回忆下以前见过的坑，或者现有项目里的坑。

• Date对象的那些事儿

前两天做了个需求需要Unix时间戳和北京时间的各种转换，其中Date对象用到的极多，今天就来讲讲我所了解到的Date对象。

• 超级小的web手势库AlloyFinger发布

针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。除了Dom对象，也可监听Canvas内元素的手势（需要Canvas引擎内置对象支持addEventListener绑定touch相关事件）。

• 前端路由实现与 react-router 源码分析

在单页应用上，前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么，当我们在谈前端路由的时候，还可以谈些什么？本文将简要分析并实现一个的前端路由，并对 react-router 进行分析。

• 移动web开发调试工具AlloyLever介绍

web调试有几个非常频繁的刚需：看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁，但是AlloyLever都支持。

• zepto/jQuery、AngularJS、React、Nuclear的演化

因为zepto、jQuery2.x.x和Nuclear都是为现代浏览器而出现，不兼容IE8，适合现代浏览器的web开发或者移动web/hybrid开发。每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需。本文将对比zepto/jQuery到Nuclear的设计和演化的过程。

• 前端开发者不得不知的ES6十大特性

ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。本文主要针对ES6做一个简要介绍。也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代，如果你想对ES6有一个快速的了解，那么请继续往下读，去了解当今最流行的编程语言JavaScript最新一代的十大特性。

• React Native for Android Windows环境搭建

React Native for Android Windows环境搭建。

• CSS Gradient详解

现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十K的图片，这怎么行。。。还好我们有CSS第三代！这次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。