UI 性能因素考虑

浏览器的最大并发链接数通常在4到6之间,首先了解影响加载的性能因素:css

(1)下载的文件太大html

(2)发出的请求太多前端

(3)请求相应不及时后端

针对这些因素,通常会考虑减小请求次数:浏览器

(1)对静态文件设置缓存事件缓存

(2)页面设计尽可能简洁服务器

(3)合并文件(html,JS, css,图片..)​网络

再细致一点:多线程

(1)页面实现按需加载(分时加载)并发

  • 先加载基本静态html框架
  • 再加载css, render css
  • 最后加载Js从服务端​取得的数据,而后render到内容区

(2)页面提交,考虑异步执行

  • 服务器端考虑页面‘轮询’操做,避免页面长时等待
  • 服务器端缓存数据,避免把全部数据放到页面处理
  • 简化对象大小,不要将后端完整对象返回到前端,按需返回
  • 缓存静态信息,如用户登陆信息,页面帮助信息...

(3)​页面加载考虑多种优化方案

  •  避免一次加载全部内容,用‘多线程’和‘异步’方式
  • 没有在‘当前屏幕显示’,先不初始化,拖拽到当前屏幕在加载

通常将css在<head>标签加载,Js 在的<body>底部加载

优化方向:

请求数量         合并脚本和样式表 css sprites, 拆分初始化负载,划分主域

请求带宽        开启GZIP,精简JS code,移除重复脚本,图像优化

缓存利用        使用CDN,使用外部JS,CSS 添加Expire 头,减小DNS查找,配置ETag, 使​​AJAX可缓存

页面结构        样式顶部,js底部,避免页面加载阻塞,尽早刷新文档流输出

代码校验         避免CSS表达式,避免重定向​

YUI Compress 压缩工具 -》 精简JS

服务器端安装GZIP自动压缩功能模块​

CDN-》内容分发网络,可以实时地根据网络流量和各节点的链接,负载情况以及到用户的距离和相应时间等信息将用户请求导向​到离用户最近的服务节点。

‘查找----替换’的思路,来实现主域的划分​

 总之,作前端开发必定要考虑浏览器兼容性和UI性能的设计​,重要的是用户体验。

相关文章
相关标签/搜索