资深前端知识体系

资深前端知识体系

从招聘信息看

1. 精通Javascript

   • 掌握js核心技术DOM,BOM,Ajax,JSON
   • 熟悉js面向对象机制,能用原生js进行DOM编程
   • 有复杂js开发经验
   • 熟悉各种js框架(jQuery/Backbone/Angular/ext/Dojo/Prototype等)

2. 精通html+css,包括html5+css3
   快速 体验一致 无差异化

   • 精通DIV+CSS网页布局
   • 能够根据需求快速提供基于HTML5的技术的解决方案
   • 熟悉手机浏览器中HTML5中的兼容性

3. 具有解决多浏览器,多终端兼容性问题的经验

   • 多浏览器兼容性问题
   • 熟悉手机浏览器h5的兼容性问题
   • 具有调试各浏览器兼容性经验
   • 熟悉IE各版本开发特性,保持浏览器体验一致
   • 对浏览器差异有深入了解，熟悉浏览器原理，能根据需求提供兼容方案

4. 熟悉各种web标准

   • 熟悉W3C标准,对表现和结构分离、HTML语言化等有深刻理解
   • 熟悉es5,es6规范

5. 架构能力

   • 对符合web标准的网站重构有经验
   • 组件化，模块化，能独立完成复杂前端模块设计和实现的经验
   • 了解模块化开发及工具使用
   • 有一定的设计能力

6. 了解PHP/Python/Ruby等一种或者多种服务端语言

7. 熟悉大型网站架构和性能优化,熟悉各种Web缓存技术

知识体系

基础


1. 计算机知识储备 优化协作，深化端对端通信，程序运行内部流程的理解，选择更好的算法实现

2. 编程语言 **

   • JavaScript/Node.js
   • CoffeeScript
   • TypeScript

3. 前端标准/规范 编写高质量的代码，提高代码的可读性，可访问性和可维护性，对用户友好，

   • HTTP/1.1 (URI链接、Session会话、Authentication授权、请求Request、 响应Response)
   • HTTP/2 (压缩Compression、打包minification、推送Server push)
   • W3C标准 (DOM,BOM,XHTML,JSON,JSONP,HTML,CSS,XML)
   • ECMAScript规范 (3~6)
   • JS核心知识 (DOM,原型,原型链,闭包,css优先级,css盒模型)

4. 编程知识储备/核心概念 (DOM,原型,原型链,闭包,css优先级,css盒模型)

5. 开发工具 帮助快速定位问题,解决问题，提高工作效率和团队协作效率

   • 编辑器 （sublime Text,webStorm,Atom,Vim,Emacs,Eclipse）
   • 调试工具 (Developer Tools, Firebug, IETest, Chrome Dev Tools)
   • 版本管理 (Git,SVN,GitHub,SourceForge等)

6. 框架 (UI:bootstrap等,基础库:JQuery/Prototype/zepto/MooTool,框架:AngularJS,Backbone,React,knockout等) 取其精华，不重复造轮子, 设计模式的实践

7. 浏览器 提高可访问性，对用户友好，保持一致性。了解各浏览器的差异，才能求“最大公约数”

   • 渲染引擎 (Trident=IE,Blink/prev. Webkit=Chrome,Gecko=Firefox,WebKit=Safari,Blink/Pre. Presto=Opera,EdgeHTML=Edge)
   • 脚本引擎 (JScript=IE8-/Asp,Chakra=IE9/Edge,V8=Chrome/Opera/Nodejs/MongoDb,SpoderMonkey=firefox,Nitro=safari)

8. 移动应用开发 趋势

   • Hybrid App
   • PhoneGap /Cordova
   • MUI
   • React Native
   • Ionic
   • HTML5/CSS3
   • Zepto
   • 响应式设计 (bootstrap,css媒体查询)

进阶

1. 模块化/代码组织

   模块化是复用的基础，合作的基础，分层的基础

   • EMCAScript6 (EC6 Module)
   • Commonjs (webpack,browserify)
   • AMD (RequireJs)
   • CMD (Seajs)
   • UMD (UMD)

2. 代码质量/质量控制 质量绝对会影响代码的运行速度,可以有效的提高我们的开发效率和代码质量
   

   • 编码规范 (JSlint,JSHint,jscs,Csslint)
   • 单元测试 (Qunit/Jasmine,UnitJs,Mocha/Should/Chai/Expect)
     

   单元用于测试一个模块或接口是否能达到预期结果的代码，快速检验某个模块或接口可用

3. 自动化测试 (phantomjs-页面监控,模拟点击等,Karma＋jasmine-单元测试自动化,webDriver+Jasmine,protractor-端对端测试等)
4. 性能优化
   
   • 高性能JavaScript
   • dynaRrace Ajax (Js执行时间，网络请求时间，服务器消耗时间，哪些地方降低了性能)
   • HTTPWatch **
   • YSlow 34 (Best Practices for Speeding Up Your Web Site)
   • PageSpeed (网页载入速度检测工具,优化缓存,减少请求大小)
   • JsPerf (比较不同算法的执行速度，各浏览器运行的结构)
5. 安全
   
   • Adsafe/caja/sandbox (防止非法代码)
   • 同源策略 浏览器最基本最核心安全
   • CSP 内容安全策略,白名单的机制对网站加载或执行的资源起作用
   • CSRF/XSS 跨站请求伪造／跨站脚本攻击
6. 部署流程
   
   • 项目构建 (grunt,Yeoman,Gulp,Grunt,Ant)
   • 文档输出 (Dox,Doxmate,grunt-doxmate)
   • 压缩合并 CleanCss,UglifyJS,Google Clousure Complier,YUI Compressor

软实力

相关链接

知识体系1

知识体系2-含知识点链接

知识体系-大家看法

知识体系-github

知识体系-思维导图

前端自动化测试利器-phantomjs

Karma+Jasmine实现自动化测试

dynaTrace Ajax:前端性能分析利器

YSlow的使用方法

Google PageSpeed使用教程