UI设计的Ajax技术的重要性（下）

　　另一方面是其有限的兼容性,这两点都给web前端设计带来很大的陷碍,也因因此才有其他前端技术,如微软的的Silverlight、Flex的发展社大,以及互联网行业联手技持的HTML5,以推进Wcb前端设计的标准化。Web前端设计通常会涉及一些具体的技术,包括HTML、css、Javascript、HTML5Silverlight等前端设计语言的使用,人们往往把前端设计作为一门专门的技术工程学。

　　然而,由于web前端设计的产出最接近终端用户,所以在设计时必要坚持以用户为中心的原明,尽可能遵从用户体验设计的原则,在视觉、交互行为和反思层次上,尽可能多地在前端设计所处的情景下予以改善。

　　前端设计优化与用户体验Wcb前端设计优化的目的是在不影响用户交互的情形下,尽可能地优化前端的性能,即尽可能快地减少页面从后台显现在用户眼前的时间延迟,除了某些篱要延迟显示的特殊应用情形以外。前端设计优化的原理在于以下两个方面。尽可能减少页面的下载并缩短页面加载的时间,例如使用缓存技术、页面压缩技木等尽可能减少页面下载后的显示延迟时间,例如利用视觉心理学的格式培原理,先显示模的大体轮,再逐步清晰显示。下面介绍一些常用的web前端性能优化技巧。

　　尽量减少HTTP请求减少HTTP请求是Web前端性能优化中最重要的一条技巧,有以下几种常见的方法能够有效减少HTP请求。

　　合并文件,例如把多个CSS文件合并为一个文件(2)CSSSprites技术,利用CSSbackground相关元素进行背景图像绝对定位3)图像地图(4)内联图像,使用data:URLscheme在实际的页面中嵌入图像数据。

　　使用内容发布网络内容发布网络是指一组分布在多个不同地理位置的Web服务器,用于更加快速有效地向用户发布内容。添加过期时间Expires头(1)Expires的局限Expires使用一个特定的时间,要求服务器和客户端的时间严格同步,过期时间也需要经常检查,所以hipl.1引入了cache-control头来克服以上问题,由于可能有不支持htp1.1的浏览器访问,所以推荐两个都设置。

　　缓存B时间HTML文档不应该使用太长的缓存过期时间,推荐一个星期以内的时间;图片、CSS、脚本推荐缓存30天以上。

　　响应时间对于A来说至关重要,否则用户体验绝对好不到哪里去,提高响应时间的4)使用Ajax缓存有效手段就是存,其他的一些优化规则对这一条也是有效的。

　　压缩页面，开启gp页面压缩,不推荐压缩图片,因为图片基本上都已经压缩过了,尤其是jpg格式的图片。

　　考虑使用一个打包工具发布Javascript和CSS,输出的CSS和Javascript是朋除换行符和注释话句后的,本地代码是未格式化的。5.CSS样式放置在页面顶部,预载入组件使用CSS样式时,页面逐步呈现会被阻止,直到CSS下载完毕,所以推荐把CSS样式放在页面的顶部,这样能够使浏览器的内容逐步显示,而不是白屏然后突出全部显示。6.Javascript脚本推荐放在页面底部,延迟载入组件与CSS样式刚好相反,使用JavascriptI时,对于Javascript以后的文件内容,逐步呈现都会被阻止,Javascript越靠下,意味着越多的内容能够逐步显示。

　　并行下载,切分组件到多个域主要的目的是提高页面组件并行下载能力。对响应时间影响比较大的是页面中请求的数量,浏览器不能一次将所有的请求都下载下来,htpl.规范建议浏览器从每个主机名并行地下载两个请求。但并不是增加主机命名就能够加快速度,主机名会増加DNS查找的负担,般推荐最多两个不同的主机名。

　　减少DNS查找浏览器查找一个给定主机的P地址大概要花费20-200毫秒,因此,在引用其他服务器时,尽可能使用IP地址,而不是DNS。

　　杜绝404错误对网站页面链接的充分测试加上对Web服务器eror日志的不断跟踪能够有效减少404错误,这样也能够有效提升用户体验。

　　小编结语：样式表动态版本号在页面设计中设置缓存后,需要对CSS样式表设计版本号,否则一旦只修改样式表,用户刷剧新页面时不会下载新的样式表,从而无法更新页面样式。