前言：本文主要根据XX目前的认知对前端知识进行收集、分类、归纳和整理，涵盖了“前端理论”和“前端实战”两个方面.这篇文章会大致告诉你前端需要知道的东西。好像有很多，但是你想学什么，还是要跟着你的心走，跟着你的BOSS走。原意。写这篇文章主要有以下初衷：梳理一下知识体系。虽然网上类似的内容很多，但每个人都有自己独特的思维方式，适合自己的才是最好的。探索不足之处。清楚自己已经掌握了哪些，应该掌握哪些还没有学会。完善公司前端培训方向。前端技能培训的方向最好由懂前端的人和公司的前端团队来定。希望这能激发您的思考。我们都在路上。我不是一个成功的例子。写下自己的想法，希望能激发大家的思考。一个模因。从2012年开始，我知道Quora上点赞最多的答案都是引用别人的答案。。。有点尴尬：《一名合格的前端工程师的知识结构是怎样的？》类别专业技能前端理论浏览器HTMLCSSJavaScript编程通用SEO数据统计数据分析网络基础跨领域理论产品设计相关后端基础前端-结束实践解决实际问题学习项目前端工程第一阶段：框架应用第二阶段：简单自动化构建与优化第三阶段：JS/CSS模块化开发第四阶段：组件开发与资源管理项目技术选型构建轮版本规划致谢联系方式EpilogueLicensing专业技能前端理论浏览器知己知彼浏览器核心渲染原理HTML解析器CSS解析器JavaScript引擎渲染过程加载分析（确定结构、计算风格）构建DOM树、应用风格绘图Reflow重绘浏览器调试工具F12扩展插件浏览器常用快捷键调试内容元素结构属性样式脚本日志断点事件变量监控调用栈性能快照耗时网络请求模拟请求回顾网络模拟网络环境内存本地存储信息cookie本地存储缓存调试技巧浏览器事件常用事件鼠标事件表单元素eventsKeyboardeventsDocumenteventsCSSevents...事件处理，添加，删除浏览器任务调度机制microqueuemacroqueue浏览器兼容性各平台浏览器的坑（家家都有难填的坑，有的深，有的浅）手机浏览器UCSafari微信浏览器百度...PC浏览器ChromeFirefoxIEdge...小程序不同浏览器内核差异CSS私有属性前缀（注：推荐使用postcss自动补全）PolyfillHTML,CSS,JavascriptfeaturesupportMDN可以用吗？常见问题请求跨域iframe跨域通信各种兼容性问题网页加载速度慢按钮点击无响应...HTML吃土两叉：据说HTML和CSS协同工作最好的学习体验！语法和语义！DOCTYPEHTMLDocumentStandardWeirdModeStandardModeheadmetaMetadataTag网页描述DeviceDescriptionHTTPRequestDescriptionHTTPClientHintsbody装饰性标签（不推荐，部分废弃）功能性标签无语义容器（div,span）用户交互（交互式标记）输入框选择器multi-选择框单选按钮按钮数据可视化（显示标记）列表定义列表无序列表有序列表表格结构化数据标记、微数据多媒体图片视频音频SVG、Canvas文章（正文、摘要、段落、章节section,preface,epilogue,reference）规范HTML代码规范HTML使用规范（标签嵌套规则）标签类型无障碍，无障碍体验常见问题图片空src导致页面加载两次iframe空src导致本页面无限循环加载图片据说是HTML5规范中HTML标签的嵌套规则示意图CSS吃土又小2分叉：用设计师的思维理解CSS，用程序员的思维写CSS语法（CSS从入门到abandonment）基本用法选择器基本选择器组合选择器伪类选择器媒体查询速记属性注解属性操作Calc()规范（编写可读CSS）用例规范权限控制最佳实践坏习惯格式规范重用BEM规范逻辑特征（在使用OO中）CSS/Less中的思考与设计模式权重（priority）作用域封装（mixins）组合（mixins+）扩展（:extend）继承（mixins）CSS变量、Less变量模块化（import）视觉设计（singlestateDesign）布局（separate久久，久久关闭）盒模型（height,width,border,margin,innermargin,overflowcontrol）定位模式级联上下文（z-index）显示类型（table,inline,inline-block,block,flex,grid)浮动伪元素::after,:beforeTypography(WordBrother)Font(fontfamily,webfont)Text(strikethrough,underline,italic,weight,fontsize)Paragraph(lineheight,indentationadvance,sentencebreak,linebreak)alignmentdirectiondecoration（神说，必有光）colorbackgroundborder（border,outline）圆角阴影渐变透明度变形（rotation,scaling,matrixchange）交互设计（multi-statedesign）animation（Motionandstillness是对立统一）转场效果动画关键帧反馈主动，选中状态引导结合JavascriptCSS动画交互悬停状态多设备设计响应式设计（多套代码，多设备）媒体查询自适应设计（一套代码，多台）devices）最小定宽布局百分比布局网格布??局，灵活布局js+rem解决方案（rpx）常见问题视觉还原度调试技巧属性“失败”问题过渡“失败”？z-index“失败”？marginmergeborder1pxproblemverticalcenterlargescreenremsmallscreenpximageadaptationmaintainabilityweightcontrol嵌套层级语义扩展内容预处理器：Less、Sass后处理器：postcssappletWXSSWeex、RNCSSJavaScript在小2叉子里吃土：至今没看过《JavaScript 高级程序设计》，应该面壁思索。这段有很多参考资料：《The Modern JavaScript Tutorial》http://javascript.info/，推荐阅读。JavaScript标准严格模式兼容模式开发工具IDE轻量级编辑器基本语法数据类型基本数据类型number,string,boolean,null,undefined,object,symbol数据类型检测解构赋值数组对象日期时间JSON格式描述序列化反序列化数组操作（加法）,删除,修改,遍历,复制)多维数组变量声明var,let,const声明提升作用域逻辑控制循环分支判断对象(基础部分)对象操作(增删改查,复制)符号类型转换垃圾回收机制对象方法thisnew函数函数默认值函数声明立即执行函数箭头函数运算符数值运算逻辑操作事件浏览器事件冒泡捕获事件捕获浏览器默认行为文档DOM树节点节点类型节点标签节点内容窗口对象DOM操作元素节点(添加、删除、移动、更改、复制）元素属性（添加、删除、修改、检查）文本内容（添加、删除、修改、检查）网络请求ajax（回调函数）Promiseasync、await深入细节对象、类、继承属性标记和属性描述原型、原型链继承属性定义Object混合类型检测数据类型基本类型复杂类型Function高级递归、调用栈闭包函数绑定、上下文剩余参数、扩展语法FunctionObject任务调度：TimerCurrying深入箭头功能功能性错误处理异常捕获代码质量评论相关工具ESLint、JSLintStandard.jsPrettify自动化测试工具：Jest、Mocha用例规范最佳实践坏习惯格式规范样式正则表达式常用字符、转义字符、元字符、字符类、分支条件、分组、反义、贪婪和懒惰向后引用……通用软件工程编程的核心是管理复杂性——《代码大全 2》推荐阅读：来自法海@淘宝首页集团《从达标到卓越 —— API 设计之道》达标（语法、词法）拼写正确准确用词注意单复数不要搞错词性处理缩写使用熟悉的时态和语态（语义、可用性）单一职责避免副作用代码一致性函数参数的合理设计函数重载的合理使用返回值可以预料。固定行词汇表遵循一致的代码风格。优秀（系统化、全局观）版本控制保证向后兼容设计扩展机制（易于扩展）控制API的抽象层次设计模式注释DRY编码规范解耦复杂度控制SEO&DataStatistics&DataAnalysis努力吃土和小二forks：尽力而为，听天命（天道，用户亦然）SEO影响因素相关性标题关键词密度权威外部链接内部链接域名年份网站收藏安全用户体验广告加载速度内容质量：内容真实性、内容原创、内容有益用户反馈不良行为堆砌关键词抄袭、骗取大量低价值外链广告、木马、病毒——数据统计工具统计、埋点工具：GoogleAnalytics、百度统计、Piwik...站长工具：谷歌站长、百度站长工具其他工具：百度指数、SEO指标辅助工具……数据分析工具同数据统计工具。终端、模型用户行为站内搜索关键词自定义事件（埋点事件）浏览频率、时间、跳转页面访问内容访问漏斗站点属性比较时间维度统计指标维度目标设定转化路径转化目标转化价值网络基础知识是否在这里？又会出现，经典问题：当你在浏览器中输入网址回车（不是传统的单页应用的网站），直到看到这个页面，这时候你经历了什么过程（浏览器渲染链接省略）TCP/IPHTTP请求请求头请求文本响应HTTP状态码（2xx、3xx、4xx、5xx）响应头响应文本过程：三次握手HTTP2HTTPSWebSocketCORSSession、CookieRESTful/RPCDNS、域名、IP域名劫持内网、公网地址segmentcacheservice客户端缓存常用工具F12网络面板高级REST客户端EditThisCookieWiresharkFiddler,Charles常见问题HTTP迁移到HTTPSS站点部署问题HTTPS证书部署TLS版本问题证书范围（是否包含子域）证书和秘钥配置文件资源加载同协议错误级别外部JavaScript加载iframewarning-levelimgCSSnetworkrequestwithprotocolerror-levelajaxjsonpcross-domaintheoryeatsdirtfork:一个很简单的学习跨域知识的目的-掌握如何甩锅产品设计相关的dirt-eatersfork:学会优雅地提问设计=>给用户更好的体验和与设计师的沟通，协作的设计理念=>用户体验的一致性、可用性、易用性和反馈，以提高美感。羊毛布？竞品分析//知己知彼，关注对手常用工具Sprite图像生成工具（http://www.spritecow.com/）图像有损压缩工具（https://tinypng.com/）。psd智能标注(http://www.fancynode.com.cn/p...)强烈推荐设计师使用Sketch进行设计。后端基础吃土。2叉：本文不懂的名词你就懂吧《系统设计入门》（神秘一笑）XX的观点：时刻牢记编程语言只是一种工具，各自适用的场景不同。理性、客观、实用。与后端开发工程师的沟通与协作分工明确文档优先Mock数据简单了解一种后端语言//XX注意：如果你搭建了自己的个人博客站点，后端语言的语法层次是充足的。理解前端路由和后端路由的区别简单应用数据库（MySQL）增删改查备份导出理解功能概念GraphQLNginxRedis负载均衡CDN数据库主从备份计算机相关基础知识）重温（预览）数据库操作系统编译原理离散数学与数字逻辑前端实践是检验真理的唯一标准。这里引用Vue.js的作者游雨溪的话：技术解决方案都是先有问题，后有想法，伴随着权衡取舍。选择测量技术时，请尝试考虑该技术正在解决哪些问题以及它做出了哪些权衡。一方面，这可以帮助我们更好地理解和使用这些技术，也为大家在业务中遇到特殊情况，需要自己制定解决方案打下坚实的基础。解决实际问题从错误中吸取教训。吃土小2叉：写这篇文章的时候，恰逢今年高考。非常感谢高一的英语老师给我们布置了一个作业：整理错题。因为经历了太多次，同类型题目这次错了，下次还是错。而我是一个比较认真的人。每次整理错题，我不仅把错题和答案记录下来，还会分析这里的考点，涉及的知识点，尽量感同身受。我是出题人，我怎么会出这道题，考试中有哪些知识点可以忽悠考生。而且在这个过程中，有一种考试做错题的心理愧疚感，记忆会特别深。另一方面，在复习阶段，也可以更有针对性地进行复习，给自己减压。试着把你的大脑当作CPU，或者倒排索引，而不是硬盘或者数据库。从你的实践中学习。在编程的过程中，也是比较接近的。我们可以记录我们的错误，糟糕的编码示例。同时，我们也可以像我们经常收集一些名言、固定搭配等写作套路一样，整理收集自己在开发过程中的最佳实践。当然，如果你有时间去思考、反思、优化，那就更好了。从你的忧虑和逆境中学习。另外，以积极的心态和强大的内心去面对发展过程中的任何迷茫和困难，都是快速成长的好机会。前段时间也在GitHub上开了一个项目，记录收集一下最近在前端开发过程中遇到的一些问题，有的已经解决了，有的还需要解决。https://github.com/xunge0613/...至此整理出的解决问题有：解决跨域iframe父子页面通信问题微信小程序开发ide的选择→_→不再赘述。..还有待解决问题：如何优雅的监听元素高度的变化？移动端banner轮播自适应的各种坑当然我也简单写了一些方法论，包括：如何解决问题？如何提问？以后我会继续完善这个内容。关键是：形成一套自己的最佳实践经验库。这部分学习项目比较推荐大家关注Phodal大神的Growth系列https://github.com/phodal/growth以及我对即将入门前端的新手的建议是：有一个博客，域名，网站，服务器，每周定期更新博客文章，每年更新一次博客主题。前端工程不要忘了自己的头衔：前端工程师引用张云龙dalao的文章如下：前端工程-基础第一阶段：库/框架选择第二阶段：简单构建和优化第三阶段：JS/CSS模块化developmentPhase3四个阶段：组件开发和资源管理由于先天缺陷，相对于其他软件开发，前端在基础设施方面更需要组件开发和资源管理，资源管理的解决方案其实并不复杂all：一个通用的资源表生成工具+基于表的资源加载框架第一阶段：框架应用吃土，小。2fork：只要是文档友好的框架，遇到不懂的问题就去找文档。解决不了就认真去翻一遍。因此，第一阶段也可以认为是：面向文档的编程。这里我建议回忆一下刚刚提到的友达的话。以下是我个人的框架/库应用路线：jQuery=>jQuery+artTemplate=>Vue.js+lodash=>Vue.js全家桶jQuery//这里参考张新旭的jQuery1.4中文文档CoreObjectAccessDataCache队列控制插件机制多库共存事件页面加载事件处理事件委托事件切换常用事件鼠标事件(click,dbclick,hover,mouse*...)键盘事件(key*...)表单事件(blur,change,focus,submit,select)浏览器事件(error,resize,scroll)触摸事件(touch*...)selector基本组合伪类内容可见性属性formfilterlookupconcatenationCSSCSSpositionsizeDOM操作元素节点(add,delete,移动,更改,复制)元素属性(增删改查)文本内容(增删改查)网络请求Ajax时延期特效基本(显示,隐藏)滑动淡入淡出自定义动画控件辅助工具（类似lodash）数组和对象操作函数操作字符串操作浏览器和特征检测类型检测JSON序列化ArtTemplate模板引擎Vue.jsMVVMidea声明式渲染条件和循环处理用户输入数据绑定，响应式数据组件化应用构建之间的通信状态componentsManagelodash.js//提供各种辅助方法，专注于数据处理数据类型数组集合日期函数数值对象字符串语言特征类型检测类型比较复制数学运算辅助工具XX：学会使用artTemplate后，你会发现Vue.js非常好用当你学习了Vue.js之后，你会发现这个小程序真的很好用。第二阶段：简单自动构建优化。专注于业务开发工具。界面调试第三阶段：JS/CSS模块化开发张云龙：分而治之，分而治之，分而治之AMDCommonJSUMDES6Module...第四阶段：组件开发和资源管理核心目的：提高开发效率&兼顾运行性能划分解决耦合、自由组合、就近维护Vue.js组件开发抽象业务逻辑组件结合基础UI组件形成业务组件独立编写业务相关组件...自定义基础UI组件库轮播图组件Pop-up窗口组件...资源管理推送推荐阅读：静态网页资源管理与优化项目技术选择理性、客观、避免偏差预计开发资源投入时间人力技术储备项目资源沟通成本设计文档、功能文档、产品原型后端接口文档项目调度产品资源使用者GroupBrowserCompatibilityBrowserLimitationsSEOProblemExpectationRewardforDevelopersSelf-growthCompanyTechnologyStackDevelopmentEfficiencyMaintainabilityPerformanceandStabilityEasytoTestEasytoControlProjectCycleEmergencyPlanCompatiblePlanRegressionPlanA/BTestProgressiveEnhancementPlanB造轮子吃土吃小2叉：要么站在巨人的肩膀上，要么成为巨人自己未完待续...UI组件库前端工具前端微服务前端框架（以下内容为XX的YY内容）学习优秀框架源码仿写核心内容掌握山寨一个框架的套路找到问题有扎实的前端基础+运气+灵感来解决问题？版本规划本文将在GitHub上持续维护，欢迎大家提issue~地址为：https://github.com/xunge0613/...vx.x.x更新造轮内容更新性能监控安全注意事项翻译成英文？添加重要性打分功能，指导当前阶段应该掌握的内容：初级、中级、高级=====当前版本分界线=====v0.0.3内容迭代更新编程通用入门更新更新javascript更新前端-endpracticenew添加指南，更新支付宝图标，微信图标...v0.0.2内容迭代，添加后端基础，添加前端工程一期，引入jQuery，Vue.js，添加常见问题，更新前言，更新网络基础，更新学习项目，谢谢Engineering—BasicsbyZhangYunlongFromStandardtoExcellence—APIDesignWayofAPIDesignby法海@淘宝前面板团队IlyaKantorjQuery1.4中文文档MDNWeb开发//这里有一个小彩蛋，在本页右上角有某XX联系方式，欢迎与我联系讨论本文的不足、问题或意见大家可以在我的GitHub主页找到我的联系方式或者关注我的微信公众号：清风迅来结语作为一个老菜鸟，我只是一个知识的搬运工本文大部分讨论的是什么知识点（what），至于如何学习并应用这些知识点（how&why），敬请期待我以后的系列文章。部分原型已经完成，仅供试读：GrowthCSSGrowthVue感谢大家一路看完。欢迎点击阅读原文在我的博客发表评论一起讨论。（小透明的意思是公众号还没有开启留言功能。。。）如果对你有帮助，欢迎捐助！^_^ps：好像图片有点大=。=获得许可的麻省理工学院
