web前端优化方法

新闻来源:发布人:翡翠编辑时间:2018-08-03
目前,互联网BS模式应用发展越来越多,越来越广泛,包括网站系统、OA平台的开发等,那么如何做好、做得出色,给用户带来很好的体验呢?翡翠教育小编下面跟大家分享一下Web前端优化方面的经验,这些经验都是工作实践中比较实用的技术。……

web前端优化方法

目前,互联网BS模式应用发展越来越多,越来越广泛,包括网站系统、OA平台的开发等,那么如何做好、做得出色,给用户带来很好的体验呢?翡翠教育小编下面跟大家分享一下Web前端优化方面的经验,这些经验都是工作实践中比较实用的技术
1、尽量减少HTTP请求个数——须权衡
合并图片(如css sprites,内置图片使用数据)、合并CSSJS,这一点很重要,但是要考虑合并后的文件体积。
2、为文件头指定ExpiresCache-Control,使内容具有缓存性。
区分静态内容和动态内容,避免以后页面访问中不必要的HTTP请求。
3、避免空的srchref
留意具有这两个属性的标签如linkscriptimgiframe等;
4、使用gzip压缩内容
Gzip压缩所有可能的文件类型以来减少文件体积
5、把CSS放到顶部
实现页面有秩序地加载,这对于拥有较多内容的页面和网速较慢的用户来说更为重要,同时,HTML规范清楚指出样式表要放包含在页面的区域内;
6、把JS放到底部
HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个,而问题在于脚本阻止了页面的平行下载,即便是主机名不相同
7、避免使用CSS表达式
页面显示和缩放,滚动、乃至移动鼠标时,CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。
8、将CSSJS放到外部文件中
我们需要权衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处的折中点。
9、精简CSSJS
目的就是减少下载的文件体积,可考虑压缩工具JSMinYUI Compressor
10、剔除重复的JSCSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IEFirefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
11、使AJAX可缓存
利用时间戳,更精巧的实现响应可缓存与服务器数据同步更新。
12、尽早刷新输出缓冲
尤其对于cssjs文件的并行下载更有意义
13、使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。
14、延迟加载
确定页面运行正常后,再加载脚本来实现如拖放和动画,或者是隐藏部分的内容以及折叠内容等。
15、预加载
关注下无条件加载,有条件加载和有预期的加载。
16、尽量减少iframe的个数
考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他DOM元素高出1-2个数量级的开销,它会在典型方式下阻塞onload事件,IEFirefox中主页面样式表会阻塞它的下载。
17、避免404
HTTP请求时间消耗是很大的,有些站点把404错误响应页面改为“你是不是要找*”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。
18、减少Cookie的大小
去除不必要的coockie 使coockie体积尽量小以减少对用户响应的影响,设置合理的过期时间。较早地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。
19、优化图像
尝试把GIF格式转换成PNG格式,看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)
20、不要在HTML中缩放图像——须权衡
不要为了在HTML中设置长宽而使用比实际需要大的图片。

相关文章
热门新闻
热门搜索

JAVA大数据翡翠教育


电话:010-61943044
网址:https://www.feicuiedu.cn
传真:010-61943044
友情链接:
Copyright ? 2005-2020 北京翡翠教育科技集团有限公司,All Rights Reserved 京ICP备12036804号-1