刚刚做完1个复杂页面的前端性能优化，这里的优化是针对这个页面具体的需求单独做的优化，所以这里不会谈那些减少http请求，合并压缩js,css，图片合并等等。因为这些是所有页面都需要做的，如果需要了解这些，可以参考我这篇文章：web高性能开发系列随笔
页面介绍：
该页面是1个记账类的页面，页面如下：
页面主要有4部分组成：
1. 上部的输入部分(有5大不同的类型，每个类型都是1个单独的tab，对应内容也不一样)
2. 左边的分类列表(默认显示一级分类，点击展开子类)
3. 右边时间选择区(按月，年，季，自定义时间过滤等等)
4. 右边下半部分的数据列表(默认只显示每条数据基本信息，点击展开详细信息)
可能看到这里大家不觉的这个页面会很大，那就再细说下，该页面包含记账的所有的功能(添加、删除，修改，分拆，上传图片，显示数据，数据排序)，而且每种下拉列表前面都有个"加号"(见输入部分的下列列表)，点击"加号"都会弹出类似如下的窗口进行添加(总共有8个左右的弹出窗口)，所有的这些都是通过js来实现(js代码总共写了大概2000行，不含注释)：
问题
该页面有一些用户反映比较慢，经过测试也发现，因为页面比较复杂，js也比较多，所以在IE下速度会比较慢(特别是IE6)，而chrome和firefox速度还是可以的，所以这次的优化主要针对IE，当然优化后的其他浏览器肯定也会受益。
优化1：弹出窗口的延迟加载
本来第1个优化不应该写这个，因为这个优化效果并不是最明显的。把它放在第一位，是因为个人觉得这种延迟加载的想法还不错，比较有新意(目前还没见过网上有人介绍过这种延迟加载)。
入正题，上面说到，该页面总共有8个弹出窗口，而且每个弹出窗口的都使用了不同的图片(不少是png)，监控发现这些弹出窗口用的png图片虽然设置了缓存头(也使用了document.execCommand("BackgroundImageCache", false, true);)，但是在IE6下每次都不直接使用缓存，而是发生1个请求，并得到304状态回应(原因我估计跟使用DD_belatedPNG来处理png图片有关，因为时间关系还没深入研究)，监控图如下：
从图中可以看出这几个图片很影响加载速度，其实一开始我们根本用不上这些弹出窗口的图片，因为默认都是隐藏的，而且这些弹出窗口，一般用户都用的比较少。理所当然，我们想到了延迟加载。
想到延迟加载，第一想到就是先不加载弹出窗口的html代码，这样就不会加载对应的图片了，当用户点击弹出按钮的时候，再去后台加载对应的html代码。但这样就有个问题，当用户点击"加号"按钮，用ajax去加载html代码，用户明显就会感觉到半天窗口还没弹出来，就会连续的点击，这种用户体验肯定是失败的。
我们想要的延迟加载是先加载html代码，但不加载html代码使用的图片。但用户点击"加号"的时候，直接弹出窗口并加载图片，这样用户一点击就可以看到窗口。那如何实现这种功能了，于是我想到了html的注释。我们先把所有弹出窗口的html代码放进注释中(这样就不会加载图片)，当用户点击"加号"时，用js读取注释中的html插入到body中(不需要ajax)，然后弹出窗口。
比如有2个弹出窗口，代码大概如下(并不是完整代码，不能直接运行)：
总结：
这种延迟加载的方式，主要用于延迟图片的加载，css的应用，js的解析和执行等等，并不是为了延迟加载html。如果是大量的html代码，比如分页的数据，
使用这种方式就不太合适。个人觉的这种加载方式还可以在很多地方用的到的。
上一篇"记一复杂页面的前端优化(1) - 不一样的延迟加载", 说了下对弹出窗口的优化，接下来说说其他的优化，先把界面图贴出来，方便对照：
下拉列表优化
然后创建自己的输入框和弹出框。当页面只有1，2个select的时候，没发现有什么问题，但当页面出现7，8个select 的时候，熏染速度明显慢了很多，可以看着1个个select变成input，主要原因还是js执行的太多了(动态生成html，绑定事件)等等。这个是影响页面渲染速度的1个大问题，所以第一个要解决的就是这个select。因原始的select外观是在是不行，而且又不能修改样式，所以我们选择了1个jquery的selectbox插件，该插件的实现原理：在页面加载完毕后，隐藏原始的select,然后创建自己的输入框和弹出框。当页面只有1，2个select的时候，没发现有什么问题，但当页面出现7，8个select的时候，熏染速度明显慢了很多，可以看着1个个select变成input.主要原因还是js执行的太多了(动态生成html，绑定事件)等等。这个是影响页面渲染速度的1个大问题，所以第一个要解决的就是这个select。
目前的解决方案是服务器端和js结合使用，通过jsp的标签(net应该叫自定义控件)生成html代码,并不生成任何js 来绑定事件，而且当用户第一次点击input的时候，才绑定所有事件，弹出下拉窗口。这样就完全解决了渲染的问题，因为不需要js来生成html，也不需要页面加载的时候去绑定所有事件。
右下的数据列表延迟加载
右下方的数据列表，默认只显示基本信息，当用户点击的时候才展开详细信息，一般用户只有在编辑和删除的时候才会用到详细信息，大部分情况可能不会用编辑和删除，也就不需要展开详细信息。之前的做法就是在加载列表的时候就把详细信息的html都生成好，只是隐藏一下，所以加载列表就比较慢。把详细信息改成延迟加载，当用户单击某行数据，才去生成对应的详细信息html代码，并展开显示。
png图片转gif
这个页面用了很多PNG图片，比如收入、支出的图标，左边分类的图片，选择框的图标。而png图片在ie6下要做单独处理，为了提高性能，跟设计师商量后，把一些图片转成gif的。虽然gif的转了后效果没PNG的好看，但还可以接受，而且也是透明的，于是就通过CSS HACK,让在IE6下使用gif图片，在其他浏览器下使用png图片。这样就可以提高IE6下的速度，而又不用降低其他浏览器的界面效果。
延迟执行ajax
左边每个分类前面有个选择框，当用户选择(或去掉选择)某个分类的时候，都会引发ajax刷新右边的数据列表。这里就可能出现这种情况，比如用户想选择3个分类查看，需要点击3次选择，之前的做法，每次点击都会触发一次ajax，这样就触发了3个ajax了，其实对于用户来说，只有最后一次ajax是有用的，前面2次不但浪费资源，而且影响性能。当然你可能会想到我们可以abort前面的ajax请求，但要注意abort只是abort客户端的执行，服务器端还是会接收到请求并执行完毕。于是对这个ajax做了个延迟，每次点击后延迟0.5秒执行，如果用户在0.5秒内再一次点击，则取消之前的ajax。这样就可以避免一些不必要的ajax请求了。
后语
今天这篇文章只是介绍优化的方法，并没写任何代码，个人觉的这种方法不需要写代码，大家一看应该就知道。
该页面中经过这些优化后，页面总的加载速度(包括资源下载、解析、执行、页面呈现)提高了3倍左右。
HTML5与CSS3对网页设计制作工作的好处
HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师@Sunshine珍兒同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。 一、我们担心苦恼的那么事儿 1.1 对于页面构建者来说： 表现层会遇到一些难题，欣赏绚丽的UI设计稿的同时，也在苦恼怎样用现用的技术力量去实现圆角，阴影，高光，渐变，透明等各种表现效果。为了精准UI 还原度，我们会不惜花费更多字节数切大图或者添加一些多余的空标签。 结构层同样也会遇到麻烦。首先看页面首行代码doctype，包含了，冗长而复杂，从事多年开发的你能记住这段话吗？ 接着看满屏几乎都是毫无语义的div标签，为了实现复杂的设计效果，我们不得不使用多个层级嵌套，造成代码冗余。 再看看页面中一些交互动画效果，基本都是JS和flash开发人员所实现，页面构建在现有技术上只能有心而无力。
1.2 对于js开发人员来说： 一个简单的交互效果，一个又一个表单验证，需要使用一大段JS代码去实现，为了兼容各个浏览器，不得不多写数行代码。 1.3 对于flash开发人员来说： Flash开发人员担心的是用户没有安装必要的插件，担心插件被禁用或者屏蔽，像现在apple的ipad就已经不支持flash插件了。 以上的担心与苦恼你曾有过吗？如果有，别怕，HTML5和CSS3来了，已经来了！ 二、我们开心盼来的那么事儿
HTML5和CSS3的到来，让我们网页开发者可以做的更多，更好！ CSS3带来了圆角，半透明，阴影，渐变，多背景图等新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。 CSS3带来的媒体查询可以为不同的显示设备定义相匹配的样式，灵活实现了智能的流体布局，CSS3还为我们带来了强大的选择器以及变形动画。下面让我们一起来看看实际工作中的具体应用吧~
14种最新的网页界面设计趋势_Web前端设计与开发.
将会认识到这些趋势背后的创意。尽管这些趋势和在2009年流行的没有巨大的变化，但它预示了那些趋势将会进一步扩大流行并因此变得更佳。如果你正在考虑如何将新的潮流吸收进你的作品的话，请把注意力放在每个潮流趋势的中心思想上吧!多多鼓励自己去涉猎这些新趋势中，这样你会变成这个运动的一份子! 1 巨大的logo/标头(headers 飞出页面(splash pages已经非常过时了。为了给访问者造成难以忘怀的印象，2010的流行趋势将会是巨大的logo或者不相上下大小的标头。这种类型的标头会占据整个屏幕，但是只有一个重要的短信息在上面。访问者不需要点击任何东西，只要把鼠标向下滑动。访问的人现在普遍患有点击恐惧(由于多年来的缺乏指导。所以大幅的标头就像飞出页面一样，但是它不会强迫你的用户点击任何东西。中心思想:巨大的标头将会使你的访问者记住你的网站。 2 素描/手绘设计手绘设计并不是真正全新的一种潮流，但我们知道它仍然站在网页设计的前沿。很多设计师欣赏这种风格，但又怯于创作此类作品仅仅由于“我不会真正地手绘”的态度。如果你去看那些最流行的手绘风格网站(相对于其他趋势风格的网站，手绘设计的网站不多，你会注意到大多数同行不会绘画。这些设计不是要送往艺术博物馆的，它们只是传递一种异想天开的想法，并模糊冷冰冰的网络和人与人的互动——因特网的终极目标，之间的界限。如果你会涂鸦，你就可以创作素描/ 手绘风格的网页设计。素描在2010年会变得更加强大，尽管不是网页设计的主要焦点。它将会以新颖的和令人兴奋的方式被用于个性标准的页面文案(web copy。中心思想：素描在合作设计中会变成一个基本的组成部分。 3 肥厚的字体尽管在传统媒体中出现已经超过200年了，肥厚的字体在网页设计上的应用还算比较新的。要得到肥厚字体的可视化定义，就想想古老的狂野西部的海报“渴望”。那些醒目的字母就是肥厚的字体。肥厚字体普遍是大写字母，醒目并令人印象深刻。许多设计师以前避开肥厚字体不用，是因为以前标志和标头都比较小和比较简朴的缘故。和巨大的标头一起组合之后，肥厚的字体将会吸引浏览者的注意。中心思想：肥厚字体来大胆的表现自己。 4 活版印刷活版印刷是最难掌握的的潮流趋势之一，这就是它在2010年依然保持新鲜的原因。出于大家对可用性的呼吁，网页设计师不敢使用新起的和各式各样的字体。把不同大小尺寸的字体混合在一起这个想法
前端开发岗位是否应该细分为偏静态和偏交互
从公司组建团队的角度来说，要找一班优秀的full stack前端工程师，是有一定难度的。比如我们前端团队，现在一共7个人，如果我们要求每一个人都写HT ML、CSS、JavaScript、前台逻辑、前后端交互，并且都产出可维护的高质量代码，对很多人来说做到没问题，但你知道要招到那么一班人有多难吗？现在市场上本身优秀前端就相当奇缺，对于一个BAT以外的互联网公司来说，也许1个月都招不到1个让你满意的人，然而，如果我们换一种方式，找几个偏静态的，找几个偏交互的，相对来说，难度就小了很多，也许原来4个月都很难招到那么一班人，现在不到2个月就办到了。千万别小看这一点，对于很多互联网公司来说，速度就是生命，不能迅速组建好团队并快速将产品推向市场，也许就意味着完蛋。 从公司用人成本的角度来说，将前端细分为偏静态和偏交互，能节约一笔开支。对每一个人都是高要求的话，自然成本要大一些，然而，如果把人员的要求都相对降下来了，成本自然也就降下来了。 从团队效率上来说，将前端细分为偏静态和偏交互，是高效的。打个比方，团队有50个页面要做，一共有5个人，是每个人做10个静态页面，并实现所有的JavaScript、前台逻辑、前后端交互效率高？还是2个人做所有的静态页面，3个人完成JavaScript、前台逻辑、前后端交互效率高？肯定是 后者，专注于做静态页面的同学可以做到平均一个页面45分钟完成，但如果全部都做，是很难做到的，并且写JavaScript效率也变低了。 从团队技术管理的角度来说，将前端细分为偏静态和偏交互，人员相对易于管理，而且更容易产出可维护的高质量代码。偏静态的几个人可以致力于将静态这一块做到极致，偏交互的几个人可以致力于将交互做到极致。 从个人职业上来说，将前端细分为偏静态和偏交互，降低了前端职位的从业门槛，有了一定技能的时候更容易安定下来。 有人说前端细分这样限制了JavaScript和CSS的配合方式，以我们团队的实践经验告诉 大家，JavaScript和CSS的配合没有问题。 有人说前端细分限制了工程师的职业天花板。这个在某些情况下是成立的，但是个人的职业天花板更多的还是由人本身决定的，一个对职业有追求的人，会想方设法让自己的路越来越广。马云以前是英语老师，现在是中国首富，我初二的语文老师以前是挖煤的工人，主要还是由人本身决定的。当然如果你想在你们团队中静态和交互都做，也很简单，据说腾讯有的团队就可以轮岗，干几个 月Node.js、再干几个月做静态页面，你在你们团队中提出来，我相信你们老大会同意，只要不在项目非常紧急的时候。 我们程序员都希望自己能掌握更多的技术，精通前后端等所有技术，打败Google，征服世界，相信我们程序员的思维是值得所有人尊敬的！
html5网页前端设计课后习题答案
第一章习题答案 1.什么是Internet和万维网，它们的区别在哪里？ 答：Internet是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。万维网是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。万维网主要使用HTTP协议将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。 2.请简单描述用户上网浏览网页的原理。 答：用户打开Web浏览器并输入需要访问的URL地址，该地址将发送给对应的Web服务器。Web服务器然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。 3.Web前端技术的三大核心基础是哪些内容？ 答：HTML、CSS和JavaScript。 4.Web前端新技术HTML5与HTML有什么关系? 答：HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网上应用最广泛的核心语言。HTML5是HTML的第五次修改版，也是目前HTML语言的最新版。 第二章习题答案 1.HTML5的文档注释是怎样的？ 答：HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“...”替换为注释文字内容即可。标签支持单行和多行注释。 2.HTML5中列表标签有哪些，它们之间有什么区别？ 答：包括有序列表标签、无序列表标签和定义列表标签三种。 有序列表标签
和
用于定义带有编号的有序列表；无序列表标签
用于定义不带编号的无序列表；定义列表标签
和
是用于进行词条定义的特殊列表，每条表项需要结合词条标签
和定义标签一起使用。交互设计师必须知道的五大交互设计流程
交互设计师必须知道的五大交互设计流程 它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心和行为特点。同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充，交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。 其实，交互设计需要做的事情也不是一成不变的，它会随每个交互设计师的工作内容差异而不同，具体到每个项目也会有区别。下面我就在马海祥博客上分享下我是怎样做交互设计及做交互设计的五大流程，方式不一定合适所有的交互设计师，但却能说明一些你想要了解的问题。 一、发现用户需要，建立明确需求 发现用户需要的方式有很多种，我们可以在用户反馈里收集到许多用户提出的想法，他们希望我们能提供帮助解决问题的产品；我们也可以主动去观察一些生活中的信息，为灵感的迸发做储备。 比如说网页的隐形加载机制项目，有不少用户跟我们反应说，他们有时因为网站的图片太多或太大，会导致网站页面加载慢，同时在加载的过程中页面显示都空白的，所以希望能提供一个专业的隐形加载机制功能，能够帮助他们有效的展示页面的显示情况。 确认了用户的这一需要，我们的产品同事就会组织立项，把用研和设计组的同事呼唤过来一起进行调研，确定我们的目标用户。 用研组会通过问卷调查等方式尽可能多的去收集信息，交互设计师也会参与分析调研，组织会议帮助用研组完善信息，我们会采取一些有趣的方式，比如一堆人在一起头脑风暴，大家回忆各种相关的生活场景，然后把一些关键词记录下来。 这一步我们的目的是要知道：用户想要什么？ 通过这些步骤我们提炼出一些最重要的功能需求，接着产品组会整理出需求文档，设计师就位。 二、提出设计方案 通过调研，我们得到了大量数据信息，并建立了明确的需求，下一步就是开始提设计方案。 这个阶段我会做一些概念设计，类似于做实物产品时设计一个水杯，我会描述它说：我要设计一个旅行用的水杯，它能叠成一个小圆盘，喝水的时候只需要把小圆盘的圆心部分往下按，就能变成一个杯子。 互联网产品也是这样，需要赋予它一个概念，例如日程管理：这是一个专业的日程管理功能，通过使用它，我们可以有效的管理自己每天的日程和时间，以提高工作效率，并且不会再错过每个重要的约会！ 这些文字并不一定非是交互设计师所总结，但是交互设计师必须要做到对产品心里有数，明确我们要做什么。 同时需要进行的还有初稿设计，在这里我所谓的初稿，并不一定是严格要求中的交互原型，可以是用工具软件把主要的页面流程做出来，也可以手绘草图，只要能清晰表达设计构思的，什么样的方式都可以。 三、制作设计原型 制作设计原型，也就是常说的交互稿，区别于做设计方案时的初稿，这份交互稿我会尽可能细致的把流程和具体操作形式表达出来。 考虑到做交互是一个迭代过程，马海祥会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。如下图所示：
前端网页设计代码大全
Html网页设计代码 设计第一技术其次: ) ---------------------------------- 1)贴图：<img src="图片地址"> 2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a> 1)贴图：
2)加入连接：写上你想写的字 3)在新窗口打开连接：写上要写的字 消除连接的下划线在新窗口打开连接： 写上你想写的字 4)移动字体(走马灯)： 5)字体加粗：写上你想写的字 6)字体斜体：写上你想写的字 7)字体下划线: 写上你想写的字 8)字体删除线: 写上你想写的字 9)字体加大: 写上你想写的字 10)字体控制大小：
写上你想写的字
(其中字体大小可从h1-h5,h1最大，h5最小) 11)更改字体颜色：写上你想写的字(其中value值在000000与ffffff(16位进制)之间 12)消除连接的下划线：写上你想写的字 13)贴音乐：
