一些前端开发优化的经验总结

发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都省了，还想优化前端啊，不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去，就不需要刻意的后期优化了。在项目开发中，后台需要搭建好框架，前端更是需要搭建好框架，并且在页面实现中得到实现，只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。

前言

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少HTTP请求，那请求多了到底会怎么样呢？首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的(具体参见此处)，因此请求数多了以

…… …… 余下全文

1.Js的基本类型：

Undefined:只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。

Null:只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。Null类型的语义是“一个空的对象引用”。

Number:NaN是其一个特殊的属性值，typeof  NaN // “number”);

String:其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。

Boolean:有两种取值true和false。0、NaN、空字符串、null、undefined转化为false，其余的全部为true。

Object:最为复杂的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性[[call]]的Object，JavaScript的宿主也可以提供一些特别的对象。typeof ['3','344']//‘Object’

关于null和undefined：null是关键字；undefined不是关键字，undefined是Global对象的一个属性 。

运算时null与undefined都可以被类型转换为false，但不等值于false：
       document.writeln(!null, !undefined); // true,true
       document.writeln(null==false); // false
       document.writeln(undefined==false); // false

…… …… 余下全文

HTML知识总结 span行级元素，多个同行块级元素，独占一行

块级元素，前后

保留一行

标题标签，h1~h6表6个等

级，加粗，前后保留一行

width：设置宽

度

height：设置高

度

alt：图片加载失

败显示的文本div文本类ph图片标签img

color：颜色

水平线

常用标签hrsize：高度（粗细）

width：宽度

（长度）

herf：超链接转

到的地址

超链接a

target_self:默认值，在当前页面打开

_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc：实心圆

无序列表

列表标签

有序列表ulsquare：小方块olcircle：空心圆

tr表示行th表示标题单元格，居中、加粗td

表格标签<table>caption表示一个单元格表示标题，定义在

第一行，居中

rowspan设置单元格占的行

数

colspan设置单元格占的列

数

action表单提交地址

get：显示提交参数，将参数用?和&拼接到url上

带到服务器端

method

post：隐式提交参

数

optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单<select>

<option>selected默认选中

multiple 设置下拉菜单为多选模式

表单项<form>

rows: 显示文本的行数(高度)

文本域<textarea>

cols: 显示文本的列

数(宽度)

name：参数名size：显示字符长度（控制文本框长

度）

maxlength：最大可

输入字符数

input文本框type=“text”placeholder：提示

内容

disabled：不会被提交到服务器readonly：只读（会被提交到服务

…… …… 余下全文

网页的HTML基本代码

贴图：<img src="图片地址">; 加入连接：<a href="所要连接的相关地址">写上你想写的字</a>;

在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>;

移动字体(走马灯)：<marquee>写上你想写的字</marquee>; 字体加粗：<b>写上你想写的字</b>

字体斜体：<i>写上你想写的字</i>; 字体下划线: <u>写上你想写的字</u>;

字体删除线: <s>写上你想写的字</s>;字体加大: <big>写上你想写的字</big>;

字体控制大小：<h1>写上你想写的字</h1>(其中字体大小可从h1-h5,h1最大，h5最小); 更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间;消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>;

贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>;

贴flash: <embed src="flash地址" width="宽度" height="高度">;

…… …… 余下全文

ASP.NET前端开发经验总结

通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。 WEB标准是什么？

说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。

刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本

看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

…… …… 余下全文

1.选择器：

1.1基本选择器：

* 匹配所有的元素

#i1 匹配id为i1的元素；

.class1 匹配class为c1的元素；

s1 匹配元素名为s1的元素

s1，s2 匹配元素名为s1和元素名为s2的元素，一并返回（满足任意一个元素名即可）

1.2层次选择器：

s1 s2 匹配祖先元素名为s1所有后代元素名为s2的元素；（祖先--后代）

s1>s2 匹配父元素名为s1子元素名为s2的元素；（父子关系）

区别在于<div><span><span>则

第一种3个标签的内容均显示，

第二种只显示前2个标签，最后一个标签的内容不显示。

S1.next（） 、匹配与s1并列位置的下一个元素 = s1+（s1的标签名）

S1.nextAll（）匹配与s1并列位置以下的所有元素 = s1 ~ （s1的标签名）

S1.sibling（“s2”）匹配与s1所有并列位置的所有s2元素

...

2.操作DOM

2.1 attr(key)获取元素属性为key的属性值

设置元素属性key的属性值为value

删除元素属性

…… …… 余下全文

1. 什么是Semantic HTML（语义HTML）?

Semantic HTML是一种编码风格, 它通过添加能够被计算器所理解的语义(Meta data)，从而使HTML成为一个通用的信息交换媒介。在语义HTML中，<b></b>,<i></i>这类其中的内容不具有实际意义的标签是不应该被使用的，因为他们只是为了进行格式化，没有提供要表达的意义及页面结构。

2. DOCTYPE 有什么作用？

DOCTYPE主要作用是告诉浏览器这个网页是哪种HTML， 浏览器根据这个标示进行页面渲染。如果DOCTYPE声明不当或没有声明，浏览器将会用quirks mode（怪异模式）对页面进行渲染。

3. 什么是quirks mode（怪异模式）？

怪异模式（英语：quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。

4. 标准模式和怪异模式之间的区别是什么？

两者之间突出的不同是对 CSS IE盒模型缺陷的处理。在IE6之前，Internet Explorer 曾经使用一种决定一个元素的盒模型的宽度和高度的，与 CSS 规范所指定相冲突的算法，而且由于 Internet Explorer 的流行，很多依赖于这种不正确的算法的网页被创建。而在IE 6, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法，而在 quirks 模式下使用先前的，不规范的算法。
另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下，基于 Gecko 的浏览器将会对齐至基线，而在 quirks 模式下它们会对齐至底部。

…… …… 余下全文