web前端PPT

WEB前端刘梅花2014.12.24WEB前端前端简介前端技术前端工具前端简介前端是什么？HTML/CSS/JavaScript……与后端相比前端客户端环境不可预知代码开源数据无法隐藏更关注页面性能和用户体验前端简介前端主要职能：把网站界面更好的呈现给用户前端技术前端技术W3C标准视觉/交互设计兼容性技术性能及安全前端技术W3C标准WEB三项组成：结构、表现、行为前端人员遵守的第一原则：“结构与表现分离”结构标准（HTML/XHTML/XML）表现标准（CSS）行为标准（JavaScript）前端技术结构标准HTML：超文本标记语言XML：可扩展标记语言XHTML：可扩展超文本标记语言简史：1989年，TimBerners-Lee发明HTML1998年2月，发布XML1.01999年12月，发布HTML4.01版本2000年1月，发布XHTML1.02014年10月底，HTML5标准规范制定完成W3C标准-结构标准前端技术HTML——WEB应用的基石HTML应用原则：语义化W3C标准-结构标准前端技术HTML——WEB应用的基石HTML标签（94个）文档：html、head、body、title、meta、base、style、link、script、noscript结构：div、span、iframe表格：table、thead、tbody、tfoot、tr、td、th、col、colgroup、caption表单：from、input、textarea、button、select、optgroup、option、label、fieldset、legend列表：ul、ol、li、dl、dt、dd文本：a、i、b、big、small、em、strong、code、cite、sup、sub文章：h1-h6、p、br、pre、abbr、blockquote、q、ins、del、address媒体：img、map、area、object、param特殊标签：!DOCTYPE、!--—、hrW3C标准-结构标准前端技术HTML——WEB应用的基石HTML5新增标签：W3C标准-结构标准sectionheaderarticleasidefootervideoaudioprogressrubycanvasnavtimemarkfigurefigcaption前端技术HTML——WEB应用的基石HTML4与HTML5结构区别W3C标准-结构标准前端技术表现标准CSS：层叠样式表简史：1994年HåkonWiumLie提出了CSS的最初建议1996年12月，发布CSS1.01998年5月，发布CSS2.01999年开始制订CSS3.02011年9月开始设计CSS4.0W3C标准-表现标准前端技术CSS——程序员的画笔W3C标准-表现标准前端技术CSS——程序员的画笔CSS3.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——程序员的画笔优化你的CSS1.外部引入样式文件；2.尽量少使用子选择器；3.减少规则数量（3层）；4.csssprite技术；5.避免使用滤镜和表达式;……W3C标准-表现标准前端技术行为标准DOM：文档对象模型，定义了访问HTML和XML文档的标准，目前使用3.0版本ECMASCript：由Ecma国际通过ECMA-262标准化的脚本程序设计语言简史：1995年JavaScript诞生1996年ECMAScript诞生，1997年首版1998修正，1999年发布ECMAScript3.02009年，发布ECMAScript5.0ECMAScript6.0（harmony）制定中2013年，ECMAScript7.0草案确定W3C标准-行为标准前端技术JavaScriptJavaScript实现了网页实时的、动态的、可交互式得表达能力。语言特性：高阶函数可以将函数作为参数也可以返回函数动态类型延迟绑定可以赋给变量任意的值，并可以随时更改类型灵活的对象模型使用原型继承W3C标准-行为标准前端技术JavaScript——语言特性对象模型——使用原型继承W3C标准-行为标准前端技术JavaScript——闭包闭包：闭包是具有闭合作用域的匿名函数作用域：变量与函数的可访问范围，控制着变量与函数的可见性和生命周期。全局作用域所有未定义直接赋值的变量最外层函数和在最外层函数外面定义的变量局部作用域W3C标准-行为标准前端技术JavaScript——闭包注意：1、闭包允许内层函数引用父函数中的变量，但是该变量是最终值；2、不能滥用闭包，否则会导致内存泄露，造成网页性能问题。解决方法：在退出函数之前，将不使用的局部变量全部删除。参考：://标准-行为标准前端技术JavaScript——JavaScript引擎W3C标准-行为标准JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。由于浏览器js引擎的不同，导致js的各种兼容问题。前端技术JavaScript——JavaScript引擎W3C标准-行为标准前端技术JavaScript——WEB性能W3C标准-行为标准快速响应的界面减少DOM编程带来的性能损失优化Ajax性能前端技术JavaScript——WEB性能快速响应的界面：网页的UI渲染方式是单线程的尽量把js代码或文件放到页面底部异步载入WebWorkersHTML5新特性：WebWorkers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法；进程之间不会相互影响；除IE10以下，主流浏览器都提供原生支持；高启动性能成本和高进程内存成本，数量不宜过多。W3C标准-行为标准前端技术JavaScript——WEB性能W3C标准-行为标准创建webworkers文件：通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序。WebWorkers应用场景需要处理一个同步的第三方接口；需要向服务端返回大量的数据；复杂数学运算。参考：://前端技术JavaScript——WEB性能减少DOM编程带来的性能损失减少Reflow/Repaint操作，尤其Reflow重绘Repaint——颜色、文本、字体、背景图变化等重排Reflow——页面渲染、窗口大小改变、布局变化、DOM结构变化等使用事件代理减少内存占用避免重复绑定减少事件绑定的处理时间参考：://标准-行为标准前端技术JavaScript——WEB性能优化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（OpenWebApplicationSecurityProject）开放式Web应用程序安全项目。网址：（中文站）。性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，PageSpeed，showslow）。页面内容优化服务器优化前端技术性能及安全性能——页面内容优化•尽量减少HTTP请求次数1.合并文件2.CSSSprites3.剔除重复脚本•减少交互通信1.压缩javascript和CSS文件2.优化图片，尽量减少存储大小3.减少Cookie体积4.使用外部javascript和CSS文件5.缓存Ajax数据6.剔除未用到的脚本和样式7.推迟加载内容8.使用GET来完成AJAX请求9.对于静态内容使用无cookie请求•合理利用并行1.尽量避免重定向2.慎用iframe3.把样式表放在顶部4.脚本放到样式后面加载•节约系统消耗1.避免使用CSS表达式2.避免使用滤镜前端技术性能及安全性能——服务器优化•使用内容分发网络（CDN）•配置合理的服务器端缓存机制•Gzip压缩文件内容•减少DNS查找次数前端工具设计类切图工具：photoshop，Flash，Fireworks制作IDE：Dreamweaver，SublimeText，WebStorm调试类FirebugYslowHttpWatchFiddlerIEDeveloperToolBarChromeDeveloperToolsIETester前端工具Firebug：调试样式/布局，debugJavascript，查看网络情况；前端工具Firebug：调试样式/布局，debugJavascript，查看网络情况；前端工具Firebug：调试样式/布局，debugJavascript，查看网络情况；前端工具Yslow：监控页面性能，查找页面瓶颈，辅助调试页面（检查js语法，图片优化）；前端工具HttpWatch：查看页面渲染关键时间点，查看HTTP瀑布；前端工具Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；前端工具Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；前端工具Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；前端工具IEDeveloperToolBar：调试IE下的布局/样式，模拟IE6/7/8的渲染效果；前端工具ChromeDeveloperTools：调试高级特性(html5/本地存储)，调试CPU和内存的使用率，查看页面reflow；前端工具ChromeDeveloperTools：调试高级特性(html