H5 性能优化
之前有篇文章粗略聊了一下 webview 的内存优化问题,只涉及到了图片的优化,这篇文章准备较为全面地介绍一下 H5 项目可以采用的方便落地的一些性能优化方式。
《Clean Code》这本书我在之前的博客中也有提到,不得不说它对我现在良好的编码风格有着极大的影响,该书虽然是以 Java 为模板来编写的,但其中大多数的思想与范式可以适用于任何语言。这篇博客中的原文(原文:clean-code-javascript,翻译版:JavaScript 风格指南)就是在借鉴了《Clean Code》之后为 JavaScript 设计编写的,我在原文中挑选了一些较为接地气、很快就能上手应用的规则出来,并在每一条中都添加了自己在实际项目中的理解,便于大家参考并落地实践。
前段时间团队的一个 H5 项目
经历了机器发烫、交互卡顿甚至页面 crash 等故障,排查后发现是内存占用异常
导致的。经过连续一周的熬夜优化,目前总算趋于稳定,在这里记录一下问题排查以及性能优化的过程。
设计模式是编程范式的一种,而编程范式其实和编程语言没有太大关系,因此无论前端还是后端,设计模式总会在代码重构中被频繁提到。实际上在前端开发中,真正应用到设计模式的还是少数,原因之一是前端业务逻辑复杂度不够,确实用不到设计模式。技术应当是服务于业务的,我始终认为不能够为了秀技术而去硬上技术,下面就介绍一下设计模式是怎么实际应用到我们项目中去的。
最近有个比较酷炫的项目,其中有个需求是这样的:圆角矩形按钮,边框是渐变色,背景需透明。网上找了很多资料,在我快要放弃时还是找到了解决方案,不得不说 CSS 相当强大,只要你想不到,没有它做不到。尝试过的方法总结下来就以下三种,下面就回顾一下踩坑的过程。
对于新项目,通过 vue-cli 手动选择需要的特性就可以很方便的接入 typescript,但对于一开始没有引入 typescript 的 vue 项目,再进行接入就较为繁琐了,最近公司就有一个项目是这种情况,折腾了比较久,在这里整理一下完整的引入方式。
前端开发的朋友肯定遇到过不少兼容性问题,包括不同浏览器、不同设备、同一浏览器不同版本等等,这篇文章就用来记录我在日常开发中遇到过的一些兼容性问题,吃一堑长一智,同样的问题下次再遇到就能混个脸熟了。
前面的文章有介绍团队如何去提高代码质量,其中比较重要的一个环节就是实现质量检查的流程化与自动化。这里的质量检查可以通过 ESLint 和 Sonar 的代码质量扫描实现,流程化自动化则采用 CI/CD 框架如 Jenkins、GitLab 来实现。
代码质量其实是老生常谈的一个词,同时 质量 也是一个很主观的词,代码质量的好与坏究竟该如何评判,是否有一个定性和定量的标准,有了这个标准之后,在团队中间又将如何推动落地,希望这篇博文能够为你带来一点思路。
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.