web前端PPT.ppt

标题文本,正文级别 1,正文级别 2,正文级别 3,正文级别 4,正文级别 5,WEB前端,WEB前端,前端简介,前端技术,前端工具,前端简介,前端是什么？,HTML/CSS/JavaScript,与后端相比,前端客户端环境不可预知,代码开源,数据无法隐藏,更关注页面性能和用户体验,前端简介,前端主要职能：把网站界面更好的呈现给用户,前端技术,前端技术,W3C,标准,视觉/交互设计,兼容性技术,性能及安全,前端技术,W3C,标准,WEB三项组成：结构、表现、行为,前端人员遵守的第一原则：“结构与表现分离”,结构标准（HTML/XHTML/XML）,表现标准（CSS）,行为标准（JavaScript）,前端技术,结构标准,HTML：超文本标记语言,XML：可扩展标记语言,XHTML：可扩展超文本标记语言,简史：,1989年，Tim Berners-Lee发明HTML,1998年2月，发布XML 1.0,1999年12月，发布HTML4.01版本,2000年1月，发布XHTML1.0,2014年10月底，HTML 5标准规范制定完成,W3C标准-结构标准,前端技术,HTML WEB应用的基石,HTML 应用原则：语义化,W3C标准-结构标准,前端技术,HTML WEB应用的基石,HTML 标签（94个）,文档：、,结构：、,表格：、,表单：、,列表：、,文本：、,文章：-、,媒体：、,特殊标签：、,W3C标准-结构标准,前端技术,HTML WEB应用的基石,HTML 5 新增标签：,W3C标准-结构标准,section,header,article,aside,footer,video,audio,progress,ruby,canvas,nav,time,mark,figure,figcaption,前端技术,HTML WEB应用的基石,HTML 4 与 HTML 5 结构区别,W3C标准-结构标准,前端技术,表现标准,CSS：层叠样式表,简史：,1994年 Hkon Wium Lie 提出了CSS的最初建议,1996年12月，发布 CSS 1.0,1998年5月，发布 CSS 2.0,1999年开始制订 CSS 3.0,2011年9月开始设计CSS 4.0,W3C标准-表现标准,前端技术,CSS 程序员的画笔,W3C标准-表现标准,前端技术,CSS 程序员的画笔,CSS 3.0 重要模块,选择器新的伪类:last-child，属性选择器 att=“value,框模型box-sizing,背景和边框多背景图，border-image，border-radius,文本效果text-shadow，font-face属性,2D/3D 转换transform,动画创建动画 keyframes，animation,多列布局 column-count，column-gap，column-rule,用户界面调整元素尺寸resize,W3C标准-表现标准,前端技术,CSS 程序员的画笔,优化你的CSS,外部引入样式文件；,尽量少使用子选择器；,减少规则数量（3层）；,css sprite技术；,避免使用滤镜和表达式;,W3C标准-表现标准,前端技术,行为标准,DOM：文档对象模型，定义了访问 HTML 和 XML 文档的标准，目前使用3.0版本,ECMASCript：由Ecma国际通过ECMA-262标准化的脚本程序设计语言,简史：,1995年 JavaScript 诞生,1996年 ECMAScript 诞生，1997年首版,1998修正，1999年发布 ECMAScript 3.0,2009年，发布ECMAScript 5.0,ECMAScript 6.0（harmony）制定中,2013年，ECMAScript 7.0草案确定,W3C标准-行为标准,前端技术,JavaScript,JavaScript实现了网页实时的、动态的、可交互式得表达能力。,语言特性,：,高阶函数,可以将函数作为参数,也可以返回函数,动态类型,延迟绑定,可以赋给变量任意的值，并可以随时更改类型,灵活的对象模型,使用原型继承,W3C标准-行为标准,前端技术,JavaScript语言特性,对象模型使用原型继承,W3C标准-行为标准,前端技术,JavaScript闭包,闭包：闭包是具有闭合作用域的匿名函数,作用域：变量与函数的可访问范围，控制着变量与函数的可见性和生命周期。,全局作用域,所有未定义直接赋值的变量,最外层函数和在最外层函数外面定义的变量,局部作用域,W3C标准-行为标准,前端技术,JavaScript闭包,注意,：,1、闭包允许内层函数引用父函数中的变量，但是该变量是最终值；,2、不能滥用闭包，否则会导致内存泄露，造成网页性能问题。解决方法：在退出函数之前，将不使用的局部变量全部删除。,参考：性能,W3C标准-行为标准,快速响应的界面,减少DOM编程带来的性能损失,优化Ajax性能,前端技术,JavaScriptWEB 性能,快速响应的界面,：网页的UI渲染方式是单线程的,尽量把js代码或文件放到页面底部,异步载入,Web Workers,HTML5新特性：Web Workers,为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法；,进程之间不会相互影响；,除IE10以下，主流浏览器都提供原生支持；,高启动性能成本和高进程内存成本，数量不宜过多。,W3C标准-行为标准,前端技术,JavaScriptWEB 性能,W3C标准-行为标准,创建web workers文件：,通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序。,Web Workers 应用场景,需要处理一个同步的第三方接口；,需要向服务端返回大量的数据；,复杂数学运算。,参考：,性能,减少DOM编程带来的性能损失,减少Reflow/Repaint操作，尤其Reflow,重绘Repaint颜色、文本、字体、背景图变化等,重排Reflow页面渲染、窗口大小改变、布局变化、DOM结构变化等,使用事件代理,减少内存占用,避免重复绑定,减少事件绑定的处理时间,参考：,性能,优化Ajax性能,缓存数据,1.在服务器端，设置HTTP头信息以确保你的响应会被浏览器缓存；,2.在客户端，把获取到的信息存储到本地，从而避免再次请求。,参考书籍：高性能Javascript,W3C标准-行为标准,前端技术,视觉/交互设计,视觉设计又称UI（User-Inteface）设计。,视觉设计是前端开发的基础技能，前端开发的一个重要意义就是通过代码呈给用户良好视觉体验的界面。,需要了解WEB的排版艺术及交互艺术,会使用Photoshop这类画图工具,了解设计WEB 应用的一些方法,交互设计是设计人和物的对话，以设计和改善产品的有用性，易用性和吸引性为目的。,前端技术,兼容性技术,Trident内核：IE6-IE11；,Gecko内核：Firefox；,Webkit内核：Safari、Chrome；,双核/多核浏览器：遨游、360、百度、搜狗,各大浏览器对W3C标准的支持程度不尽相同，在CSS样式、DOM操作、XML解析、创建异步通信对象等操作上存在很多兼容性问题。,前端技术,性能及安全,网络安全：OWASP（Open Web Application Security Project）开放式Web应用程序安全项目。网址：（中文站）。,性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。,页面内容优化,服务器优化,前端技术,性能及安全,性能页面内容优化,尽量减少HTTP请求次数,1.合并文件,2.CSS Sprites,3.剔除重复脚本,减少交互通信,1.压缩 javascript 和 CSS 文件,2.优化图片，尽量减少存储大小,3.减少Cookie体积,4.使用外部 javascript 和 CSS 文件,5.缓存Ajax数据,6.剔除未用到的脚本和样式,7.推迟加载内容,8.使用GET来完成AJAX请求,9.对于静态内容使用无cookie请求,合理利用并行,1.尽量避免重定向,2.慎用iframe,3.把样式表放在顶部,4.脚本放到样式后面加载,节约系统消耗,1.避免使用CSS表达式,2.避免使用滤镜,前端技术,性能及安全,性能服务器优化,使用内容分发网络（CDN）,配置合理的服务器端缓存机制,Gzip压缩文件内容,减少DNS查找次数,前端工具,设计类,切图工具：photoshop，Flash，Fireworks,制作IDE：Dreamweaver，Sublime Text，WebStorm,调试类,Firebug,Yslow,HttpWatch,Fiddler,IE Developer ToolBar,Chrome Developer Tools,IETester,前端工具,Firebug：调试样式/布局，debug Javascript，查看网络情况；,前端工具,Firebug：调试样式/布局，debug Javascript，查看网络情况；,前端工具,Firebug：调试样式/布局，debug Javascript，查看网络情况；,前端工具,Yslow：监控页面性能，查找页面瓶颈，辅助调试页面（检查js语法，图片优化）；,前端工具,HttpWatch：查看页面渲染关键时间点，查看HTTP瀑布；,前端工具,Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；,前端工具,Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；,前端工具,Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；,前端工具,IE Developer ToolBar：调试IE下的布局/样式，模拟IE6/7/8的渲染效果；,前端工具,Chrome Developer Tools：调试高级特性(html5/本地存储)，调试CPU和内存的使用率，查看页面reflow；,前端工具,Chrome Developer Tools：调试高级特性(html5/本地存储)，调试CPU和内存的使用率，查看页面reflow；,前端工具,IETester：多版本IE测试。,WEB前端,thanks！,