最近在做性能监控相关的工作，将准备工作中涉及的资料进行一次整理。 合成监控（Synthetic Monitoring，SYN），就是在一个模拟场景里，去提交一个需要做性能审计的页面，通过一系列的工具、规则去运行你的页面，提取一些性能指标，得出一个审计报告。 真实用户监控（Rea…

关注公众号玩相机的程序员，第一时间阅读最新文章。 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了终端命令行工具、零配置脚手架、插件体系、图形化管理界面等。本文暂且只分析项目初始化部分，也就是终端命令行工具的实现。 0. 用法 目前 Vue CLI 同时…

关注公众号玩相机的程序员，第一时间阅读最新文章。 create react app 是 React 官方创建单页应用的方式，为了方便，下文皆简称 CRA。 本文主要就是通过源码分析对上述的理解进行阐述。 如果图片不清晰可以微信搜索公众号 玩相机的程序员，回复 CRA 获取。 0…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

随着前端技术领域的高速发展，前端开发也变得越来越复杂。业务扩张，小程序平台井喷式增加，都导致开发者肩上的负担越来越重。为了提升研发效率，减少人力浪费，我们开发了开放式跨端跨框架解决方案 Taro，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 /…

本文将先从个人背景讲起，然后谈谈在字节跳动、虎牙、YY 以及 BIGO 的面试经过，最后讲一下关于计算机基础、算法与数据结构、JavaScript 等方面的学习经验，以及聊聊个人学习经验。 2016 年到 2017 年在网易互动娱乐从事游戏品牌宣传后期美术、CC 语音（现 CC…

事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间，就必须关注剩余80%-90%的最终用户体验。 在这篇博客中，我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。…

具体的降级和缓存清除的逻辑没有画出来，因为那是解决安全生产的问题，我主要想强调方案调整带来的性能提升。 所以从上图可以看出，一个正常的请求首先会请求到 CDN，CDN 如果发现缓存中没有的话会回源到 SSR 服务器，这样首屏其实只需要一个网络请求，有效的提升的首屏性能和降低了服…

该方案主要是为了解决，前端 spa (单页面应用)，首屏渲染慢，白屏时间过长问题。 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面，并将其输出到对应的索引目录。 prerender-spa-plugin 利用了 Puppeteer 的爬…