资深前端知识体系

眉间皱痕 提交于 2019-12-05 16:28:02

资深前端知识体系

从招聘信息看

  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缓存技术

知识体系

基础

![前端知识体系-基础](web-base-skill.png =600x600)

  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使用教程

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!