性能分析一直是前端er们津津乐道的话题；而俗话说得好：工欲善其事，必先利其器； 说到前端性能，就少不了性能分析的利器 —— Performance 😎；我想各位前端小伙伴，在使用 Chrome 浏览器

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

实施优化方案之前，首先要知道为什么要这样优化。这就需要你上到框架原理、js、css，下到浏览器、js 引擎、计算机网络等原理都有不错的了解。所以性能优化真的涵盖了太多前端知识，甚至是绝大部分前端知识。

搜狗百科是一个服务于互联网用户的高质量内容平台。文章主要介绍团队在梳理业务时发现百科无线前端项目在研发流程、架构设计、研发效率、页面性能等方面存在诸多问题和痛点。

前言： 思考1：“从输入URL到加载完成”，经历了哪些过程？ 这个问题，相信大多数前端开发面试常被问到。我们在探索性能优化方案前，必须先弄清楚这个问题，了解页面加载到渲染的完整机制，才能找到有效的优化

1 问题定位 1.1 背景介绍 一方面通过减少页面【加载时长】，提升【用户体验】支撑部门月度【部门目标】：xxxx转换率； 努力达成上级下达的季度目标：2s（保底）、1.8s（达标）、1.2s（挑战）

引言 图片懒加载是一种优化网页性能的技术，它可以在网页加载时只加载当前屏幕可视区域内的图片，而不会一次性加载所有图片，从而提高网页的加载速度、减少后台服务器压力，并提升用户体验。让我来详细介绍一下图片

1. require.context 的 ~~三个~~ **四个** 参数 2. 前端路由自动化引入(vue) 3. require.context导致vue 路由懒加载失效

实测http1和http2性能对比，并分析Network的Timing图 测试网站 https://http2.akamai.com/demo 测试样本 378个小图片（每个图片大小 1至4kb左右）