阿里前端大牛分享的技能整理

前端工程师技能整理

一、框架与组件

? bootstrap等UI框架设计与实现

  • [ ] 伸缩布局:grid网格布局
  • [ ] 基础UI样式:元素reset、按钮、图片、菜单、表单
  • [ ] 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
  • [ ] 响应式布局:布局、结构、样式、媒体、javascript响应式
  • [ ] 第三方插件:插件管理

jQuery、zepto使用原理以及插件开发

  • [ ] 支持amd、cmd、全局变量的模块化封装
  • [ ] $.fn.method = function(){}

mvc/mvvm框架原理设计,vue/angular/avalon等

  • [ ] directive设计:html、text、class、html、attr、repeat、ref,可扩展
  • [ ] filter设计:bool、upperCase、lowerCase,可扩展
  • [ ] 表达式设计:if-else等实现
  • [ ] viewmodel结构设计:例如数据,元素,方法的挂载与作用域
  • [ ] 数据更变检测:函数触发,脏数据检测、对象hijacking

polymer/angular2思想与设计思路

  • [ ] import技术
  • [ ] template和script引入方式
  • [ ] css样式命名空间隔离
  • [ ] 简单复用第三方库
  • reactjs原理与使用

[ ] virtual dom单向数据绑定

  • [ ] js执行语法方式
  • [ ] UI由状态控制

commonJS/AMD/CMD

  • [ ] 模块引入
  • [ ] 模块定义
  • [ ] 模块标识
  • [ ] UMD解决不同规范兼容性的问题,例如webpack封装
  • [ ] 模块懒执行(CMD)与与预执行(AMD)

loadJs模块化加载原理与实现

  • [ ] 创建script标签,需要id映射到资源url
  • [ ] onload加载模块队列判断
  • [ ] 全部加载完成后触发
  • [ ] 加载失败问题优化
  • [ ] requirejs、modjs、seajs

polyfill、shim原理与实现

  • [ ] polyfill提供了开发者们希望浏览器原生提供支持的功能特性
  • [ ] shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现

virtual Dom、Incremental DOM

  • [ ] 1.用js对象树表示dom树结构,根据该对象树构建dom树
  • [ ] 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
  • [ ] 3.将对象树差异应用到dom中
  • [ ] 小结:js对象模拟dom(elem.js),virtual dom

? ? ? diff算法(diff.js)、差异渲染dom(patch.js)

  • [ ] incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中

shadow dom

  • [ ] 隔离外部环境用于封装组件:结构、样式、行为
  • [ ] 实现形式:新标签、class类属性 + 构建编译

webwork与service Worker

  • [ ] webwork与主线程机制,on/post
  • [ ] serviceworker可作为浏览器请求代理
  • [ ] 应用场景

ES6转ES5、Babel与ES6开发规范体系

  • [ ] ES6编码规范全
  • [ ] ES6在babel下兼容性
  • [ ] ES6在node下兼容性与性能
  • [ ] ES6新特性:看编码规范
  • [ ] aurelia ES6前端框架

Isomorphic JavaScript

  • [ ] 同构原理
  • [ ] 同构方案 Rendr
  • [ ] nodejs: 服务器
  • [ ] hapi: 应用服务
  • [ ] backbone.js: 后台mvc
  • [ ] requirejs: 模块加载
  • [ ] jquery: dom处理
  • [ ] reactjs同构:React + Flux + Koa

双向数据绑定

  • [ ] 函数触发:vuejs
  • [ ] 脏数据检测:angular
  • [ ] 对象hijacking:avalon

browserify运行原理

  • [ ] 1.从入口模块开始分析require函数调用
  • [ ] 2.根据依赖生成AST
  • [ ] 3.根据AST找到每个模块的模块名
  • [ ] 4.得到每个模块的依赖关系,生成一个依赖字典
  • [ ] 5.包装每个模块(传入依赖字典以及export和require函数),生成执行的js

performance timing

  • [ ] performance timing api
  • [ ] performance timing 过程
  • [ ] performance timing 性能计算
  • [ ] performanceTrace库

组件UI与js组件规范化

  • [ ] 组件编码规范
  • [ ] 组件目录规范:组件目录与公用目录
  • [ ] 组件构建规范:构建环境支持
  • [ ] 组件模块化管理:spm,bowserify
  • [ ] 组件复用性管理
  • [ ] 第三方组件接入成本

immutable JavaScript

generator与promise原理与使用

二、构建生态

