当我们web服务启用TLS协议之后，我们通过wireshark抓包是无法查看应用层的数据的，看到的是加密过后的数据。这个时候如果我们拥有https网站的加密私钥，我们可以来解密改网站的加密流量，此外Firfox 和Chrome支持将TLS会话中使用的对称密钥保存在文件中，这个可以为wireshark使用，也可以查看TLS加密的数据。现在我们来看第二种方式操作方式。
阅读 “在wireshark中查看https http2包内容的配置方法”sourcemap 上传到sentry异常监控系统的配置记录
前端异常监控和性能监控基本是web开发的标配了，很多公司都开发自己的异常监控和页面性能监控系统，sentry是个不错的开源的性能监控平台，功能丰富，还能和gitlab ，钉钉等各个平台进行结合，将异常监控上报到gitlab或与钉钉机器人结合，这对于一般公司来说，够用了，这对于线上前端出现的异常能够实时的发现，修复。
基于sentry的基础配置就不多说了，本文的目的就是怎么将sourcemap上传到sentry服务中去，让技术人员在分析异常的时，更加方便。
将js的sourcemap文件上传到sentry 有如下三种方法,1.realases API, 2.sentry-cli 3, sentry-webpack-plugin 都可以达到我们的目的。
现在我们来通过第三种方式来实现sourcemaps文件上传到sentry服务中。我以vue-cli3的配置来一步步实现配置。阅读 “sourcemap 上传到sentry异常监控系统的配置记录”
一致性hash算法在分布式缓存服务中的应用
上一篇文章，我利用redis缓存来减轻数据库的压力，但是我这仍然是个在同一台服务器，开了redis缓存服务。在现在那些高并发的下，并保证高可用性的环境下，基本会将redis服务部署在不同机器上，当并发过多的时候，单点的redis服务很难保证高可用性，假如机器宕机，那么怎么办？假如缓存数量上亿计，查询对应的缓存列表也会耗时，这样也会导致延迟。这个时候很容易想到我们设置多台缓存服务器，当一台缓存服务器宕机的时候，然后请求发到没有宕机的缓存服务器上，但是又碰到了一个问题，我们怎么将请求打在对应缓存服务器中，假如同一个请求过来一次，请求的还是上一次请求的缓存服务器。阅读 “一致性hash算法在分布式缓存服务中的应用”
alonehero.com站点优化记录
夜空中最亮的星的个人站点，虽然是一个，cpu为单核，运行内存为1G ，带宽为2Mb的个人wordpress站点，但是经过自己几天的优化，访问的响应速度大大提高，First Contentful Panit 比之前快了将近400ms,
当然跟那些并发上百亿的服务比是天壤之别，但是优化的点还是可以记录下的。
这边正的要感谢阿里云的快速发展，让任何人配置自己的站点更加容易。在这个优化过程中，用的阿里云产品有云服务器，CDN服务，证书服务，OSS存储服务，性能测试服务，快照服务。
Puppeteer在21世纪绘本大赛测试初次体验
前端Web UI自动化测试，一直是个难点，需要针对不同的设备，但是大部分的WebUi测试，我们还是可以模拟的，之前有PhantomJS 用于前端UI无渲染测试，可以进行图像的对比，但是Puppeteer的横空出世直接宣告PhantomJS的的死刑。Puppeterr的具体信息，见官网
我们碰到的需求是，在21世纪大赛中的分享页面，如果某一个作品的在三分钟内点赞超过400次，那么给于点赞过于频繁的提示，虽然在测试环境测试通过，但是在线上回归测试的，怎么模拟这个现象。一种使用脚本调用点赞接口，但是这种情况，我们无法看到真实的界面，怎么截图看到提示，另一种就是我们利用Puppeteer来模拟的用户的操作，这种情况下，不需要自己调用接口。
canvas中getImageData(),toBlob(),toDataURL()跨域问题的解决
昨天在吃饭过程中，和同事聊到canvas跨域的的限制，我一开始以为canvas所有的API接口操作不同域的图片都会跨域，但是这是一个错误的想法，比如使用drawImage()方法将图片渲染在canvas中是没有跨域的限制的。
在了解跨域的时候，我们首先要搞清楚什么是浏览器的同源策略。阅读 “canvas中getImageData(),toBlob(),toDataURL()跨域问题的解决”
让Web站点优化变得容易：GoogleI/O 2018(译)
原文地址Web Performance Made Easy: Goodle I/O 2018 edition
一直以来，我们都在竭尽全力的优化web站点，为了是web站点加载更快，性能更好。在这篇文章中，我们想要向大家分享新的工具，方法，库来优化web站点性能。首先，我们会展示在开发Oodles Theater App 的过程，我们用到的一些优化手段，然后我们将会谈论预测加载以及使用guess.js的计划。阅读 “让Web站点优化变得容易：GoogleI/O 2018(译)”
html5优化指南
web前端发展到2018年的现在，技术已日新月异，从以前的table布局,到利用position + float+盒模型布局到flex弹性布局，到grid布局，前端技术从Jquery到MVVM,到Google提出的PWA,以及现在的webassembly 人类对于更好的体验，更快的速度的追求，是无止境的，前端页面优化一直是个永恒的话题。那么到现在，我们针对前端的优化有哪些方案呢？
页面加载速度
页面加载速度慢是造成用户体验差的最致命的因素，这个是我们首先需要考虑的一个因素。
从下面的研究数据我们可以看出一些端倪
- 53%的用户会放弃一个加载超过3s网站 —SOASTA Google study report
- 当一个网站的加载变快，用户停留的时间就越长的，用户更愿意在加载快的网站上购买东西。 —WPO Stats
- 加载速度慢的网站，对SEO优化是有害的，这个会降低网站的排名，导致网站访问的频率降低。 —Search Engine Land