web前端要学哪些东西,前端大牛分享的技能整理
前端工程师技能整理
一、框架与组件
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
在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,
如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,
还有工作中想提升自己能力的web前端党,
欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,
与企业需求同步。好友都在里面学习交流,
每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】
每天更新最新技术文章干货。
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动画
[ ] transform[ ] animation[ ] transiction[ ] 3D加速与动画加速[ ] 动画库[ ] 缓动函数速查表[ ] Ceaser[ ] cubic-bezier
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
结语
感谢您的观看,如有不足之处,欢迎批评指正。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
web前端要学哪些东西,前端大牛分享的技能整理相关推荐
- web前端要学哪些东西?主要做什么
web前端要学哪些东西?作为一个学习前端的人,必备的核心技能是 HTML.CSS 和 javascript.这些知识是构建前端知识的必要基础.通过使用 HTML.CSS.JavaScript 等专业知 ...
- 从事Web前端要学什么 常用前端开发技术有哪些
从事Web前端要学什么?常用前端开发技术有哪些?随着移动互联网的迅猛发展,Web前端工程师开始崭露头角.随着JS和XHTML应用程序的普及,越来越多的Web界面应用程序技术出现在网站上.有很多人想要从 ...
- java前端需要学什么_Web前端需要学什么?工作内容是什么?
现如今随着互联网行业的高速发展,Web前端工程师也被更多人了解和认识,那么想要成为Web前端工程师都需要学习哪些技能呢?Web前端岗位在企业中的工作内容都有哪些呢?下面跟随小编一起来看看吧. 什么是W ...
- dao模式和前端控制器结合使用_前端技术及开发模式的演进,带你了解前端技术的前世今生...
先声明,本篇不会讲带有年代性的前端发展史,不讲故事,想了解的读者可以去查阅一些其他的资料和文章,本篇仅仅从技术发展角度结合案例分析,说明前端技术的发展和开发模式的演进变化.本篇内容重点说明PC端技术, ...
- 好程序员web前端教程分享网页设计需要学那些东西?
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
- 想成为一个高效的Web开发者吗?来看看大牛分享的经验吧~ #精选JAVASCRIPT前端开发...
想成为一个高效的Web开发者吗?来看看大牛分享的经验吧~ 作为一个软(ku)件(bi)工(de)程(ma)师(nong),你有没有觉得做什么事都没时间?没时间学习新东西,没时间去回顾.整理原来写的烂代 ...
- Web前端如何学?Web前端学习方法分享
伴随着人工智能.大数据的发展浪潮,互联网将各个行业更加紧密的链接到了一起,也因此,市场上对于IT互联网人才的需求一再增多,Web前端开发工程师这一岗位就很好的体现了这种态势. 从各大招聘平台可以看到, ...
- Web前端要学什么框架呢?推荐这几款
经过行业的发展,Web前端行业愈加成熟,企业对Web前端人员要求也越来越高,对于想要进入前端行业的人而言挑战比以前更大了.学习Web框架可以加快Web开发速度,节约时间.就目前来说,Web前端要学什么 ...
- 自学web前端怎么学?web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
最新文章
- Android 防止快速点击
- java微信公众号开发token验证失败的问题及解决办法
- 删除表的sql命令是什么_【技术干货】30个最适合初学者的SQL查询
- 登录界面的滑动_【提醒】电子税务局登录方式有变化! 8月31日关闭“原方式登录”...
- 线程池ThreadPoolExcutor
- easyui js解析字符串_js相关:详解Jquery Easyui的验证扩展
- JAVA中获得前一天的时间
- 汉字-生僻字:生僻字目录2
- php mysql5.7.110安装教程_CentOS7安装配置Nginx1.10、PHP5.6、MySQL5.7教程
- 两个rpm文件包存在互相依赖关系时,需要同时安装,解决办法如下
- spring-boot设置静态文件路径
- 台式计算机卡拉ok点歌系统,如何用现有的台式电脑改造歌厅点歌系统
- matlab 画散点图后添加趋势线
- CAD零基础教程笔记
- SpringCloud平滑升级/优雅停机
- js正则表达式校验值是否为一个数字(正负整数,正负小数均可校验)
- Intel无线网卡蓝牙功能失效解决思路分享
- 高级复制解决冲突用DBMS_RECTIFIER_DIFF.RECTIFY出现的问题
- 三生三世十里桃花手游怎么用电脑玩 三生三世十里桃花模拟器教程
- Android初学 抖音短视频无水印下载APP的实现
热门文章
- oracle此环境不满嘴,2.Oracle歌词说唱流行音乐说唱歌曲
- lwip路由实现_TCP超时与重传《LwIP协议栈源码详解——TCP/IP协议的实现》
- Python入门之PyCharm中目录directory与包package的区别
- php过滤处理手机自带Emoji表情
- systemctl命令完全指南
- PHP中CURL方法curl_setopt()函数的一些参数
- 小小标签,强大功能——深藏不露的 input
- 一个 wince 开发经验的杰出blog
- 解读30个提高Web程序执行效率的好经验
- 2018.11.04 洛谷P1081 开车旅行(倍增)