web前端介绍PPT学习课件

WEB前端 线上平台事业部陈鑫均 WEB前端 前端简介前端技术流行框架前端工具 前端简介 前端是什么 HTML CSS JavaScript 与后端相比前端客户端环境不可预知代码开源数据无法隐藏更关注页面性能和用户体验 前端简介 前端主要职能 把网站界面更好的呈现给用户 前端技术 前端技术 常见浏览器 浏览器的组成UserInterface用户界面 我们平时看到的浏览器BrowserEngine浏览器引擎 负责协调各个部分的工作RenderingEngine渲染引擎 解析页面结构和样式Networking网络 负责与服务器的数据交互JavascriptInterpreterjs解释器 解释执行js代码UIBackendUI后台 负责浏览器自带的UI功能 比如alert 等DataPersistence数据持久化 浏览器本地数据存储 例如cookie等 前端技术 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个 文档 结构 表格 表单 列表 文本 文章 媒体 特殊标签 W3C标准 结构标准 前端技术 HTML WEB应用的基石HTML5新增标签 W3C标准 结构标准 section header article aside footer video audio progress ruby canvas nav time mark figure figcaption 前端技术 HTML WEB应用的基石HTML4与HTML5结构区别 W3C标准 结构标准 前端技术 表现标准CSS 层叠样式表简史 1994年H konWiumLie提出了CSS的最初建议1996年12月 发布CSS1 01998年5月 发布CSS2 01999年开始制订CSS3 02011年9月开始设计CSS4 0 W3C标准 表现标准 前端技术 CSS 程序员的画笔W3c margin border padding content 并且content部分不包含其他部分IE margin border padding content但是content部分包含了border和padding 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 程序员的画笔优化你的CSS外部引入样式文件 尽量少使用子选择器 减少规则数量 3层 csssprite技术 避免使用滤镜和表达式 W3C标准 表现标准 前端技术 行为标准DOM 文档对象模型 定义了访问HTML和XML文档的标准 目前使用3 0版本ECMASCript 由Ecma国际通过ECMA 262标准化的脚本程序设计语言简史 1995年诞生 专用于客户端数据验证 叫LiveScript当时Java很火 为了推广 更名Javascript1996年 微软发布了自己的Javascript 叫JScript1997年 ECMA组织规定了Javascript的标准 叫ECMAScript 约束了js的语法和功能2003年 js被大量用于页面广告 被称为 牛皮癣 2004年 Google公司推出Ajax技术 拯救了Js2007年 移动端的出现让js更加得到重视2010年 H5推出 Canvas和Javascript的结合使用 让js功能更加强大2011年 nodejs的出现 让js前后端通吃 W3C标准 行为标准 前端技术 JavaScriptJavaScript实现了网页实时的 动态的 可交互式得表达能力 语言特性 高阶函数可以将函数作为参数也可以返回函数动态类型延迟绑定可以赋给变量任意的值 并可以随时更改类型灵活的对象模型使用原型继承 W3C标准 行为标准 前端技术 JavaScriptJavascript是一门客户端脚本语言运行在客户端 浏览器 边解释边执行Javascript是一种弱类型的动态语言对数据的类型要求不严格 在执行的时候才知道数据的类型可以动态地向结构中添加内容 属性和方法 W3C标准 行为标准 前端技术 JavaScript WEB性能 W3C标准 行为标准 快速响应的界面减少DOM编程带来的性能损失优化Ajax性能 前端技术 JavaScript WEB性能快速响应的界面 网页的UI渲染方式是单线程的尽量把js代码或文件放到页面底部异步载入WebWorkersHTML5新特性 WebWorkers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法 进程之间不会相互影响 除IE10以下 主流浏览器都提供原生支持 高启动性能成本和高进程内存成本 数量不宜过多 W3C标准 行为标准 前端技术 JavaScript WEB性能减少DOM编程带来的性能损失减少Reflow Repaint操作 尤其Reflow重绘Repaint 颜色 文本 字体 背景图变化等重排Reflow 页面渲染 窗口大小改变 布局变化 DOM结构变化等使用事件代理减少内存占用避免重复绑定减少事件绑定的处理时间参考 W3C标准 行为标准 前端技术 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得34条性能准则 性能检测工具 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查找次数 流行框架 1 angularJS2是一个用于设计动态web应用的结构框架 首先 它是一个框架 不是类库 是像EXT一样提供一整套方案用于设计web应用 它不仅仅是一个javascript框架 因为它的核心其实是对HTML标签的增强特性一 双向的数据绑定特性二 模板特性三 MVC Model View Controll 特性四 服务和依赖注入特性五 指令 Directives 流行框架 2 VueJS MVVM模式 Vue是一套构建用户界面的渐进式框架 轻量高效的前端组件化方案Vue只关注视图层 采用自底向上增量开发的设计 Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 特性 简洁轻量快速数据驱动模块友好组件化 前端技术 EcmaScript6 版本 新语法ECMAScript和JavaScript的关系是 前者是后者的规格 后者是前者的一种实现 另外的ECMAScript方言还有Jscript和ActionScript 日常场合 这两个词是可以互换的 DefaultParameters 默认参数 inES6TemplateLiterals 模板文本 inES6Multi lineStrings 多行字符串 inES6DestructuringAssignment 解构赋值 inES6ArrowFunctions 箭头函数 inES6Block ScopedConstructsLetandConst 块作用域构造LetandConst 类似ECMAScript5的varClasses 类 inES6Modules 模块 inES6 前端技术 nodeJS简单的说Node js就是运行在服务端的JavaScript Node js是一个基于ChromeJavaScript运行