grunt/gulp开发环境任务编写

  • [ ] 文件处理插件:html、scss、js、image、font、其它
  • [ ] 优化插件:雪碧图、图片压缩、iconfont构建
  • [ ] 发布替换插件
  • [ ] 打包、压缩包插件:组件自动分析
  • [ ] 白名单配置
  • [ ] 自定义插件编写

npm、jspm、bower包管理工具

r.js、browserify、webpack、Rollup打包工具使用

  • [ ] 原理:根据依赖配置文件对文件进行依赖打包
  • [ ] webpack支持更多的规范打包,AMD,Commonjs
  • [ ] webpack+babel/reactjs+reflux

fis3构建与插件开发、构建环境、fis3构建离线包

web Component:rosetta-org、x-view、Q、riot、nova

brunch构建工具

三、开发技巧与调试

fiddler加willow基础组合调试

  • [ ] 常见配置与分析
  • [ ] 结合浏览器调试

werien、vorlonjs远程调试,chrome inspect

mockjs,F.M.S(Front Mock Server)模拟调试使用与cgi自动调试

macha/phantomjs/casperjs/karma测试自动化任务使用

自动化UI测试,海豚

node-supervior、node-inspector、karma

开发发布系统流程

sublime高效插件

  • [ ] emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、

? ? ? SassBeautify 、 emmet 快速编辑、 jsxlint、 SideBarEnhancements、

? ? ? SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、

? ? ? html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、

? ? ? javascript & node spinnet、 JavaScript & NodeJS Snippets、

? ? ? jsLint、cssLint

代码自动化检查fecs

四、html、css与重构

jpeg、webp、apng、bpg图片

  • [ ] 编码原理
  • [ ] 特点与优劣势
  • [ ] 适用场景

iconfont使用与实现原理

  • [ ] 自动打包构建方法
  • [ ] iconfont兼容性写法
  • [ ] fonthello、fontawesome、icomoon.io、iconfont.cn线上工具

页面响应式设计

  • [ ] layout布局响应式
  • [ ] html结构响应式
  • [ ] css样式响应式
  • [ ] image媒体响应式
  • [ ] javascript响应式
  • [ ] media query与平台判断

css重置

  • [ ] reset
  • [ ] nomalize
  • [ ] neat

sass/compass/less/postcss常用语法与使用

  • [ ] 常用语法功能
  • [ ] 组件化UI设计管理
  • [ ] 构建工具实现方案
  • [ ] 雪碧图自动合成
  • [ ] iconfont自动接入等等

media query与常见页面尺寸了解

  • [ ] 媒体类型引入和媒体特性引入
  • [ ] device-width适应
  • [ ] retina屏幕适应

em,rem原理与实现

  • [ ] rem计算:width*retina/10,相当于屏幕宽度为10rem
  • [ ] 字体在rem情况下仍然使用px

code4ui、code4app、初页、maka等

  • [ ] 前端dom操作即使刷新前端页面
  • [ ] 根据dom操作生成组件config配置保存到db
  • [ ] 根据config配置使用r.js或webpack打包
  • [ ] 发布打包后输出文件

css3动画

css网格布局

  • [ ] susy
  • [ ] Responsive Grid System
  • [ ] Fluid 960 Grid(adaptjs)
  • [ ] Simple Grid

搜索引擎与前端SEO

  • [ ] tdk优化
  • [ ] 页面内容优化
  • [ ] 唯一的H1标题
  • [ ] img设置alt属性
  • [ ] nofollow
  • [ ] url优化
  • [ ] 统一链接
  • [ ] 301跳转
  • [ ] canonical
  • [ ] robot优化
  • [ ] robots.txt
  • [ ] meta robots
  • [ ] sitemap
  • [ ] SEO工具
  • [ ] 各种站长工具等

浏览器缓存种类,resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage

  • [ ] store.js、cookie.js

UI框架

  • [ ] bootstrap、jqwidgets、semantic ui、amaze ui
  • [ ] 微信手Q ui: frozenui、weui、blend ui
  • [ ] extjs、echart图表ui

五、native/hybrid/桌面开发

ionic移动开发方案

  • [ ] 运行架构
  • [ ] hybrid混合开发
  • [ ] cordova交互
  • [ ] 离线包更新
  • [ ] 性能瓶颈

nativescript移动开发方案

react Native移动开发方案

  • [ ] 运行架构:js引擎
  • [ ] 性能缺陷与内存泄露
  • [ ] 更新机制
  • [ ] 使用场景

