前端优化，这是一个很大的范围。可能平时更多的文章是基于某一点去深入的讲解。所以趁机整理一套前端优化的基础大纲，一方面给让自己沉淀下这些知识，另一方面也方便后续优化时有个清单可以去对照着优化。

本文详细的讲述了 useCallback 与 useMemo 的使用场景，以及有哪些使用中常遇到的问题与采坑点。

nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求，并对需要做gzip的类型做gzip压缩，该模块是默认基础的，不需要重新编译，直接开启即可。

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

本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。（这个渲染过程来自MDN） Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而…

相信使用过<video>标签的都知道，<video>标签在pc端跟手机端显示的样式并不一样，而且还有个很蛋疼的就是微信中内置的浏览器，播放的时候会自动全屏问题。 接下来我们通过例子来分析下使用过程中可能碰到的一些问题，供大家参考。 这是代码，只加了controls="contr…

React性能优化是在业务迭代过程中不得不考虑的问题，大部分情况是由于项目启动之初，没有充分考虑到项目的复杂度，定位该产品的用户体量及技术场景并不复杂，那么我们在业务前期可能并不需要考虑性能优化。

下面是播放的完整流程：播放器加载一个网络url，首先要进行网络请求，网络如何优化，涉及到网络优化的方方面面。网络拉取回来数据之后，识别一下当前视频的具体封装格式，这个可以正式流式视频，也可以是普通视频

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深…