如何提升前端开发速度和效率

author author     2023-04-27     135

关键词:

时间管理

    不同的时间段做不同的事。头脑清醒的时候,做一些难的事情;状态欠佳的时候,做一些简单的事,或干脆出去走走,休息休息。

    做事时要专注。在我们专注做事时,要减少外界的干扰,比如带上耳机,将手机开静音。如果此时有人来打扰,稍后来处理他的事情;如果事情比较紧急,则记录下当前的状态,方便切换回来的时候,能迅速进入状态。我们可以尝试使用番茄工作法:在一段时间内(一般是25分钟),只做一件事情,结束后,休息一会,继续做事,以此循环。

    不做不必要做的事

    实现不靠谱的需求。拒绝不靠谱的需求。

    理解需求出现偏差。对于不理解的需求,要及时和 PM 沟通,不要自己揣测。

    做与整个项目风格不一致的页面。如果设计师的设计的和当前项目的风格不一致,与其沟通,看是否能用项目中统一的风格(样式)。

    想清楚实现思路后,再开始编码。有时候一个好的算法比一个差的,会简单很多。

    重复造轮子。

    一拿到项目就开始编码。应该熟悉当前项目所用的技术。避免重复实现项目已经实现过的功能。

    优化做事的方式

    重复的事情让程序来做。

    项目脚手架生成器。基于此快速搭建一个项目。主流的框架都有 xx-cli 项目。也可以用 Yo 自己搭建一个。

    自动添加浏览器前缀。可以用 AutoPrefix。

    自动生成图片精灵。可以用 Compass。

    一键切图。可以用 Cutterman。

    代码改变时,浏览器自动刷新。

    代码发布前做的一些事情。代码压缩,合并等。

    选用合适的框架和第三方库。

    用好软件。

    安装一些代码补全插件。如 Emmet, Bootstrap Snippents 等

    设置一些命令的简写。如,git 可以配置一些简写。

    快速定位到项目中的某文件;某方法。

    全局搜索,替换。

    等等。

    熟悉常用快捷键。

    敲更少的代码。

    能快速启动常用软件。

    减少查找的时间。

    保持工作环境的整洁。丢掉不用的东西,删除不用的文件。

    常用链接的导航。

    常用第三方组件整理。我积累了一些,见这里。

    自己写的代码参考示例。

    文档聚合网站。devdocs。

    其他

    两个显示屏。

    保持身体健康。

    做事时,保持一个积极的心态。

参考技术A   1. 保证界面及用户体验的前提下,写代码的速度是第一要务
  不要拘泥于什么技术可用,什么技术不可用。让它在最短的时间内跑起来,在用户体验的过程中完成迭代升级。利用高速的开发流程,为项目创造竞争优势。有些可以用CSS实现的东西,没必要挂JS。然后还跑过来问“我不想用CSS,这段JS为啥不能隐藏滚动条?”这种开发者,不仅是自虐,还是在虐待访客的电脑。
  针对某些要求1小时上线的变态项目,大可以用PS直接生成html,什么是标准?什么是规则?这些都是辅助我们制作网站的建议,当我们有实际需求的时候,大可以打破这种标准。标准是人制定的,前端开发者的追求目标,应该是去做制定标准的人,而不要被标准所束缚。当我们有实际需求的时候,当服务器被拖慢速度的时候,不用谁来指挥,自然会去想如何降低带宽压力。让你的团队自发思考,胜过于你拿各种标准来压迫执行。
  负面影响:招聘的难度会大大增加,除非每个员工都有股份、或者是你亲自教出来的。不然,拿同样多的薪水,很少有人会自发思考公司的业务。另外,迭代的开发成本也会很高,纯静态展示页还好,加载程序的页面进行结构调整,会增大员工的工作压力。注意仅在合适的项目上玩速度。

  2. 开发人员和业务人员尽可能天天都在一起工作
  在团队内部,最具有效果并富有效率的沟通方式,就是面对面交谈。
  QQ或者MSN,没有任何的语气语调,无法更直接的表述业务的着重点在哪里。容易产生误会。
  开发过程中,要避免晦涩的文档及专业术语。每次沟通带上纸笔,说不明白就画,画不明白就抓一个业务坐你身边,让他看着做。领导层要给他们提供所需的环境和支持,有可能的话,抓一个领导坐在身边。减少交接的流程,简化开发文档。一个好的文档,是让开发人员明白每一步的要求是什么。而不在于文档字数的多少。没有文档更好,只要你能给团队讲清楚。

  3. 即时响应,高效开发
  在某些领域,为什么一些很小的网站可以战胜大的公司?
  他们不遵循守则,他们无需层层审批,他们发现什么好的技术可以直接应用到自己的网站上。说服经理,即使很顺利,也需要一个说服的过程。况且有很多计划会夭折在领导层的审批上。用人不疑,如果你有一个不大的项目,如果你有一个可以信任的人,放手让他去做。这个有执行力的人,一定要选好。做正确的事情比做错误的事情要困难很多。
加油吧追答

前段开发学习裙,494-〇6,然后是4九三4

本回答被提问者采纳
参考技术B 技能掌握
工具使用

