前端优化

/前端优化
内容部分 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,少了一个元素,浏览器重新渲染这部分的代码

原文地址:https://www.cnblogs.com/yayaxuping/p/4401771.html