android/ios原生开发与框架

  • [ ] java
  • [ ] oc、swift
  • [ ] web与native交互
  • [ ] 屏幕旋转
  • [ ] 摇一摇
  • [ ] 录像,拍照,选取本地图片
  • [ ] 打电话,发短信
  • [ ] 电池电量
  • [ ] 地理位置
  • [ ] 日期选择
  • [ ] 开启硬件加速

桌面应用开发

  • [ ] nodewebkit
  • [ ] atom-shell(后改名为electron)
  • [ ] 网易Hex
  • [ ] pomelo(游戏服务器框架)
  • [ ] react desktop
  • [ ] appjs:appjs.com

六、前端/H5优化(另一个图已给出)

  • [ ] yslow、pagespeed
  • [ ] 移动web性能优化
  • [ ] 手机浏览器"省流量"原理
  • [ ] 增量更新原理及注意事项
  • [ ] 本地存储的应用
  • [ ] 加载优化
  • [ ] 图片优化
  • [ ] 单页面及路由实现
  • [ ] 业内著名站点案例分析

七、全栈/全端开发

express/node club + mongodb、thinkjs等框架

node.js直出

实时web开发,meteor/express.io

MEAN(mongodb/express/angular/nodejs)

http与http2协议、bigpipe、pipeline

离线缓存,cookie、localstorage、indexdb

cdn与dns

  • [ ] 动态域名加速
  • [ ] cdn原理与cdn combo

八、研究实验

WebAssembly、webTRC、typescript

Material design规范的前端框架

  • [ ] 交互动效库

AMP-HTML规范

  • [ ] 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能
  • [ ] 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

九、数据分析与监控

badjs数据上报

  • [ ] 捕获错误两种方法:onerror、try-catch。抽样上报,先onerror统计语法错误,如果是script

? ? ? error,再使用tryjs。

  • [ ] 后台统计方法、不同业务接入体系、抽样统计
  • [ ] onerror:可以捕捉语法错误和运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;当前页面执行的js脚本出错都会捕捉到;跨域的资源需要特殊头部支持。
  • [ ] try-catch:无法捕捉语法错误,只能捕捉运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;需要借助工具把function块以及文件块加入try,catch,可以在这个阶段打入更多的静态信息。

点击热力图clickHeat、heatMap

  • [ ] js加载失败优化方案
  • [ ] 失败重发机制
  • [ ] 加载源域名服务器文件

https反劫持

百度alog数据上报

十、其它软技能

axure 原型图设计

xmind脑图管理

效率管理

can i use、github

知识管理/总结分享

产品思维与技能

十一、前端技术网站

技术社区

  • [ ] w3c tech、w3c plus、w3 help
  • [ ] div.io、nodeParty
  • [ ] 稀土掘金、前端早读课
  • [ ] alloyteam、html5基地
  • [ ] W3 help

行业会议

  • [ ] segmentfault会议
  • [ ] 深js、杭js
  • [ ] GMIC(全球移动互联网大会)
  • [ ] D2、webrebuild
  • [ ] infoQ内容、Qcon、velocity

结语

感谢您的观看,如有不足之处,欢迎批评指正。

获取资料

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。

对web开发技术感兴趣的同学,欢迎加入Q群:767273102,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。

最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

原文地址:https://blog.51cto.com/14284898/2379026

时间: 2024-09-27 17:12:29

阿里前端大牛分享的技能整理的相关文章

2015阿里前端工程师在线笔试整理

昨天下午参加了阿里前端的笔试,题目是随机的,但好像越到后面题目越难.建议小伙伴们还是尽早参加. 总体来说,题目不算很难,有时间都是可以做出来的,总共11道题,6道单选,3道填空,两道大题吧.一个小时时间略少,加上我本来想直接在上面敲代码的,然后发现太慢了,所以又改成了sumlime. 单选题有一道问无序列表是什么元素,一紧张的我竟然选了<ol>....考完才反应过来的我心都要碎成渣了 最后,有一道大题没写,一道填空和一道大题没写完.在这篇文章中进行完善吧. 1.找出页面中所有宽度和高度大于40

2019年最新总结,从程序员到CTO,从专业走向卓越,大牛分享文档pdf与PPT整理

整理大牛分享文档如下,持续更新一线开发架构,技术文档 github链接 网易蜂巢公有容器云架构之路 新浪微博redis优化历程 微博Cache架构设计实践 Go在大数据开发中的经验总结 基于Go构建滴滴核心业务平台的实践 Go in TiDB 负载均衡利器 HAProxy功能剖析及部署案例 高可用技术的实践分享 高性能存储及文件系统 个性化推荐架构设计和实践搜狐视频 工商数据中心架构创新之路 互联网对传统企业应用架构 基于Kafka-Spark Streaming的数据处理系统及测试 交互式直播

