- 博客(197)
- 收藏
- 关注
RSS订阅原创 WebP 方案分析与实践
对于网站来说，图片始终扮演着重要角色。图片大小直接影响网站速度、流量、运营成本以及用户体验。因此，减少图片大小成为网站优化最重要的一个环节。如果你对优化还不甚了解，推荐阅读如下文章：1.网站优化实战2.网站优化工具3.CSS 渲染原理以及优化策略4.网站性能指标 - FMP5.聚焦 Web 性能指标 TTI6.Web「性能测试」知多少？一、背景当我们在做网站性能优化的时...
2020-05-02 18:22:43
1137
原创 Web「性能测试」知多少？
身为前端的你，是否会有这样的烦恼：随着访问用户的成倍增加，站点变得越来越脆弱。任何的访问过慢或崩溃都将是一场灾难。这就对我们工程师提出了更高的要求，要保障网站的「可访问性」和「稳定性」都维持在一个较高水平。那么，是时候了解了解 Web 性能测试了！一、情景再现有一个大型推广活动来了，类似与抢火车票、淘宝双十一，你能否回答 Boss 的如下问题？1.我们的网站是否能扛住如...
2020-04-05 21:44:12
599
原创 聚焦 Web 性能指标 TTI
如果你经常做网站优化，可能会陷入一个性能指标的泥潭即「面向指标优化」。真正的用户体验从来不是指标决定，相反它应该最真实的反映用户行为。所以本节我们就来研究 TTI(Time to Interactive)，话题展开之前，我们先来了解一些背景知识。一、RAIL 模型RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的...
2020-03-29 22:23:53
2323
原创 网站性能指标 - FMP
对于前端童鞋来说，优化是一个永恒的话题。上线并不是网站开发的终点，如何吸引用户、提升用户体验，应该成为我们 F2E 的追求目标。如果你对优化还不了解，建议先阅读如下两篇文章：网站优化实战网站优化，这些工具你一定用得着当然，衡量网站性能的指标有很多，今天我们就来看一个「令人费解而又头疼」的指标 - FMP。First Meaningful Paint 是指页面的...
2020-03-15 18:47:26
1849
原创 破局：技术视野与规划
有幸参加了 51CTO 的技术峰会，一天满满的干货，感觉收益颇多。于是将重点内容整理总结，分享给大家。分享标题为《破局：技术视野与规划》，主要围绕峰会内容展开，中间夹杂一些个人见解与思考。下文多图预警，建议小伙伴们 Wi-Fi 阅读。一、目录我们将从以下四方面来展开说明：1.2019 CTO 发展报告2.技术团队模型3.技术视野4.技能发展与规划二、2019 C...
2020-03-08 18:32:43
627
原创 极简弹幕方案
重大的活动现场一般离不开 PPT 演示，可是如何有效和现场互动呢？这时候弹幕必不可少，静态的 PPT 就略显乏力。有没有一种好的方案可以二者兼得呢？如何才能使 PPT 具有交互性，这是一个值得思考的问题！可能很多童鞋想到了，如果使用「网页 PPT」 ，岂不是完美解决了这个问题。本节我们就来提供一种思路，用「PPT + 发射器 + Socket」 实现「极简弹幕方案」。...
2020-02-16 23:58:47
700
原创 GitBook 和它有趣的插件
相信很多童鞋在日常开发中都会有「说明文档」、「学习笔记」和「个人博客」的需求，那么最经济简洁的方式莫过于 GitBook 方案了，10 分钟学习，永久使用。本文将简单介绍 GitBook 的使用方式以及最佳插件搭配方案，快来运行一个与众不同而且免费托管的个人站点吧！一、安装与使用1.安装 GitBook 插件1npm install gitbook-cli -g2.查...
2020-02-02 15:20:03
642
原创 系统负载看不懂？
Web 开发会经历「开发-上线-部署」三个过程，部署之后站点的运行状态如何却鲜有关注。如果我们要估算网站能承受多大的并发，你可能需要真正了解系统负载。一、先看场景1.服务器状态（Linux 服务器通过 Top 命令查看）2.数据监控上面是两个典型应用场景，我们可以直接在服务器查看系统负载。当然，也可以获取数据本地可视化显示。听起来不错，可是问题来了：Q1：load...
2020-01-20 10:54:40
465
原创 人工智能时代，Web 前端能做什么？
最近做了一个项目，通过爬虫去抓取页面快照，然后对页面兼容性进行全面测试。但是遇到一个问题，抓取到海量页面之后，难道还要人工去分析吗？类似的场景并不会少，是否可以让机器去帮我们实现，最终输出一个可靠报告？答案是肯定的，快照生成后，我们可以对大量快照进行分析，结合 OpenCV 跨平台计算机视觉库，实现图像处理和计算机视觉方面的数据分析，最终输出结果。我们总会找到一些合适的...
2020-01-01 22:07:24
1940
1
原创 CSS 渲染原理以及优化策略
提起 CSS 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，CSS 竟然排到了第七位。我们先来看看这张排行榜：既然 CSS 这么重要，那么我们花点时间来研究相关原理也就物有所值了。本节我们就来说说 CSS 渲染以及优化相关的内容，主要围绕以下几点，由浅入深，了解来龙去脉：1.浏览器构成2...
2019-10-23 21:04:53
398
原创 网站优化，这些工具你一定用得着
工欲善其事，必先利其器。在「网站优化实战」中我们提到了一些优化的相关经验，并没有对优化工具展开讨论，这节就让我们一起上手实践吧！一、概要关于优化工具，我们主要从两方面说起：「性能评估工具」和「优化工具」。1.性能评估工具LighthousePageSpeedYSlow2.优化工具我们主要依赖「Chrome DevTools」，大致如下：Network...
2019-09-08 18:52:36
540
原创 程序员如何减少开发中的 Bug？
周会上大家抛出了一个问题，程序员如何减少开发中的 Bug？很有意思的一个话题，本篇文章我们来进行探讨与总结。一、概述爱因斯坦曾经说过：「如果给我一个小时解答一道决定我生死的问题，我会花55分钟来弄清楚这道题到底是在问什么。一旦清楚了它在问什么，剩下的5分钟足够解答这个问题。」虽然我们软件开发过程不会面临生死的抉择，但是却直接影响着用户的使用感受，决定着产品的走向。所以...
2019-08-24 11:35:27
420
原创 使用 Electron5.0 构建你的 React 项目
最近要使用 Electron 来构建 React 项目，突然发现之前的 Demo 已经不能正常运行了，有些感概技术发展的迅猛。如果你还不了解 Electron，可以看我之前的文章：初探 Electron - 理论篇，理论知识没有变。如果你想了解 Electron5.0 版本如何构建 React 项目，不妨继续看本文。需要注意：网上流传的 1.0 版本的项目应该已经启动不...
2019-07-13 13:51:17
432
原创 Git 代码统计
当我们维护一个开源项目的时候，你肯定想知道哪些人比较活跃，哪些人贡献比较多。这时候就需要一个简单易用的工具，下面我来介绍几款。一、场景目前大部分的项目可能都会用到 Git 来做代码管理，那么我们在不断的修改项目的过程中，可能会关注如下几个问题：1.每个参与者贡献代码量，按劳分配某些资源????；2.参与者的代码增删量，提交次数等；3.统计活跃度；那么，如何来对代码量做统计...
2019-07-09 15:09:34
612
原创 HTML5 之跨域通讯（postMessage）
很多情况下，我们受到浏览器的安全策略限制。如何能规避此限制，并且能安全的使用跨域通讯，这就不得不介绍一下 postMessage 了。一、关于 postMessagewindow.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值...
2019-06-11 16:31:21
741
原创 进阶 PM2
PM2 大大简化了 Node 任务操作，除了简单的应用外，我们还可以做一些有趣的事情。本节我们来探讨一下 PM2 的平滑启动以及数据监控。如果你还不了解 PM2，可以先看看PM2 初体验，或者查看PM2 用法简介。一、PM2 两种启动方式1.cluster_mode：用 cluster 来做负载均衡，我们不需要做任何代码的改动。2.fork_mode：用 fork 模式...
2019-05-24 19:55:22
563
原创 Nuxtjs 2.0 升级爬坑
当我在升级 Nuxt2.0 的过程，遇到了很多问题，逐一查找解决，废了不少时间。回头想想，真希望在升级的时候看到这样一篇文章，让我少走一些弯路。这篇文章的意义也在于此，希望对大家能有所帮助。一、为什么要从 Nuxt1.0 升级到 Nuxt2.0？我们来看看 Nuxt2.0 有哪些更新：1.支持 webpack4webpack4 有很多优化的提升，升级后就可以嗨皮的使...
2019-04-23 19:58:32
1169
原创 酷炫的 HTML5 网页 PPT
一般演讲、培训等场合，我们都离不开 PPT，那么如何做出一款与众不同而有充满科技感的 PPT 呢？这时候，我们可以尝试一下在线 PPT。一、选择在线 PPT 的几大原因1.省去了上传下载的麻烦；2.降低了客户端对 PPT 软件的依赖；3.随时更新，更灵活；4.同屏播放，全场互动，增加用户体验；…二、多种选择1.revealjs一个可以帮我们轻易使用 HTML 创建漂亮...
2019-04-15 20:07:39
665
原创 如何成为合格的技术面试官？
作为技术面试官，面试过程很少考虑候选人的感受。上来就是问，不合适就送走。虽然技术环节我很专业，但是其他细节我却知之甚少。从来没觉得这样会有什么问题，直到有一天，我参加了一场面试官培训，才意识到自身的不足。一、明确面试的目的作为公司的面试官，我们不是为了鄙视和炫耀技术，而是评估候选人能否担任工作。这属于团队建设核心工作，也是公司的一次品牌宣传。你代表的不仅是个人，还有公...
2019-04-07 21:12:42
459
原创 算法学习思路
很多前端童鞋对算法都有莫名的恐惧，究其原因无非两点：其一，对算法不了解；其二，没有找到实际应用场景。一、为什么学习算法？这是个很有意思的问题，对算法感兴趣的人，不需要问为什么，算法对他们可能是一种兴趣。曾经有位同事，他刷遍了所有算法题，只要有算法竞赛，他都会去参加。当然，也取得了不错的成绩，甚至有了自己的世界排名。一次闲聊中，我抛出了这个问题，他笑着说：没有为什么，就...
2019-04-07 19:06:18
534
原创 网站优化实战
网站优化是前端开发的重中之重，但是优化细节却十分繁杂。没有好的思路，优化很难高效的开展。本文将以实际网站来做参考，手把手教你如何一步步做好网站优化。这不是一篇 基础网站优化 文章，继续下文前，请确定已经做了如下基本优化：1.图片压缩、合并2.代码精简、混淆3.减少 iframe 使用4.避免图片 src 为空5.减少 HTTP 请求数6.避免重定向7.样式表放页头，脚本放...
2019-02-16 09:17:29
478
原创 聊一聊浏览器缓存机制
相信很多前端童鞋对于浏览器缓存都不太陌生，但是如果没有系统的归纳总结，可能三言两句很难说明白。如何才能完美的回答，这是一个值得思考的问题。当然，我们不能为了应对面试才去掌握，而应该当作技能储备起来，做到活学活用。一、为什么要缓存1.缓存可以减少用户等待时间，提升用户体验；2.减少网络带宽消耗对于网站运营者和用户，带宽都代表着成本，过多的带宽消耗，都需要支付额外的费用...
2019-02-14 08:54:13
171
原创 JS 基础｜搞懂 typeof 和 instanceof
最近在做 Code Review 的时候，发现了一些小问题，查出结果之后发现竟然是因为 typeof 和 instanceof 引发的。这属于 JS 的基础知识，正是由于太基础了，所以很容易被忽略，导致项目中随处可见的滥用。为了巩固基础，我会通过实例来详细说明，让我们一起搞懂 typeof 和 instanceof。一、typeoftypeof 其实就是判断参数是什...
2019-01-17 23:21:53
138
1
原创 网站地图方案汇总，教你玩转可视化
数据可视化一直是大数据时代的核心，因为可视化能被更多的人看懂，数据才有了价值。如果你的网站要做可视化，除了各类统计图外，唯一不可或缺的元素就是地图。不用担心，我已经帮你整理好了一份超详细的网站地图方案，快来看看吧。一、方案汇总Top 1：Mapbox（推荐指数：☆☆☆☆☆）Mapbox 地图风格会让你耳目一新，同时如同游戏般体验的地图动画效果更是如虎添翼。需要商业化...
2019-01-06 22:07:39
254
原创 前端面试官的套路，你懂吗？
最近一年陆陆续续都在面试各种不同程度的 Web 前端开发，总觉得现在前端氛围太过于浮躁，急于求成的人比比皆是。然而很多童鞋还是没有掌握面试的技巧，一次次碰壁。鉴于此，我觉得是时候总结一些面试经验了，只不过这一次我打算从面试官的角度来阐述。我是如何面试前端的？一、筛选简历我们先从筛选简历阶段说起，一般人力同事会帮我们去捞一些合适的简历，但是很多时候技术开发自己也不会闲...
2019-01-06 12:25:44
226
原创 用 Python 爬取 2018 前端热点
下午无聊在刷公众号，突然发现一篇文章「前端一年精选好文，请打包带走」。在这个跨年的日子里，我本来应该开着电视，看着跨年晚会。一、起因反复琢磨，我还是很好奇：这一年，前端精选好文都有哪些？翻了一下，有 130 多篇文章。我又退缩了，看完猴年马月了，还是先收藏吧。于是关掉手机，准备放飞自我。突然，脑子里一闪，打包，带走？嗯，我有了一个大胆的想法。二、想法既然一时半会...
2018-12-31 21:45:23
147
原创 HTML5之多线程（Web Worker）
提到 HTML5 总是让人津津乐道，太多的特性和有趣的 API 让人耳目一新。但是很多童鞋还停留在语义化的阶段，忽视了 HTML5 的强劲之处。这节我们来探讨一下多线程 Web-Worker。一、明确 JavaScript 是单线程JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。听起来有些匪夷所思，为什么不设计成多线程提高效率呢？我...
2018-12-26 08:47:17
198
原创 不会管理的程序员，永远只是一个大兵
很多童鞋都玩王者荣耀，你肯定知道大兵和英雄的区别。这里声明一下：本文的英雄都是狭义上的英雄，特指游戏中的角色。当然，我也不会和你抬杠，在游戏里大兵也是决定成败的关键。但是请别忽略，如果没有英雄，大兵可能都走不到敌方阵营。所以，英雄的重要性可想而知，领导恰恰是这样一个角色。一、题外话其实你不用惊讶，在很多招聘网站，我们都能看到如下的一些团队介绍：1.领导nice，地铁...
2018-12-16 19:22:42
104
原创 彻底搞懂 Git-Rebase
使用 Git 已经好几年了，却始终只是熟悉一些常用的操作。对于 Git Rebase 却很少用到，直到这一次，不得不用。一、起因上线构建的过程中扫了一眼代码变更，突然发现，commit 提交竟然多达 62 次。我们来看看都提交了什么东西：这里我们先不说 git 提交规范，就单纯这么多次无用的 commit 就很让人不舒服。可能很多人觉得无所谓，无非是多了一些提交纪录。...
2018-12-11 22:07:00
159
原创 究竟什么是位图？
和朋友聊天，说到了大数据存储和查找方式，朋友提到了「位图」。结果我满脑子都是「位图-矢量图」，「矢量图-位图」。难道此「位图」非彼「位图」？一、此「位图」非彼「位图」为什么会有这样的疑惑，那是因为：位图可能是一种图片类型，也可能是数据结构的 bitmap。我们会逐一来剖析位图，从这两个角度入手，全面掌握位图概念。技术是一个很微妙的东西，一旦你发现它，就会无意的捕捉到更...
2018-12-09 17:35:22
5686
1
原创 Git 版本控制之 Git-Flow
最近在着手制定开发规范，想要把项目正规高效的跑起来。计划引入 Git 版本控制，Git-Flow 便成为了首选。因为之前并没有过多接触，所以先花些时间摸索一下。一、为什么使用 git-flow当在团队开发中使用版本控制系统时，商定一个统一的工作流程是至关重要的。Git 的确可以在各个方面做很多事情，然而，如果在你的团队中还没有能形成一个特定有效的工作流程，那么混乱就将是...
2018-12-05 22:49:54
254
原创 浏览器存储之争
数据存储一直是前端的软肋，从 4KB 左右的 Cookie 到最多 10MB 的 Storage，存储之争从未停止。然而有些问题还是不能解决，这时候我们遇见了她：IndexedDB。一、前端存储困境随着业务场景的深入，前端对数据存储有了更高的要求，更多的问题也逐渐暴露出来。1.存储空间小2.无法搜索数据3.大量数据如何存储4.无法提供事务支持二、目前存储方式1.C...
2018-12-02 22:06:53
143
原创 DevOps 简介
头一次听到这个东西，真的是一脸懵逼。感觉应该类似项目管理中的一些理念，却又不是很清晰。哎，请原谅我的孤陋寡闻。一、是什么？百度百科中是这么定义的：DevOps（ Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（ QA ）部门之间的沟通、协作与整合。它是一种重视「软件开发人...
2018-11-30 16:38:05
492
原创 算法图解7 - 动态规划
动态规划作为算法的必考内容，重要性不言自明。如何理解动态规划，并能够应用到实际场景中，这是本节的重点。一、动态规划动态规划功能强大，它能够解决子问题并使用这些答案来解决大问题。但仅当每个子问题都是离散的，即不依赖于其他子问题时，动态规划才管用。二、解决方案1.每种动态规划解决方案都涉及网格。2.单元格中的值通常就是你要优化的值。在前面的背包问题中，单元格的值为商品...
2018-11-29 22:12:11
163
原创 算法图解6 - 狄克斯特拉算法与贪婪算法
从这节开始，我们来看看一些有名的算法。学习算法最重要的就是扩展思维模式，虽然短期用不上，但是长远来说，我们的思维会逐渐打开乃至升华。一、狄克斯特拉算法在狄克斯特拉算法中，你给每段都分配了一个数字或权重，因此狄克斯特拉算法找出的是总权重最小的路径。1.找出最便宜的节点，即可在最短时间内前往的节点。2.对于该节点的邻居，检查是否有前往它们的更短路径，如果有，就更新其开销。...
2018-11-29 20:35:11
282
原创 算法图解5 - 图和广度优先搜索
一直以来总是把「数据结构」和「算法」分的很开，认为图，链表都应该属于数据结构领域。然后当看到书的后面章节时，才发现有些东西并不需要明显的界限。一、图是什么？图模拟一组连接。是不是觉得很抽象？别着急，我们打个比方，朋友一起打牌，我们要记录谁欠谁钱：欠钱关系可能如下所示：好了，是时候引出我们的概念：1.图由节点 node 和边 edge 组成。2.一个节点可能与众多...
2018-11-28 22:53:23
135
原创 算法图解4 - 散列表
听到散列表，第一时间想到 Python 中的 Dict，可是我们是前端。那么散列表在 JS 中是如何描述的呢？这节，我们来一探究竟。一、散列表使用散列函数和数组创建了一种被称为散列表 hash table 的数据结构。Python 提供的散列表实现为字典 ，你可使用函数 dict 来创建散列表。1234567book = dict()>>> boo...
2018-11-27 21:53:37
190
原创 算法图解3 - 递归，快排
说起递归，我们很容易就想到了斐波那契数列，这是一道常见的笔试题。可是，为什么面试官都喜欢考察递归的掌握程度呢？这节我们来解开递归的神秘面纱。一、理解递归我们先来举个小例子：有一把钥匙在一个盒子里，这个盒子里还有盒子，而盒子里的盒子又有盒子，钥匙就在某个盒子里。那么我们如何找到钥匙呢？思路很简单，一直开盒子，如果开到盒子继续再打开盒子，直到开出钥匙。伪代码实现可能如...
2018-11-26 11:53:37
260
原创 算法图解2 - 数组和链表
我们继续上文的脚步，深入了解一下数组和链表。掌握它们之间的区别和联系，以及各自的使用场景，为后续的算法学习打好基础。一、计算机内存的工作原理为了更好的理解数组和链表，我们先来简单介绍一下计算机内存的工作原理。简单来说：计算机就像是很多抽屉的集合体，每个抽屉都有地址。需要将数据存储到内存时，你请求计算机提供存储空间，计算机给你一个存储地址。需要存储多项数据时，有两种...
2018-11-25 23:38:56
160
原创 算法图解1 - 二分查找和大O表示法
闲来无事，翻了翻《算法图解》，觉得收获颇多，所以会陆续整理成笔记，纪录学习过程。嗯，第一篇先来看看二分查找和大O表示法吧。一、二分查找二分查找是一种算法，其输入是一个有序的元素列表（必须有序的原因稍后解释）。如果要查找的元素包含在列表中，二分查找返回其位置；否则返回 null 。一般而言，对于包含 n 个元素的列表，用二分查找最多需要 log2 n 步，而简单查找最多...
2018-11-22 08:53:28
375
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人