web前端开发-博客目录

web前端开发是一个新的领域，知识连接范围广，处于设计与后端数据交互的桥梁，并且现在很多web前端相关语言标准，框架库都在高速发展。在学习过程中也常常处于烦躁与迷茫，有时候一直在想如何能够使自己更加系统化学习和积累，在看了很多对于web前端开发知识技能树总结图的时候有一个想法，自己根据理解总结一个web前端开发知识技能树，并且建立一个与之相匹配的博客文章目录，以后这就是整个博客的入口，以后添加修改相关知识总结，都在此目录进行操作。

作为工业设计专业转前端的学生，最开始对后端及数据库开发认识不深，后面学到PHP和Mysql，特别是了解到淘宝为代表的大型web开发需要解决的问题，例如知乎上：为什么很多看起来不是很复杂的网站，比如 Facebook 需要大量顶尖高手来开发？每天使用的互联网产品，看似简单易用，背后却凝聚着难以想象的智慧与劳动。也突然感受到前端工作所贡献的力量其实是那么微乎其微。所以，希望自己能够扩展自己的视野和眼界，不能仅看设计与前端，也能够有后端，数据库，服务器，操作系统方面的学习和积累。以一个解决问题，塑造更好地产品的角度去学习和思考。

总结花费的时间远大于学习的时间，需要很多思考与比较，梳理不同知识板块之间的关系与影响。特别是一些解决问题思路的总结是很重要的。

目前时间和具体实践关系很多知识远远没有完成好，希望能够建立好的框架基础知识，不浮躁，踏实做好。

主要总结思路：

1. web程序如何访问                     访问原理和传输协议，TCP/IP，http，https

2. 如何建立web程序                      web标准的学习，HTML，CSS，JavaScript，JSON，XML等

3. web程序运行环境                      浏览器内核，移动端，兼容性，性能优化，SEO，web安全等

4. 如何更有效开发程序                    类库框架（UI图标，Boostrap,JQuery,JQ Mobile,,requireJs,MVC,NodeJs,FIS)等

5. 如何更有效维护管理程序             编辑工具，效率工具，版本管理，调试，测试…

6. 向前延伸：用户体验设计             交互设计，界面设计，UI设计，动效设计…

7. 向后延伸：后端开发                   PHP,NodeJs,Mysql,操作系统…

理想是丰满的，现实的骨干的，先做好基础…

1. Web访问原理与传输协议

1.1 Web访问原理    从输入URL到页面加载完成的过程中都发生了什么事情？对web程序优化的影响？

         1.2 浏览器渲染页面原理    浏览器加载代码，回流等机制如何影响开发者编写代码？对页面加载优化的影响？

         1.3 HTTP协议    客户端与服务器端如何进行通信

1.3.1 HTTP协议 首部字段      客户端与服务器端如何通信  缓存？状态码？页面编码？认证？

1.3.2 确保Web安全的HTTPS      HTTP协议主要存在哪些安全隐患？ 如何解决？

1.3.3 基于HTTP功能追加的协议     HTTP协议性能瓶颈，SPDY,WebSocket

2. 如何建立Web程序-Web标准  对Web标准的理解

2.1 Web标准之结构—HTML

2.1.1 结构语义化思想        如何理解结构语义化？

2.1.2 HTML常用知识点总结        XHTML与HTML，DOCTYPE，meta，块级与行级元素等

2.1.3 HTML5新增语义化结构标签        DOCTYPE声明，布局结构标签，其它常用结构，兼容性处理

2.1.4 HTML5新增常用API      canvas,SVG,地理定位，web存储

2.2 Web标准之样式—CSS

2.2.1 CSS样式来源与层叠规则        浏览器如何加载和解析CSS

2.2.2 选择符及优先级

2.2.3 页面呈现文字修饰

2.2.4 页面布局定位          盒模型，定位机制，Float，Position，Display

2.2.5 响应式         页面及其组件都保证灵活性  文字，导航，框，表格，整体布局等。

2.2.6 常用整体布局       多列布局，列宽度是固定宽度还是自适应

2.2.7 CSS3新属性       渐变，多图片背景，RGBA，文字特效，转换，过渡，动画，多列，媒体查询等

2.3 Web标准之行为—JavaScript

2.3.1 JavaScript概要组成部分        静态，基于对象，事件驱动； ECMAScript,DOM和BOM

2.3.2 基本语法和数据类型        Number,Boolean,String,Null,Undefined,Object

2.3.3 运算符和操作符

2.3.4 常用语句

2.3.5 函  数        JS预解析，函数变量提升申明，执行环境，作用域，arguments,this,闭包

2.3.6 对  象        对象属性和方法，对象属性特性 ，原型与原型链，面向对象设计

2.3.7 内置对象        内建全局单例对象，内建对象

2.3.8 正则表达式        匹配特殊字符，匹配模式，匹配方法

2.3.9 BOM浏览器对象模型        核心：widow对象，Location，Navigator，Screen，History

2.3.9 DOM文档对象模型        实际工作中更多考虑JQuery操作

2.3.9 事件        事件流，事件对象，组织默认行为，组织事件传播，事件委托

           其他常用Web标准

2.4 Ajax

2.4.1 Ajax        异步获取数据

2.4.2 Ajax缓存        缓存控制

2.4.3 Ajax跨域请求        JSONP

2.4.4 JQurey中的Ajax        将Ajax一些操作封装成函数

2.5 JSON     轻量级数据交换格式

2.5.1 JSON        JSON字符串，JSON对象，相互转换

2.6 XML     数据交换格式

2.6.1 XML          扩展标记语言,感觉没有JSON轻量好操作

3. Web程序运行环境

3.1 浏览器内核

3.2 移动端

3.3 兼容性

3.3.1 常见HTML&CSS兼容性总结

3.3.2 CSS Hack

3.4 性能优化

3.4.1 根据web访问流程的各个阶段可以如何进行优化   1. 浏览器缓存  2.查询DNS  3.建立连接   4.发送请求   5.等待响应   6.接收数据   7.处理元素   8.渲染元素

3.5 前端必须理解的SEO

3.6 Web安全         同源策略 、 XSS跨站点攻击 、CSRF跨站点请求伪造 、 点击劫持 、SQL注入、盗链

4. 库类学习

4.1 UI图标管理系统    fontAwesome 图标系统(官网)  利用文字代替图标

4.2 HTML&CSS开发框架 Bootstrap(官网)

4.3 JavaScript 库  jQuery(官网)      选择器、事件、DOM操作、Ajax等及其插件

4.4 移动端框架  jQuery  Mobile(官网)     页面设置、页面过渡、页面事件、页面常用组件、常用事件等

4.5 模块化  AMD (requriejs) CMD (seajs)

4.6 MVC MVVM  Ember.js  Angular.js  Vue.js

5. 工具效率管理学习

5.1 图片处理工具    Photoshop  Cutterman切图工具

5.2 编辑工具    Sublime Text(Zencoding 常用插件和快捷键）  Webstorm

5.3 调试工具    Chrome控制台  Firebug

5.4 效率工具    Grunt (ugligy,concat,cssmin,jshint,csslint,watch)  Gulp

5.5 前端集成解决方案    百度FIS

5.6 版本管理工具    Github  Git

6. 用户体验设计

6.1 用户体验系统设计方法      所做的一个实际产品设计案例：家庭安全管家

7. 后端开发

7.1 NodeJs

7.2 WAMP(Window,Apache,Mysql与PHP)

备注：很多都不完善，希望慢慢变得完善，健壮。就像自己编写的程序一样…..