资深大牛分享:一个合格的Java程序员如何成长为优秀的架构师

踽踽独行上下求索总是痛苦,如果有良师益友陪伴点拨必能事半功倍.从新手码农到高级架构师,要经过几步?要多努力,才能成为为人倚重的技术专家?本文将为你带来一张程序员发展路径图,但你需要知道的是,天下没有普适的道理,具体问题还需具体分析,实践才能出真知.资深大牛分享:一个合格的Java程序员如何成长为优秀的架构师如果大家如果在自学遇到困难,想找一个java的学习环境,可以加入我们的java学习圈,点击我加入吧,会节约很多时间,减少很多在学习中遇到的难题. 我认为,架构师的内功主要包含三部分:判断力.执

阿里前端两年随想

阿里前端两年随想 其实按照我的情怀和尿性,文章的标题应该是 前端登堂入室宝典.前端成长就这三招 之类,奈何这是篇软文 ~ 看官先别急Command + W,尤其是和我经历类似 做着其它岗位的工作,却多少会接触一些前端 发现有些兴趣,但又不肯定这应该是自己未来 也会有些成就感,但似乎挫折和沮丧来的更多一些 我可以负责任的说,这是一篇有态度的软文 欲语泪先流 我希望做些有用的事情,甚至可以做个有用的人 才毕业工作的第一年我是满足的,学到了很多新知识,写的代码不但能work,还能真的跑在生产环境中 我

阿里前端的困局与突围

最近发了两条微博: 想起克军的一句话:前端研究,研究个屁~ 的确如此呀.补充下联:前端设计,设计个屁~ 前端目前最大的困境是,如 HTML 一样,无论你承不承认,市场上并不太需要 HTML 高手. 微博上的回复大部分歪楼了.上面两句话乍看有点激进,却是我的真实想法. 背后是一个问题: 前端的价值究竟是什么?未来应该如何发展? 前端的价值 如果你刚入行,或者从事专职前端工作未满 3 年,请忽略上面这个问题,并且尽量不要再往下看了. 我知道你会忍不住往下看,那就看吧.负能量有时也是正能量.真实面对所

值得收藏的前端大牛博客

转自https://github.com/jikeytang/front-end-collect 张鑫的博客 http://www.zhangxinxu.com/life/about/ 前端观察: http://www.qianduan.net/page/4 中文博客 名称 活跃度 原创度 维护者 其他 W3Cplus ★★★★★ ★★★★★ 携程 @大漠 国内最优秀的前端博客,原创居多 前端观察 ★★★★☆ ★★★★☆ 腾讯 ISUX @神飞 曾经最优秀,最近更新不频繁了 腾讯web前端 Al

[深度好文]想成为一个高效的Web开发者吗?来看看大牛分享的经验吧~外加一些自己的理解

前言: 无意间浏览到此篇文章,发现这篇文章无论是对于新手程序员,还是学过几年的程序员,都是挺有帮助的.于是,在此分享,后面也有我自己的一些理解,希望能帮到更多的朋友. 作为一个软(ku)件(bi)工(de)程(ma)师(nong),你有没有觉得做什么事都没时间?没时间学习新东西,没时间去回顾.整理原来写的烂代码,没时间写单元测试,没时间给接管你项目的家伙写文档,没时间思考,没时间喘气,没!时!间! 额--如果你肯花点时间看看这篇文章,我相信你会明白应该把时间花在哪. 我曾以为成为一个技术大牛的唯

阿里前端推出的新的React框架Mirror

前几天看到寸志的知乎文章,关于阿里前端推出的Mirror框架,在这里记录一下. Mirror是基于React,React-router,Redux的一套前端框架,总的来说是对它们的封装和强化. 其中,Redux对状态管理的流程很清晰,但是就代码来说,存在不少重复劳动,而Mirror对其进行了简化. 以下是一个Todo的例子 import mirror, { actions } from 'mirrorx' let nextId = 0 mirror.model({ name: 'todos',

JavaScript是WEB前端开发的必备技能

在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门小语言被重视了起来. 现在,很多公司会招专门的JavaScript工程师,通常JavaScript是WEB前端开发的必备技能.简单介绍了JavaScriptr的好处,并不代表大家就会去学习甚至把它学好,兴趣是很关键的,我认为兴趣是最好的老师,