走牛B的路,让傻B去说吧 ,我的装B人生

前端优化一些技巧

前端优化
 
1.尽量减少HTTP请求
http请求:打开网页,看到的每一个内容的获取都是一次请求(JS1 JS2 CSS1 CSS2。。图片 文字)
方法:合并:将图片进行合并 JS合并 CSS合并
2 使用CDN内容分发网络
介绍:在离你最近的地方放置一台副本服务器,使你能够以最近的距离,最快的速度获取内容。
方法:添加副本服务器,都是钱啊
3 添加Expire/Cache-Control头
expire 的 http头:
保存一个时间值
catch-control:
如果:该头部指示缓存,缓存的内容也会存在本地;
操作流程和expire相似,也有不同地方
4 使用Gzip压缩
·是什么:把文件先压缩,再传输
·流程:原始79–本地压缩–服务器压缩–服务器端对已经压缩的再压缩-
·优点:提升文件传输速度;(在服务器端配置)
5、将css放在文件最上面<HEAD></HEAD>中;
·为什么:
提高渲染性能,避免页面空白或者重绘
6:将Script放在页面的最下面,因为浏览器加载和解释网页的顺序是从左到右从上到下的,
如果JAVASCRIPT代码有死循环的问题,网页可能是空白一片的,
如果放在页面的最下面即使如此,页面也能展现出来,当然这个问题最好避免!
7.避免使用css expression
(所谓css expression就是css的属性值是由js计算出来的,用了该属性,鼠标移动,滚动都会对其值进行重新计算),
这样会严重影响浏览器效率
8.将JavaScript和CSS都放在外部的文件中,
单独提取的好处
(1:增加了JS和CSS的复用性;2:减小了页面的体积;3:提高了JS和CSS的可维护性)
单独提取的缺点
(1:增加了页面的请求数;3:减慢了页面的渲染速度)
css和javascript写在页面内的情况:(1)应用于一个页面时,;(2)不经常被访问;(3)脚本和样式很少。
9.
减少DNS查询:
·底层行为
·定义:访问网址,打开之前,转换机制(ip地址),对应网址;
·时间:20ms最少;
·如果同时很多查找过程,会影响速度;因此需要浏览器的缓存;
·IE30m,ff60s,chrome60s,
·缓存长:减少dns重复查找,节省时间;
·缓存短:及时检测服务器的变化,保证正确性;
10
减小  css  js 的 最小体积。。  进行压缩
去除空白符,注释
 
 
11.  
避免重定向 

301:被移动到另外位置(永久重定向)使搜索引擎智能
302:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址
重定向:重新请求下载资源,增加了http请求

 
 
12:移除重复的脚本,顾名思义,可以减少文件的大小,另外,就是可以避免出现未知的问题!
 
 
 
13.配置实体标签ETag
浏览器端与服务器端比较,若相同,说明未更改,就会使浏览器不用请求,用自己的缓存
减少服务器响应
 
 
14.  使用 ajax
 
post  每次都不重复
get   可以 被重复
20140725000521_T5fFt

 

赞(0)
未经允许不得转载:装B网 » 前端优化一些技巧
分享到: 更多 (0)