前端性能优化列表： 1. JS 减少 DOM 操作 预加载 懒加载 tree shaking 防抖，节流 变量缓存 for遍历优先 接口数据懒请求 2. CSS 减少类的层级 硬件加速（3d canvas webgl） 雪碧图 避免使用滤镜 3. html 减少无效标签 4. 整体 减少 http ...
分类：
其他好文 时间：
2020-05-14 13:19:22
阅读次数：
68
performance常规用法 相信很多人都在使用window.performance来监控页面的性能。都会在页面onload后，去获取window.performance.timing 但如果真正分析过数据的人，都会发现window.performance.timing.loadEventEnd有 ...
HTML：使用协商缓存。CSS&JS&图片：使用强缓存，文件命名带上hash值，使用chunkhash或contenthash，不使用hash。以nodejs为例，如果需要浏览器强缓存，我们可以这样设置：res.setHeader('Cache-Control', 'public, max-age= ...
分类：
其他好文 时间：
2020-05-10 13:14:40
阅读次数：
57
关注性能是工程师的本性 + 本分； 页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。 用什么监控 关于前端性能指标，W3C 定义了强大的 Perfo ...
分类：
Web程序 时间：
2020-05-09 18:58:58
阅读次数：
78
优化其实是一件很有趣的事。。 以我的项目为例，dist文件从20M到2M... 一. 使用工具查看项目各个包的大小 首先你需要先安装webpack的一个插件webpack-bundle-analyzer，专门用来分析各个包的依赖，查看包的体积。 npm intall webpack-bundle-a ...
分类：
其他好文 时间：
2020-04-29 14:35:56
阅读次数：
71
近一年，由于笔者团队的一些变化，笔者开始承担一个BI系统的前端应用的维护和迭代，一年中，围绕着这个BI系统，发生了不少令人啼笑皆非和醍醐灌顶的故事。最近，终于有时间把它们一点点的沉淀写来，以文字的形式呈现出来。 首先，简单介绍下笔者维护的这个BI系统，和常规的BI（Business Intellig ...
分类：
其他好文 时间：
2020-04-02 15:37:36
阅读次数：
73
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末（有些参考资料可能要梯子才能观看 ...
分类：
其他好文 时间：
2020-03-30 19:21:16
阅读次数：
72
前端优化已经是一个被写烂的题材了。 虽千万人吾往矣，这里我仅分享我的一些实践经验。 欢迎一起交流 欢迎关注我的个人公众号，不定期更新自己的工作心得。 正文如下 前端性能 1. 模块化 严格来说，代码模块化并不能带来性能上的提升，但我还是将模块化提出来，因为它真的很重要，重要到几乎所有的优化都与它息息 ...
分类：
其他好文 时间：
2020-03-29 10:44:10
阅读次数：
69
参考： https://www.jianshu.com/p/6262772bdc9c https://blog.csdn.net/qq_40460909/article/details/100038778 满怀欣喜的开发vue项目，快要完成的时候，测试人员发现在app中首次加载慢的跟便秘一样，无奈要 ...
分类：
其他好文 时间：
2020-03-17 12:44:06
阅读次数：
57
前端性能优化总结目录 页面加载优化 一、减少HTTP请求 二、使用CDN 三、添加Expires头 四、压缩组件 五、将样式表放在头部 六、将脚本放在底部 七、避免CSS表达式 八、使用外部的JavaScript和CSS 九、减少DNS查找 十、精简JavaScript 十一、避免重定向 十二、删除 ...
分类：
其他好文 时间：
2020-03-13 19:05:54
阅读次数：
64
