话说前头： 上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载 ...
分类：
其他好文 时间：
2020-06-16 14:59:22
阅读次数：
55
话说前头： 上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载 ...
分类：
其他好文 时间：
2020-06-15 12:18:12
阅读次数：
53
背景 如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。 压缩 压缩方式 前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webpack，这些压缩也很重要，基本上能压缩50 ...
分类：
其他好文 时间：
2020-06-10 12:46:08
阅读次数：
57
前端性能优化列表： 1. JS 减少 DOM 操作 预加载 懒加载 tree shaking 防抖，节流 变量缓存 for遍历优先 接口数据懒请求 2. CSS 减少类的层级 硬件加速（3d canvas webgl） 雪碧图 避免使用滤镜 3. html 减少无效标签 4. 整体 减少 http ...
分类：
其他好文 时间：
2020-05-14 13:19:22
阅读次数：
68
HTML：使用协商缓存。CSS&JS&图片：使用强缓存，文件命名带上hash值，使用chunkhash或contenthash，不使用hash。以nodejs为例，如果需要浏览器强缓存，我们可以这样设置：res.setHeader('Cache-Control', 'public, max-age= ...
分类：
其他好文 时间：
2020-05-10 13:14:40
阅读次数：
57
优化其实是一件很有趣的事。。 以我的项目为例，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
参考： 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
