-
- 素材大小：
- 11.85 MB
- 素材授权：
- 免费下载
- 素材格式：
- .ppt
- 素材上传：
- chenrong
- 上传时间：
- 2018-05-08
- 素材编号：
- 193376
- 素材类别：
- 课件PPT
-
素材预览
这是前端知识分享ppt，包括了前端主要职能，前端技术，WEB应用的基石， JavaScript实现了网页实时的、动态的、可交互式得表达能力等内容，欢迎点击下载。
前端知识分享ppt是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.
WEB前端
刘梅花 2014.12.24
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标准规范制定完成
前端技术
HTML—— WEB应用的基石
HTML 应用原则：语义化
前端技术
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>、<!-- —>、<hr>
前端技术
HTML—— WEB应用的基石
HTML 5 新增标签：
前端技术
HTML—— WEB应用的基石
HTML 4 与 HTML 5 结构区别
前端技术
表现标准
CSS ：层叠样式表
简史：
1994年 Håkon Wium Lie 提出了CSS的最初建议
1996年12月，发布 CSS 1.0
1998年5月，发布 CSS 2.0
1999年开始制订 CSS 3.0
2011年9月开始设计CSS 4.0
前端技术
CSS—— 程序员的画笔
前端技术
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
……
前端技术
CSS—— 程序员的画笔
优化你的CSS
外部引入样式文件；
尽量少使用子选择器；
减少规则数量（3层）；
css sprite技术；
避免使用滤镜和表达式;
……
前端技术
行为标准
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草案确定
前端技术
JavaScript
JavaScript实现了网页实时的、动态的、可交互式得表达能力。
语言特性：
高阶函数
可以将函数作为参数
也可以返回函数
动态类型
延迟绑定
可以赋给变量任意的值，并可以随时更改类型
灵活的对象模型
使用原型继承
前端技术
JavaScript——语言特性
对象模型——使用原型继承
前端技术
JavaScript——闭包
闭包：闭包是具有闭合作用域的匿名函数
作用域：变量与函数的可访问范围，控制着变量与函数的可见性和生命周期。
全局作用域
所有未定义直接赋值的变量
最外层函数和在最外层函数外面定义的变量
局部作用域
前端技术
JavaScript——闭包
注意：
1、闭包允许内层函数引用父函数中的变量，但是该变量是最终值；
2、不能滥用闭包，否则会导致内存泄露，造成网页性能问题。解决方法：在退出函数之前，将不使用的局部变量全部删除。
参考：http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html
http://www.cnblogs.com/birdshome/archive/2006/05/28/ie_memoryleak.html
前端技术
JavaScript——JavaScript引擎
前端技术
JavaScript——JavaScript引擎
前端技术
JavaScript——WEB 性能
前端技术
JavaScript——WEB 性能
快速响应的界面：网页的UI渲染方式是单线程的
尽量把js代码或文件放到页面底部
异步载入
Web Workers
HTML5新特性：Web Workers
为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法；
进程之间不会相互影响；
除IE10以下，主流浏览器都提供原生支持；
高启动性能成本和高进程内存成本，数量不宜过多。
前端技术
JavaScript——WEB 性能
前端技术
JavaScript——WEB 性能
减少DOM编程带来的性能损失
减少Reflow/Repaint操作，尤其Reflow
重绘Repaint——颜色、文本、字体、背景图变化等
重排Reflow——页面渲染、窗口大小改变、布局变化、DOM结构变化等
使用事件代理
减少内存占用
避免重复绑定
减少事件绑定的处理时间
参考：http://www.xue5.com/WebDev/JavaScript/672499.html
http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html
前端技术
JavaScript——WEB 性能
优化Ajax性能
缓存数据
1. 在服务器端，设置HTTP头信息以确保你的响应会被浏览器缓存；
2. 在客户端，把获取到的信息存储到本地，从而避免再次请求。
参考书籍：《高性能Javascript》
前端技术
视觉/交互设计
视觉设计又称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应用程序安全项目。网址：http://www.owasp.org.cn（中文站）。
性能：基础原则（比如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. 推迟加载内容
前端技术
性能及安全
性能——服务器优化
使用内容分发网络（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！web前端技术分享ppt：这是web前端技术分享ppt，包括了项目选题概述，项目分工及完成情况，项目原型展示，Ul设计方案，用户使用指南，网站编码，项目总结等内容，欢迎点击下载。
前端培训ppt：这是前端培训ppt，包括了切图过程介绍，常用标签及css属性介绍，常用经典布局，基础知识补充，常用参考网站等内容，欢迎点击下载。
前端案例分享ppt：这是前端案例分享ppt，包括了说点闲话，准备工作，学习初期，问题讨论，准备，个人电脑，开发工具，书、视频，制定计划等内容，欢迎点击下载。
-
素材评分榜
素材排行榜
-
猜你喜欢
-
- web前端技术分享ppt
- 文档大小：1.09 MB
- 上传时间：06-26
![web前端技术分享ppt]()
-
- 前端培训ppt
- 文档大小：1.84 MB
- 上传时间：06-20
![前端培训ppt]()
-
- 前端案例分享ppt
- 文档大小：1.24 MB
- 上传时间：02-15
![前端案例分享ppt]()
-
- 陆风X8前端轮系异响故障诊断与维修教程PPT课
- 文档大小：473 KB
- 上传时间：12-13
![陆风X8前端轮系异响故障诊断与维修教程PPT课]()
-
- 关于正能量的ppt
- 文档大小：7 MB
- 上传时间：03-04
![关于正能量的ppt]()
-
- 变色龙ppt优秀课件
- 文档大小：3 MB
- 上传时间：03-04
![变色龙ppt优秀课件]()
-
- 儿童画ppt课件
- 文档大小：5 MB
- 上传时间：03-04
![儿童画ppt课件]()
-
