浩麟的博客

实用、前沿、深入、原创

Parcel Vs Webpack

爱折腾的前端圈时常会有新轮子诞生,只要是好东西就能快速获得大量关注,资历再好的大哥只要不如新人也很快会被替代。 横空出世的Parcel近日成为了前端圈的又一大热点,在短短几周内就获得了13K的Star。作为前端构建工具新人的Parcel为什么能在短期内获得这么多赞同?他和老大哥Webpack比起来到底有什么优势呢? 我花了6个月的时间写了一本全面介绍Webpack的图书《深入浅出 Web......

你也能写个 Shadowsocks

本文将教你从0写一个Shadowsocks,无需任何基础,读完本文你就能完成一个轻量级、高性能的 Shadowsocks 代替品。 我们暂且把最终完成的项目叫做 Lightsocks,如果你很急切地想看到结果,可以先体验本文最终完成的项目 Lightsocks ,也可以下载阅读源码。 认识 ShadowsocksShadowsocks 是一个能骗过防火墙的网络代理工具。它把要传输的原数据经过......

调试利器-SSH隧道

在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到源码修改后的运行结果。但当涉及到需要调用微信接口时,由于不和你在同一个局域网中的用户是无法访问你的本地开发机的,就必须把修改后的代码重新发布到线上域名所在的服务器才能去验证结果。每次修改都重新发布很繁琐也很浪费时间。 本文将教你如何通过 SSH 隧道把......

流媒体加密

本文只讨论应用于浏览器环境的流媒体协议的加密 为什么要加密视频付费观看视频的模式是很多平台的核心业务,如果视频被录制并非法传播,付费业务将受到严重威胁。因此对视频服务进行加密的技术变得尤为重要。 本文所指的视频加密是为了让要保护的视频不能轻易被下载,即使下载到了也是加密后的内容,其它人解开加密后的内容需要付出非常大的代价。 无法做到严格的让要保护的视频不被录制,原因在于你需要在客户端播放......

使用HeadlessChrome做单页应用SEO

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。使用这些框架极大的提升web用户体验和开发效率的同时缺带来一个新问题,那就是这样的网页无法被搜索引擎收录。虽然这些web框架支持服务端渲染,但这可能又会增加开发成本。 有没有一个可用于任何单页应用的SEO解决方案,让我们不用对代码做改变保持原有的开发......

基于HeadlessChrome的网页自动化测试系统-FinalTest

本文还未完成,还在不断补充中 你的团队是不是遇到过网页出故障了无法第一时间知道只能等用户反馈后才知道出现了问题?我曾因为一次疏忽导致产品的一个页面不可用被批评,这让我难受低沉了一个星期。 我总是追求合理高效的方法来解决我所遇到的问题,于是我幻想要是有一个工具可以智能的监视网页一旦出现异常就提醒我们该多好。就在出故障的几天后chrome团队宣布chrome支持headless模式,这让我很......

音视频技术参考资料

入门与概念 [总结]视音频编解码技术零基础学习方法 入门启发:音视频的简单理解 视频编码基础–帧的类型 容器格式 视音频编解码学习工程:FLV封装格式分析器 传输协议 RTMP协议规范 带你吃透RTMP RTMP服务器的延迟,多级边缘不影响延迟,gop为最大因素 编解码...

webpack原理与实战

webpack是一个js打包工具,不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制,在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。 webpack原理在深入实战前先要知道webpack的运行原理 webpack核心概念 entry 一个可执行模块或库的入口文件。 chunk 多个文件组成的......

使用flv.js做直播

为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。 在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。如果你看的很吃力可以先了解下音视频技术的一些基础概念。 常见直播协议 RTMP: 底层基于TCP,在浏览器......

webpack2 终极优化

webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也正式发布了一段时间,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到 压缩csscss-loader 在webpack2里默认是没有开启压缩的,最后生......