• 5 分钟撸一个前端性能监控工具

    Posted by : lon.y@qq.com on 2018年7月22日

    编者按:本文作者是来自360奇舞团的前端开发工程师刘宇晨,同时也是W3C 性能工作组成员。跟着他一起学习一下前端性能监控吧~ 用(上)户(帝)说,这个页面怎么这么慢,还有没有人管了?! 为什么监控 简单而言,有三点原因: 关注性能是工程师的本性 + 本分; 页面性能对用户体验而言十分关键。每次重构对页面性能的提升,仅靠工程师开发设备的测试数据是没有说服力的,需要有大量的真实数据用于验证; 资源挂了、加载出现异常,不能总靠用户投诉才后知后觉,需要主动报警。

    阅读全文...

  • 移除注释的完善思路:真的可以用正则实现?

    Posted by : lon.y@qq.com on 2018年7月22日

    导语 网上有很多自称能实现移除JS注释的正则表达式,实际上存在种种缺陷。这使人多少有些愕然,也不禁疑惑到:真的可以用正则实现吗?而本篇文章以使用正则移除JS注释为目标,通过实践,由浅及深,遇到问题解决问题,一步步看看到底能否用正则实现! 移除注释的完善思路:真的可以用正则实现? 1 单行注释 单行注释要么占据一整行,要么处于某一行的最后。 正常情况下不难,直接通过正则匹配,再用replace方法移除便可。 let codes = ` let name =

    阅读全文...

  • 数据压缩算法:LZ77 算法的分析与实现

    Posted by : lon.y@qq.com on 2018年7月22日

    LZ77简介 Ziv和Lempel于1977年发表题为“顺序数据压缩的一个通用算法(A Universal Algorithm for Sequential Data Compression )”的论文,论文中描述的算法被后人称为LZ77算法。值得说的是,LZ77严格意义上来说不是一种算法,而是一种编码理论。同Huffman编码一样,只定义了原理,并没有定义如何实现。基于这种理论来实现的算法才称为LZ77算法,或者人们更愿意称为LZ77变种。实际上这类算法

    阅读全文...

  • Javascript 将html转成pdf,下载,支持多页哦(html2canv…

    Posted by : lon.y@qq.com on 2018年7月22日

    最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/… html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。 由于html2canvas只能将它能处理的生成can

    阅读全文...

  • 关于 Vue.js:那些好的,不怎么样的和糟糕的

    Posted by : lon.y@qq.com on 2018年7月22日

    使用新的框架和库总是会让人兴奋,但也有压力。即使经过一些评估,你也永远不会知道你将会碰到什么样的意外情况。 在几乎每天使用 Vue 大约两年后,我和它的蜜月期结束了,我终于可以从一些角度来写点什么了。 Tips:以下纯属个人观点。 好的方面 响应性(Reactivity) 数据绑定在前端领域是个大问题。现在我们更专注于数据,而不像使用 jQuery 一样对 DOM 进行微观管理。Vue 通过双向响应数据绑定系统巧妙地处理这个问题。 为实现这种响应性,Vue

    阅读全文...

  • 在 Linux 上如何得到一个段错误的核心转储

    Posted by : lon.y@qq.com on 2018年7月22日

    本周工作中,我花了整整一周的时间来尝试调试一个段错误。我以前从来没有这样做过,我花了很长时间才弄清楚其中涉及的一些基本事情(获得核心转储、找到导致段错误的行号)。于是便有了这篇博客来解释如何做那些事情! 在看完这篇博客后,你应该知道如何从“哦,我的程序出现段错误,但我不知道正在发生什么”到“我知道它出现段错误时的堆栈、行号了! ”。 什么是段错误? “段错误segmentation fault”是指你的程序尝试访问不允许访问的内存地址的情况。这可能是由于:

    阅读全文...

  • 基于React+Redux的SSR实现

    Posted by : lon.y@qq.com on 2018年7月22日

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用Redux的简单的React应用程序,实现服务端渲染(SSR)。该示例包括异步数据抓取,这使得任务变得更有趣。 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前

    阅读全文...

  • 震惊! 滑动验证码竟然能这样破解

    Posted by : lon.y@qq.com on 2018年7月22日

    最近西部世界第二季很火, 小编经常分不清谁是机器人谁是真人 为了区分人类和机器, 有个人发明了一种测试, 他叫图灵~ 验证码就是一个典型的图灵测试, 英文名 captcha, 全称如下 Completely Automated Public Turing test to tell Computers and Humans Apart 全自动区分计算机和人类的图灵测试 目前主流的验证码有 图形验证码 短信验证码 滑块验证码 图中点选验证码 但现在的人工智能过

    阅读全文...

  • 喂,快给我打一个小程序预览码

    Posted by : lon.y@qq.com on 2018年7月22日

    需求 开发小程序的朋友们随时都会听到一句话:“喂,快给我打一个xxx环境的预览码”,无论你正在干什么,都得赶紧地回一句:“稍等,这就给你打码……” 然后苦逼的你build了一个xxx环境的包,打开了微信开发者工具,点了一下预览,等了一下,预览码出来了,你复制丢给你的爸爸们。 终于有一天,你正在专心致志做一些不可描述的事情时,“喂,快给我打一个xxx环境的预览码”,这时你内心怒吼了一句:“老子不给你打码!你自己打去!” 于是就有了这个需求,要搞个东西让爸爸们

    阅读全文...

  • 洞察 video 超能力系列——玩转 mp4

    Posted by : lon.y@qq.com on 2018年7月22日

    前言 只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生,不过很多同学只使用了 video 的基础功能,实际上 video 拥有强大潜能的,只要姿势正确就能让其拥有超能力。不妨从下面几个场景来逐渐了解下video 未曾被发掘的神秘空间: * 清晰度无缝切换 * 节省视频流量 清晰度无缝切换 点播领域里 mp4 是最普遍、兼容性最好的视频容器,不过 mp4 也有它的局限性,比如常见的清晰度切换,我们是无法像youtube那样做到无缝切

    阅读全文...