原文链接

腾讯 Web 前端大会完美落幕。希望大家能收获满满干货。博主负责大会部份的讲师的遴选。虽然我全程都没怎么听（基本都在安排展位和发微博），但我希望通过选题的角度，以及 PPT 的内容，给大家分享一点思路和分享的导读。

本周六就是万众期待的腾讯 Web 前端大会了，小编这周激动得都睡不着，因为可以见到好多大牛，还可以跟微信群、QQ 群里技术聊得嗨的网友面基。下面小编就来介绍一下获取最佳参会体验的小 Tips。

前言

前文已经讲解过如何解析一张 png 图片，然而对于扫描算法里只是说明了逐行扫描的方式。其实 png 还支持一种隔行扫描技术，即 Adam7 隔行扫描算法。

优劣

使用隔行扫描有什么好处呢？如果大家有去仔细观察的话，会发现网络上有一些 png 图在加载时可以做到先显示出比较模糊的图片，然后逐渐越来越清晰，最后显示出完整的图片，类似如下效果：

这就是隔行扫描能带来的效果。隔行扫描一共会进行 1 到 7 次扫描，每一次都是跳着部分像素点进行扫描的，先扫描到像素点可以先渲染，每多一次扫描，图片就会更清晰，到最后一次扫描时就会扫描完所有像素点，进而渲染出完整的图片。

当然，也因为要进行跳像素扫描，整张图片会存储更多额外数据而导致图片大小会稍微变大，具体增加了什么额外数据下文会进行讲解。

本次大会将是腾讯规模最大的 Web 前端盛会。主办方腾讯， 中国顶级互联网公司之一，创造了许多亿万海量用户级的优秀 Web 应用，积累了深厚的 Web 前端开发经验 。

大会讲师将会广邀国内外的前端知名大牛，他们有著名流行框架的作者、知名前端书籍的作者、Web 工程化方面的权威等。其中还有部分讲师是从腾讯上千名前端工程师中精挑细选的优秀高级工程师，将为你带来最具实践价值、最接地气的前端开发经验分享，内容不仅涵盖 Web 新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ，还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。

无论您是资深的前端大咖，还是初出茅庐的前端菜鸟，相信都可以通过本次大会获得非常有价值的帮助。

哈希函数介绍

什么是哈希

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

基本概念

在讲解具体内容前，首先我们要清楚以下几个概念：
1. 冲突（碰撞）
对于不同的关键字 ki、kj，若 ki != kj，但 H(ki) = H(kj) 的现象叫冲突(collision) ，即不同的输入却有相同的输出。我们应该尽量避免冲突，因为冲突不仅会使我们在查找的时候效率变慢，还甚至会被攻击者利用从而大量消耗系统资源。
至于冲突的解决方案有很多种，具体可以参考这篇哈希表针对冲突的两种方式优缺点是什么?。

哈希函数的应用

哈希算法广泛应用于很多场景，例如安全加密和数据结构中哈希表的查找，布隆过滤器和负载均衡（一致性哈希）等等。
下面介绍几个常用的哈希算法。

前言

为了应对越来越复杂的 web 应用，组件化应运而生，React、Vue 等组件化框架使我们的程序更简单更加可维护。在一个组件内会将结构、样式和逻辑写在一起，虽然这违背了关注点分离的原则，但是这有利于组件间的隔离。为了顺应组件化的潮流，人们开始考虑使用 JS 上编写 CSS，styled components 就是其中一种解决方案。styled components 是一个 React 第三方库，作用是可以将样式写成组件的形式，实现在 JS 上编写 CSS。

如何在低版本 node 运行高版本 node 子进程

• 如何在低版本 node 运行高版本 node 子进程
  • 前言：四个创建子进程的函数

  • exec / execFile

  • spawn

  • fork

  • 总结

  • 如何在 node 低版本运行高版本 node 子进程

  • nvm 介绍

  • nvm 好处
  • nvm 具体原理
    • download 资源管理
    • shell 切换环境变量（3 个）
  • 结合 nvm 切换构建子进程环境变量
    • 注入环境变量
  • 子进程函数选择

  • node -c 运行生成代码

  • 进程和信号量

  • 用于优雅的检测 fis grunt 退出错误

最近在使用 Node 的子进程模块实现一些功能，对相关知识进行了一个系统的学习总结，这篇文章将会简要介绍我总结的 Node 中和进程有关的内容。包括：四个创建子进程的函数、如何在 node 低版本运行高版本 node 子进程、进程以及信号量检测。有不当之处欢迎提出，一起交流。

上次文章介绍了如何用 webgl 快速创建一个自己的小世界，在我们入门 webgl 之后，并且可以用原生 webgl 写 demo 越来越复杂之后，大家可能会纠结一点：就是我使用 webgl 的姿势对不对。因为 webgl 可以操控 shader 加上超底层 API，带来了一个现象就是同样一个东西，可以有多种的实现方式，而此时我们该如何选择呢？这篇文章将稍微深入一点 webgl，给大家介绍一点 webgl 的优化知识。

讲 webgl 优化之前我们先简单回忆一下 canvas2D 的优化，常用的 display list、动态区域重绘等等。用 canvas2D 多的同学应该对以上的优化或多或少都有了解，但是你对 webgl 的优化了解么，如果不了解的话往下看就对了~这里会先从底层图像是如何渲染到屏幕上开始，逐步开始我们的 webgl 优化。

原文地址

在上篇 《脚本错误量极致优化-监控上报与 Script error》 中，主要提到了 js 脚本错误上报的方式，并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案，于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题：”JS 代码压缩后，定位具体出错代码困难！“。本篇 《脚本错误量极致优化-让脚本错误一目了然》 将结合示例，通过多种解决方案逐一分析，让脚本错误 一目了然。

==============接上篇 HTTP/2 Server Push 详解（上）=================

译者注：上文介绍了 HTTP/2 Server Push 的基本概念和用法，下面继续深入实际使用的性能和考量。

如何分辨 Server Push 是否生效

目前，我们已经通过 Link 首部来告诉服务器推送一些资源。剩下的问题是，我们怎么知道是否生效了呢？

这还要看不同浏览器的情况。最新版本 Chrome 将在开发者工具的网络发起栏中展示推送的资源。

Chrome 显示服务器推送的资源（大图）