最近项目上线，用户一多，页面就卡得不行。首屏加载 3 秒起，滚动掉帧，手机发烫……被 QA 喊去聊了好几次。 没办法，只能低头研究性能优化。翻了一圈文档和实战案例，发现现代浏览器其实给了我们很多“外挂

为什么需要 Web Worker？什么是Web Worker？怎么使用？在实战有什么应用场景，本文主要梳理知识点与解答这些问题

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

在前端性能优化中，浏览器缓存一直占有比较重要的地位，一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷，所以了解浏览器的缓存机制原理，对于前端工程师来说，是很有必要的。 浏览器先根据资源请求的http头部信息来判断…

最近这一年，作为一名前端狗，一直在优化性能的道路一去不回头。vue、nginx、webpack、redis，能做优化的地方，都不曾放过，只为那最后一秒的舒爽！（猥琐的一笑）。 1. 安装PWA插件 目前部分浏览器还不支持service work，我们需要保证它们依旧能正常工作。…

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Sa…

自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主要的目的就是为了解决这个问题，将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个事情，除此之外，Web…

前端优化之路必不可少的知识点。 ... 本文按一定顺序总结与前端性能优化的基本点，大家可以按步骤逐一检查自己的项目，找出性能的瓶颈。如有错误遗漏欢迎补充纠正。 文章有些原理细节都在参考文章中，价值较高建议读一读。 如果发现开发时打包慢、打包体积太大，这是你就要审视下配置了。 比…