大中型企业网站前端技术优化的八个要点

  现在很多人都想让自己的企业网站打开速度快,这样利于排名也利于用户体验。其实对于企业建站优化影响最大的是前端技术了。从实践经验可以知道在浏览器访问一个网站时,有10%-20%的时间是花在下载HTML上面,有80%-90%时间是花在下载页面中所有组件上面。如果我们可以把前端时间缩短一半,整体响应时间只能减少5%-10%。在前端发展了那么长时间,其优化经验也有很多值得借鉴,下面作简单介绍。
 
  一、少用框架:
 
  企业建设网站时是应该尽量减少公共文件的重复加载,避免浏览器的消耗
 
 
  二、图片优化
 
  网站尝试使用PNG,png拥有gif所有功能,还支持alpha透明,文件比较小,所以尽可能使用png格式图片。
 
  删除图片的元数据,例如photoshop的元数据,这样在一定程度上能减少图片大小而不影响图片质量。
 
 
  三、图片集合
 
  可以把企业网站常用的小图片集合在一张图片中,通过Css定位到小图上面,从而减少http请求。
 
 
  四、拆分初始化负载
 
  Ajax和动态HTML的日益普及网页上面的js和css也变得非常庞大但是很大一部分代码不会在启动时候使用,而是采取插件式架构,允许动态加载模块。
 
  所以在一个大型结构复杂的企业网页上面,为了不影响用户体验,可以把js分为两部分,一部分是渲染页面必须的,剩下是一部分。这样也在一定程度上面提高用户体验,给用户第一时间看到完整的页面。再寻找哪些js可以被拆分,可以通过一些辅助工具来判断,firebug就是一个非常好的工具,可以通过查看哪些函数onload之前未被使用。通过判断可以把其中一部分拆分出来,但是有些不开始拆分,例如页面的错误处理和业务判断等js是不能拆分的,如果要拆分合理必将是一项严谨的工作。
 
 
  五、无阻塞加载js脚本
 
  Js有两种方式被包含在页面中,一种是行内脚本,一种是外部脚本。对外面脚本浏览器在下载js或者执行脚本的同时不会下载其他内容,有时候这种情况是必要,但是却会影响页面其他展示,理想情况是不堵塞其他内容下载的方式来加载js。
 
  由于使用外部脚本,有人可能会想到把全部使用内部脚本,这种做法不可取,这样会增加页面大小,而且浏览器不会缓存js,少数内部脚本是可取的。但是大多情况下使用外部脚本,这样无论在团队开发,还是版本控制还会带来很大好处。
 
  换句话说js在执行如果超过0.1秒,会让人感觉到不平滑。如果超过1秒会让人感觉应用程序缓慢;超过10秒那么用户会非常沮丧。这些就是用于足够快的标准。
 
 
  六、使用现成组件
 
  现成开源的js组件很多,可以根据熟悉程度和业务应用性使用,jQuery,yui,ext,dojo。没必要自己花很大力量去开发去编写代码,如果自行开发,除非有强大团队,要不维护成本太高,而且功能不完善。
 
 
  七、预加载组件
 
  无条件的预加载(Google首页的例子)
 
  有条件的预加载(淘宝首页搜索提示功能的例子)

 
 
  八、减少DOM元素个数
 
  元素越多,下载的数据越多,JS操作DOM速度越慢。


一般中大型的企业建站的速度对客户的体验还是很重要的。所以企业在网站建设过程中一定要注意前端页面的优化,让网站在客户第一次打开时就能感觉很顺畅和快速。