小李的博客

实用、前沿、深入、原创

使用HeadlessChrome做单页应用SEO

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

Posted by 吴小李 on 2017-06-27

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

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

Posted by 吴小李 on 2017-06-26

音视频技术参考资料

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

Posted by 吴小李 on 2017-06-03

webpack原理与实战

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

Posted by 吴小李 on 2017-05-31

使用flv.js做直播

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

Posted by 吴小李 on 2017-05-17

webpack2 终极优化

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

Posted by 吴小李 on 2017-04-30

快速优雅的为React组件生成文档

在开发React组件时我们通常需要处理2个问题：实例化这个组件以便调试为这个组件编写使用文档以便更好的让别人知道怎么使用这个组件最原始的方法莫过于开发时建一个页面用于调试，开发完后再为其手写文档。然而一个详细的React组件文档应该包括：为各种使用场景编写demo以及对应的说明，同时附上demo的源码有demo可以当场体验而不是使用者要自己写代码后才能体验这个组件它的属性列......

Posted by 吴小李 on 2017-04-30