资深前端知识体系
从招聘信息看
精通Javascript
- 掌握js核心技术DOM,BOM,Ajax,JSON
- 熟悉js面向对象机制,能用原生js进行DOM编程
- 有复杂js开发经验
- 熟悉各种js框架(jQuery/Backbone/Angular/ext/Dojo/Prototype等)
精通html+css,包括html5+css3
快速
体验一致
无差异化
- 精通DIV+CSS网页布局
- 能够根据需求快速提供基于HTML5的技术的解决方案
- 熟悉手机浏览器中HTML5中的兼容性
具有解决多浏览器,多终端兼容性问题的经验
- 多浏览器兼容性问题
- 熟悉手机浏览器h5的兼容性问题
- 具有调试各浏览器兼容性经验
- 熟悉IE各版本开发特性,保持浏览器体验一致
- 对浏览器差异有深入了解,熟悉浏览器原理,能根据需求提供兼容方案
熟悉各种web标准
- 熟悉W3C标准,对表现和结构分离、HTML语言化等有深刻理解
- 熟悉es5,es6规范
架构能力
- 对符合web标准的网站重构有经验
- 组件化,模块化,能独立完成复杂前端模块设计和实现的经验
- 了解模块化开发及工具使用
- 有一定的设计能力
了解PHP/Python/Ruby等一种或者多种服务端语言
- 熟悉大型网站架构和性能优化,熟悉各种Web缓存技术
知识体系
基础
![前端知识体系-基础](web-base-skill.png =600x600)
- 计算机知识储备 优化协作,深化端对端通信,程序运行内部流程的理解,选择更好的算法实现
编程语言 **
- JavaScript/Node.js
- CoffeeScript
- TypeScript
前端标准/规范 编写高质量的代码,提高代码的可读性,可访问性和可维护性,对用户友好,
- 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盒模型)
编程知识储备/核心概念 (DOM,原型,原型链,闭包,css优先级,css盒模型)
开发工具 帮助快速定位问题,解决问题,提高工作效率和团队协作效率
- 编辑器 (sublime Text,webStorm,Atom,Vim,Emacs,Eclipse)
- 调试工具 (Developer Tools, Firebug, IETest, Chrome Dev Tools)
- 版本管理 (Git,SVN,GitHub,SourceForge等)
框架 (UI:bootstrap等,基础库:JQuery/Prototype/zepto/MooTool,框架:AngularJS,Backbone,React,knockout等) 取其精华,不重复造轮子, 设计模式的实践
浏览器 提高可访问性,对用户友好,保持一致性。了解各浏览器的差异,才能求“最大公约数”
- 渲染引擎 (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)
移动应用开发 趋势
- Hybrid App
- PhoneGap /Cordova
- MUI
- React Native
- Ionic
- HTML5/CSS3
- Zepto
- 响应式设计 (bootstrap,css媒体查询)
进阶
模块化/代码组织
模块化是复用的基础,合作的基础,分层的基础
- EMCAScript6 (EC6 Module)
- Commonjs (webpack,browserify)
- AMD (RequireJs)
- CMD (Seajs)
- UMD (UMD)
代码质量/质量控制 质量绝对会影响代码的运行速度,可以有效的提高我们的开发效率和代码质量
- 编码规范 (JSlint,JSHint,jscs,Csslint)
- 单元测试 (Qunit/Jasmine,UnitJs,Mocha/Should/Chai/Expect)
单元用于测试一个模块或接口是否能达到预期结果的代码,快速检验某个模块或接口可用
- 自动化测试 (phantomjs-页面监控,模拟点击等,Karma+jasmine-单元测试自动化,webDriver+Jasmine,protractor-端对端测试等)
- 性能优化
- 高性能JavaScript
- dynaRrace Ajax (Js执行时间,网络请求时间,服务器消耗时间,哪些地方降低了性能)
- HTTPWatch **
- YSlow 34 (Best Practices for Speeding Up Your Web Site)
- PageSpeed (网页载入速度检测工具,优化缓存,减少请求大小)
- JsPerf (比较不同算法的执行速度,各浏览器运行的结构)
- 安全
- Adsafe/caja/sandbox (防止非法代码)
- 同源策略 浏览器最基本最核心安全
- CSP 内容安全策略,白名单的机制对网站加载或执行的资源起作用
- CSRF/XSS 跨站请求伪造/跨站脚本攻击
- 部署流程
- 项目构建 (grunt,Yeoman,Gulp,Grunt,Ant)
- 文档输出 (Dox,Doxmate,grunt-doxmate)
- 压缩合并 CleanCss,UglifyJS,Google Clousure Complier,YUI Compressor
软实力
相关链接
来源:CSDN
作者:dandancsd
链接:https://blog.csdn.net/dandancsd/article/details/52635806