当前位置: 首页 > Web前端 > HTML

前端进阶学习路径

时间:2023-03-28 14:38:56 HTML

Javascript(js)CSS(css)HTML(html)基础了解浏览器渲染流程,知道如何优化页面渲染效率熟练使用Webpack、Vite等前端开发构建工具熟练使用Vue3.0、VueRouter、Vuex等其他Vue全家桶从Vue2.0迁移到Vue3.0Javascript(js)ES5ES6ES7ES8ES...Browser(DOM)JavaScript的兼容性css的兼容性问题HTML(html)HTML4.0(非主流,不建议深入)HTML5.0(主流)浏览器(DOM)与html的兼容性问题CSS所需技能基于CSS的扩展语言,如:sass、less等postcss(css代码转换工具)程序化css,如:styled-components移动端适配(percentage,rem,vw)PC浏览器兼容方案响应式布局优化策略前端框架Vue(推荐)ReactAngular前端项目(基于vue3.0为例)打包工具webpack、vite(推荐)scaffoldingvue-cli、vite(推荐)复杂数据管理vuex、pinia(推荐)UI库Element、Naive掌握一门后端语言Node.js(推荐)JavaPHPC/C+++Go版本工具熟练git版本控制SVN版本控制必备技能HTML5.0andCSS3.0andJS(ES5,ES6,ES7,...)精通MVVM框架web性能优化webpack进阶Nodejs混合开发PWA和AMP同BMPLinuxshell,Nginx后端语言Node.jsScaffolding快递技术和技巧是同一个重点基本javascript和使用javascript技巧基本css和使用css技巧基本html页面布局和html页面布局技巧Javascript语言,了解(或熟悉)多种语言构建领域生态揉捏自己反复掌握的知识形成自己的技术闭环技术突破知道自己欠缺什么应该学什么要掌握自己有的要先广博再精d尝试了解产品背后的价值比较整个行业和你做的,发现我们这个行业的共性,不同公司对同一个问题的不同解决方案。梳理整个行业的技术方案,进行横向比较。有了这个行业之后,你就会了解整个行业。行业的技术痛点根本不需要别人。知道自己缺少什么,应该学什么?编程思维,强化编程思维,训练逻辑思维,总结问题及解决方法,学习方法,确定技术领域。产品背后的价值了解不同公司的同类产品,技术优缺点,而不是在被动执行中学习。技术学习要与时俱进,不要吃旧东西。前端架构架构需要从需求的角度考虑根据项目的功能需求选择前端架构只有合适的架构,没有最准确的架构架构要与时俱进架构要不断积累技术选择必须考虑的因素PCormobile[toB]()或[toC]()用户规模浏览器支持(兼容性)状况项目是否需要支持SEO团队成员对技术(或框架)的掌握程度:是否有人能掌控大局,学习成本是否可以接受,技术是否能满足业务需求,技术(框架))稳定性,其社区,维护者等进阶-网站性能优化javascript性能优化按需加载PWA(渐进增强策略)使用外部链接减少多线程,合并DOM访问压缩javascript代码图片优化使用response格式化图片和WebP(图片有损压缩格式)逐步加载图片压缩图片CSSSpirte(雪碧图片,Sprite图片)减少服务器请求数据:URL模式(urlscheme数据)懒加载字体图标合适的图片格式常见问题可视化草稿/交互草稿未按时提供需求变更,工作量评估不足前后端研发投入时间点前后端联合工作量调试、需要提交测试的时间点、需要测试的工作量、需求测试的工作量、关键时间点、责任到人严格把控开发、自测、测试质量、工作包查能及时暴露风险,做好沟通,积极推动问题解决,注重线上质量(责任意识),提出解决方案产品发布过程中的要求。前端开发、前后端QA和测试、发布版本需求确认、评论。支持的最大字符数是多少?(非常重要,与后台存储方案设计有关)1个中文算1个字符,多少个英文字母算1个单词(产品语言和技术语言的交流转换)输入内容如何错误提示太长?(互动详情)内容太长,可以评论吗?如果允许的话,是的提交前截断评论?(容错)当用户没有输入任何内容时,评论框中的默认提示文字是什么?(交互细节)注:需求确认后,需要形成文档的思维架构、思维领导思维、产品思维、组件思维