前端优化

/前端优化
内容部分 css javascript cookie 图片 服务器 移动应用
内容部分
尽量减少http请求
1，合并文件是通过把所有的脚本放到一个文件中来减少http请求，如把所有的css都合并到一个样式表
2,css sprites技术合并图片
3，图片地图：紧挨在一起才可以使用，不具有可读性
<img usemap='#mymap' src="" alt="" />
<map name="mymap">
<area shape="" coords="映射的方向" href="" alt="" />

</map>
4，内联图像:将图像加载到样式表中，增大了页面的大小，主流浏览器还没有支持
5减少dns查找查找次数：解析服务器会返回这个域名对应的ip地址，需要花的时间
当客户端的dns缓存为空时，减少主机名的数量，减少了并行下载，增加了响应时间
6避免跳转：跳转是使用301和302代码实现的：跳转会降低用户体验，开发者忽略的细节，url没有加、会返回一个包含301的挑战
7，可缓存的ajax
8推迟加载内容 onload分成二部分：一部分是马上可以加载的，另一部分是稍后加载的
9,预加载：使用onload提前加载 css sprite
10,减少dom的操作，使标签更加语义化
11，减少iframe的数量：即使为空，加载也需要时间，会阻止页面的加载
12，避免使用404，找到
避免跳转有用的部分当作javascript代码来执行
缓存ajax
推迟加载
提前加载
减少dom元素数量
用域名划分页面内容
使frame数量最少
避免404错误
二 css的部分
1、把样式置于顶部：在head加载你的样式表，会终止内容的有序呈现
2、避免使用css表达式（express）:会在页面计算成千上万次，会对页面性能产生影响。
3,使用link不应该使用@import
4,每个元素他都会运行一次，增加内存开支，png8可以可以完全避免使用滤镜
javascript部分
1，把脚本置于页面底部

2，使用外部javascript和css：请求浏览器可以有缓存，写在内置的文档增加了文档，减少了http
3,削减javascript和css
去除不必要的空格和注释（YUI Compressor）
4,削减重复脚本
在ie中可以，在ff中不会有额外的http请求
5，减少dom访问：避免使用JavaScript来修改页面布局
6,开发智能事件处理程序
image部分
1，优化图像：压缩图片，保存jpg图像，色彩的少，滤镜问题使用png8
2,优化css sprite
在sprite中水平排列你的图片，颜色较近的组合在一起，降低颜色数，降低256色以便使用png8格式，图像之间留有很大的间隙。
3,不要再html中缩放图像
html页面加载和解析流程
1，用户输入网址，浏览器向服务器发出请求，返回html文件
2，浏览器开始载入html代码，发现head标签内有一个link标签引入外部css文件
3，浏览器又发出css文件的请求，服务器返回这个css文件
4,浏览器继续载入html中body的代码，并且css已经拿到手，可以开始渲染页面了一个img标签引用了一张图片，向服务器发送请求，此时浏览器不会等到页面下载完，而是继续渲染后面的代码
5，服务器返回图片文件，由于图拍呢占用了我一定的面积，影响了后面段落的排布，因此浏览器需要重新渲染这部分的代码
6，浏览器发现了一个包含一行javascript代码的scriptt标签，赶快运行它
7,javascript脚本执行了这条语句，命令浏览器必须要隐藏掉代码中的某个style,少了一个元素，浏览器重新渲染这部分的代码