前端技术
HTML—— WEB应用的基石
HTML 标签（94个）
W3C标准-结构标准
文档：<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>
前端技术
JavaScript
W3C标准-行为标准
JavaScript实现了网页实时的、动态的、可交互式得表达能力。 语言特性：
高阶函数
可以将函数作为参数 也可以返回函数 动态类型 延迟绑定 可以赋给变量任意的值，并可以随时更改类型 灵活的对象模型
使用原型继承
前端技术
JavaScript——语言特性
步通信对象等操作上存在很多兼容性问题。
前端技术
性能及安全
网络安全：OWASP（Open Web Application Security Project）开放式Web应用 程序安全项目。网址：（中文站）。
性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。 页面内容优化 服务器优化
参考：/WebDev/JavaScript/672499.html /silence516/archive/2009/09/03/delegateEvent.html
前端技术
JavaScript——WEB 性能
优化Ajax性能
W3C标准-行为标准
前端技术
JavaScript——WEB 性能
快速响应的界面 减少DOM编程带来的性能损失
W3C标准-行为标准
优化Ajax性能
前端技术
JavaScript——WEB 性能
快速响应的界面：网页的UI渲染方式是单线程的
尽量把js代码或文件放到页面底部 异步载入 Web Workers HTML5新特性：Web Workers
前端技术
JavaScript——WEB 性能
减少DOM编程带来的性能损失
减少Reflow/Repaint操作，尤其Reflow 重绘Repaint——颜色、文本、字体、背景图变化等
W3C标准-行为标准
重排Reflow——页面渲染、窗口大小改变、布局变化、DOM结构变化等 使用事件代理 减少内存占用 避免重复绑定 减少事件绑定的处理时间
前端技术
CSS—— 程序员的画笔
W3C标准-表现标准
前端技术
CSS—— 程序员的画笔
CSS 3.0 重要模块
选择器——新的伪类 :last-child，属性选择器 [att^=“value"]
W3C标准-表现标准
框模型——box-sizing
背景和边框——多背景图，border-image，borderradius 文本效果——text-shadow，@font-face属性
2D/3D 转换——transform
动画——创建动画 @keyframes，animation 多列布局—— column-count，column-gap，columnrule 用户界面——调整元素尺寸resize ……
前端技术
CSS—— 程序员的画笔
优化你的CSS 1. 外部引入样式文件； 2. 尽量少使用子选ቤተ መጻሕፍቲ ባይዱ器； 3. 减少规则数量（3层）； 4. css sprite技术； 5. 避免使用滤镜和表达式; ……
调试类
Firebug Yslow
HttpWatch
Fiddler IE Developer ToolBar Chrome Developer Tools
IETester
前端工具
Firebug：调试样式/布局，debug Javascript，查看网络情况；
前端工具
Firebug：调试样式/布局，debug Javascript，查看网络情况；
对象模型——使用原型继承
W3C标准-行为标准
前端技术
JavaScript——闭包
闭包：闭包是具有闭合作用域的匿名函数
W3C标准-行为标准
作用域：变量与函数的可访问范围，控制着变量与函数的可见性和生命周期。 全局作用域 所有未定义直接赋值的变量 最外层函数和在最外层函数外面定义的变量 局部作用域
前端技术
前端技术
性能及安全
性能——服务器优化
•使用内容分发网络（CDN） •配置合理的服务器端缓存机制 • Gzip压缩文件内容 •减少DNS查找次数
前端工具
设计类
切图工具：photoshop，Flash，Fireworks 制作IDE：Dreamweaver，Sublime Text，WebStorm
W3C标准-行为标准
前端技术
JavaScript——JavaScript引擎
JavaScript引擎是一个专门处理 JavaScript脚本的虚拟机，一般会附 带在网页浏览器之中。 由于浏览器js引擎的不同，导致js的各 种兼容问题。
W3C标准-行为标准
前端技术
JavaScript——JavaScript引擎
为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法； 进程之间不会相互影响； 除IE10以下，主流浏览器都提供原生支持； 高启动性能成本和高进程内存成本，数量不宜过多。
W3C标准-行为标准
前端技术
JavaScript——WEB 性能
创建web workers文件：通过 postMessage()向任务池发送任务请 求，执行完之后再通过 postMessage()返回消息给创建者指 定的事件处理程序。
前端技术
W3C 标准
WEB三项组成：结构、表现、行为 前端人员遵守的第一原则：“结构与表现分离”
结构标准（HTML/XHTML/XML）
表现标准（CSS）
行为标准（JavaScript）
前端技术
结构标准
HTML ：超文本标记语言 XML：可扩展标记语言
W3C标准-结构标准
XHTML：可扩展超文本标记语言
HTML 4 与 HTML 5 结构区别
W3C标准-结构标准
前端技术
表现标准
CSS ：层叠样式表
W3C标准-表现标准
简史：
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
前端技术
HTML—— WEB应用的基石
HTML 5 新增标签：
W3C标准-结构标准
header
nav section
canvas
article
progress ruby
time mark
video
aside
audio
figure figcaption
footer
前端技术
HTML—— WEB应用的基石
前端工具
Firebug：调试样式/布局，debug Javascript，查看网络情况；
前端工具
Yslow：监控页面性能，查找页面瓶颈，辅助调试页面（检查js语法，图片优化）；
前端工具
HttpWatch：查看页面渲染关键时间点，查看HTTP瀑布；
前端工具
Fiddler：监控HTTP请求，劫持HTTP包，修改HTTP头等信息，做本地文件映射；
JavaScript——闭包
注意： 1、闭包允许内层函数引用父函数中的 变量，但是该变量是最终值； 2、不能滥用闭包，否则会导致内存泄 露，造成网页性能问题。解决方法： 在退出函数之前，将不使用的局部变 量全部删除。
参考： /rainman/archive/2009/03 /07/1405624.html /birdshome/archive/ 2006/05/28/ie_memoryleak.html
