web前端的技术与工具

1、 前端简介 前端技术 前端工具前端是什么？HTML/CSS/JavaScript与后端相比前端客户端环境不可预知代码开源数据无法隐藏更关注页面性能和用户体验前端主要职能：把网站界面更好的呈现给用户前端主要职能：把网站界面更好的呈现给用户W3C 标准视觉/交互设计兼容性技术性能及安全W3C 标准 WEB三项组成：结构、表现、行为 前端人员遵守的第一原则：“结构与表现分离”结构标准（HTML/XHTML/XML）表现标准（CSS）行为标准（JavaScript）结构标准 HTML ：超文本标记语言 XML：可扩展标记语言 XHTML：可扩展超文本标记语言 简史：1989年，Tim Berners-

2、Lee发明HTML1998年2月，发布XML 1.01999年12月，发布HTML4.01版本2000年1月，发布XHTML1.02014年10月底，HTML 5标准规范制定完成W3C标准-结构标准HTML WEB应用的基石 HTML 应用原则：语义化W3C标准-结构标准HTML WEB应用的基石 HTML 标签（94个）文档：、结构：、表格：、表单：、列表：、文本：、 文章： - 、媒体：、特殊标签：、W3C标准-结构标准HTML WEB应用的基石 HTML 5 新增标签：W3C标准-结构标准sectionheaderarticleasidefootervideoaudioprogressr

3、ubycanvasnavtimemarkfigurefigcaptionHTML WEB应用的基石 HTML 4 与 HTML 5 结构区别W3C标准-结构标准表现标准 CSS ：层叠样式表 简史：1994年 Hkon Wium Lie 提出了CSS的最初建议1996年12月，发布 CSS 1.01998年5月，发布 CSS 2.01999年开始制订 CSS 3.02011年9月开始设计CSS 4.0W3C标准-表现标准CSS 程序员的画笔W3C标准-表现标准CSS 程序员的画笔CSS 3.0 重要模块选择器新的伪类:last-child，属性选择器 att=“value框模型box-sizi

4、ng背景和边框多背景图，border-image，border-radius文本效果text-shadow，font-face属性2D/3D 转换transform动画创建动画 keyframes，animation多列布局 column-count，column-gap，column-rule用户界面调整元素尺寸resizeW3C标准-表现标准CSS 程序员的画笔 优化你的CSS1. 外部引入样式文件；2. 尽量少使用子选择器；3. 减少规则数量（3层）；4. css sprite技术；5. 避免使用滤镜和表达式;W3C标准-表现标准行为标准 DOM ：文档对象模型，定义了访问 HTML 和

5、 XML 文档的标准，目前使用3.0版本 ECMASCript：由Ecma国际通过ECMA-262标准化的脚本程序设计语言 简史：1995年 JavaScript 诞生1996年 ECMAScript 诞生，1997年首版1998修正，1999年发布 ECMAScript 3.02009年，发布ECMAScript 5.0ECMAScript 6.0 （harmony）制定中2013年，ECMAScript 7.0草案确定W3C标准-行为标准JavaScript JavaScript实现了网页实时的、动态的、可交互式得表达能力。 语言特性语言特性：高阶函数可以将函数作为参数也可以返回函数动态类

6、型延迟绑定可以赋给变量任意的值，并可以随时更改类型灵活的对象模型使用原型继承W3C标准-行为标准JavaScript语言特性 对象模型使用原型继承W3C标准-行为标准JavaScript闭包 闭包：闭包是具有闭合作用域的匿名函数 作用域：变量与函数的可访问范围，控制着变量与函数的可见性和生命周期。全局作用域所有未定义直接赋值的变量最外层函数和在最外层函数外面定义的变量局部作用域W3C标准-行为标准JavaScript闭包注意注意：1、闭包允许内层函数引用父函数中的变量，但是该变量是最终值；2、不能滥用闭包，否则会导致内存泄露，造成网页性能问题。解决方法：在退出函数之前，将不使用的局部变量全部删

7、除。参考：http:/ 性能W3C标准-行为标准快速响应的界面减少DOM编程带来的性能损失优化Ajax性能JavaScriptWEB 性能快速响应的界面快速响应的界面：网页的UI渲染方式是单线程的 尽量把js代码或文件放到页面底部 异步载入 Web WorkersHTML5新特性：Web Workers 为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法； 进程之间不会相互影响； 除IE10以下，主流浏览器都提供原生支持； 高启动性能成本和高进程内存成本，数量不宜过多。W3C标准-行为标准JavaScriptWEB 性能W3C标准-行为标准创建创建web workers文件：文件：通过

8、postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序。Web Workers 应用场景 需要处理一个同步的第三方接口； 需要向服务端返回大量的数据； 复杂数学运算。参考：http:/ 性能减少减少DOM编程带来的性能损失编程带来的性能损失 减少Reflow/Repaint操作，尤其Reflow 重绘Repaint颜色、文本、字体、背景图变化等重排Reflow页面渲染、窗口大小改变、布局变化、DOM结构变化等 使用事件代理减少内存占用避免重复绑定减少事件绑定的处理时间 参考：http:/ http:/ 性能优化优化Ajax性

9、能性能 缓存数据 1. 在服务器端，设置HTTP头信息以确保你的响应会被浏览器缓存；2. 在客户端，把获取到的信息存储到本地，从而避免再次请求。 参考书籍：高性能JavascriptW3C标准-行为标准视觉/交互设计 视觉设计又称UI（User-Inteface）设计。 视觉设计是前端开发的基础技能，前端开发的一个重要意义就是通过代码呈给用户良好视觉体验的界面。需要了解WEB的排版艺术及交互艺术会使用Photoshop这类画图工具了解设计WEB 应用的一些方法 交互设计是设计人和物的对话，以设计和改善产品的有用性，易用性和吸引性为目的。兼容性技术 Trident内核：IE6-IE11； Gec

10、ko内核：Firefox； Webkit内核：Safari、Chrome； 双核/多核浏览器：遨游、360、百度、搜狗 各大浏览器对W3C标准的支持程度不尽相同，在CSS样式、DOM操作、XML解析、创建异步通信对象等操作上存在很多兼容性问题。性能及安全 网络安全：OWASP（Open Web Application Security Project）开放式Web应用程序安全项目。网址：http:/（中文站）。 性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。页面内容优化服务器优化性能及安全性能页面内容优化尽量减少HTTP请

11、求次数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. 慎用iframe3. 把样式表放在顶部4. 脚本放到样式后面加载节约系统消耗1. 避免使用CSS表达式2. 避免使用滤镜性能及安全性能服务器优化使用内容分发网络（CDN）配置合理

12、的服务器端缓存机制Gzip压缩文件内容减少DNS查找次数设计类 切图工具：photoshop，Flash，Fireworks 制作IDE：Dreamweaver，Sublime Text，WebStorm调试类 Firebug Yslow HttpWatch Fiddler IE Developer ToolBar Chrome Developer Tools IETesterFirebug：调试样式/布局，debug Javascript，查看网络情况；Firebug：调试样式/布局，debug Javascript，查看网络情况；Firebug：调试样式/布局，debug Javascript，查看网络情况；Yslow：监控页面性能，查找页面瓶颈，辅助调试页面（检查js语法，图片优化）；HttpWatch：查看页面渲染关键时间点，查看HTTP瀑布；Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件