微前端架构的业务价值:实现独立部署快速迭代和按需加载

...按需加载等技术,提高了应用的可靠性和可用性,同时也提升了用户的访问速度和体验。 什么是微前端架构微前端架构是一种前端架构模式,旨在将一个大型的Web应用程序拆分为更小、更独立的部分,每个部分可以由不同的... 查看详情

提升前端开发效率及查错能力的小技巧(代码片段)

前言  作为一个快五年开发经验的前端工程师,在工作中感到最痛苦的除了无止境的改需求之外,就是调试bug阶段了,有时候开发一个网站也就两个星期左右,但调试起bug来一调就是几个小时!浪费时间不说,效率又低,作为... 查看详情

im即时通讯开发如何提升移动网络下图片传输速度和成功率

在本案例中,我们重点讲解了提升上传速度和成功率的“鱼翅”项目,重点分析了在移动网络下影响上传速度和成功率的因素,一次次的调优算法并验证,最终提炼出了能应对网络质量瞬息万变的鱼翅算法。“大... 查看详情

提升前端质量和迭代速度的利器:ci和cd

高质量的产品,有利于提升用户的使用体验,从而提高用户的留存。快速迭代,就是小步快跑,快速试错,在市场竞争中获得先机。CI和CD是提升产品质量和迭代速度的利器。CI和CD也逐渐开始成为项目的标配。... 查看详情

前端调试效率低?试试这10个“chrome开发者工具”使用技巧

...rdquo;的小技巧。包括调试,优化页面渲染速度等。希望能提升Web开发人员的工作效率。 1,打开ShadowDOM显示浏览器对例如Video、Password等组件进行了封装,无法查看到组件的详细代码,不利于调试。幸好,通过配置能够在元素... 查看详情

测试博客

...器,该浏览器基于其他开源软件撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。二级标题二级标题的介绍。GoogleChrome是一款由Google公司开发的网页浏览器,该浏览器基于其他开源软件... 查看详情

什么是微前端架构?

...等技术,提高了应用的可靠性和可用性,同时也提升了用户的访问速度和体验。什么是微前端架构微前端架构是一种前端架构模式,旨在将一个大型的Web应用程序拆分为更小、更独立的部分,每个部分可以由不同... 查看详情

xcode插件(时间就是生命)

...多的收入。可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我提升编码速度和工作效率的工具。Xcode插件几乎所有开发者都知道Alcatraz... 查看详情

前后端分离

...加载速度更快,开发和维护成本也降低了不少,效率明显提升。随着前端技术的发展和迭代,前端MVC框架应运而生,利用目前主流的前端框架,如Reac 查看详情

团队效率提升python-pywebio介绍

...喷)Q:其次,我们能用来干嘛??这对一个团队的效率提升有什么作用??A:Pywebio的作用在于让咱们可以快速的开发一个带 查看详情

面试题打卡第十天(前端优化打包构建速度)(代码片段)

如何优化打包构建速度-开发体验和效率一、优化babel-loaderES6语法转ES5module.exports=module:rules:[test:/\\.js$/ 查看详情

☆前端优化:浏览器缓存技术介绍

...一来在WEB技术体系中扮演非常重要角色,是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。所以,缓存技术是无... 查看详情

前端性能优化,压缩包体积提升打包速度

项目背景压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,笔者结合工作中的实践总结,梳理出一些​常规且有效​​的性能优化建议技术栈:vue-cli3+vue2+webpack4主要插件:elementUI+echarts+axios+momentjs... 查看详情

excelandjson的设计决策

...和没有,好用和不好用的差别,每一个都比前一个情况能提升50%的效率。(按IPD理论,极限速度是提升100%的效率,这里取保守数字)。ExcelAndJSON这个工具,前前后后设计思考大约有一年的时间。在之前的开发中,我们使用 查看详情

protobuf如何提升编码效率(代码片段)

Protobuf如何提升编码效率Protobuf作为网络传输常用的编解码工具,面向多种平台,支持多种语言。使用Protobuf编码消息速度很快,消耗的CPU计算力也不多,而且编码后的字符流体积远远小于JSON等格式,能够大量... 查看详情

如何高效提升java开发效率—spring注解开发全套教程!(代码片段)

精彩干货索引一、使用注解标识组件二、组件扫描1、普通扫描2、包含与排除特定组件(1)扫描包含特定组件(2)扫描排除特定组件3、实现注解的三步骤三、组件自动装配1、@autowired注解(1)@autowir... 查看详情

如何高效提升java开发效率—spring注解开发全套教程!(代码片段)

精彩干货索引一、使用注解标识组件二、组件扫描1、普通扫描2、包含与排除特定组件(1)扫描包含特定组件(2)扫描排除特定组件3、实现注解的三步骤三、组件自动装配1、@autowired注解(1)@autowir... 查看详情

ios开发工具类dfbox全面提升开发效率(代码片段)

...在App的开发中,效率占有很重要的地位。作为开发者如何能有在有限的时间内开发出一个优秀的App呢?答案很明显,那就是要求开发者能运用一些现有其他开发者留下的一些功能模块和小工具代码。今天本博客就介绍... 查看详情