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

(1)下载的文件太大

(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性能的设计​,重要的是用户体验。

内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!