浏览器的最大并发连接数一般在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性能的设计​，重要的是用户体验。

UI 性能因素考虑的更多相关文章

  1. Android UI性能优化详解

    设计师,开发人员,需求研究和测试都会影响到一个app最后的UI展示,所有人都很乐于去建议app应该怎么去展示UI.UI也是app和用户打交道的部分,直接对用户形成品牌意识,需要仔细的设计.无论你的ap ...

  2. 使用Systrace分析UI性能

    开发应用的时候,应该检查它是否有流畅的用户体验,即60fps的帧率.如果由于某种原因丢帧,我们首先要做的就是知道系统在做什么(造成丢帧的原因). Systrace允许你监视和跟踪Android系统的行 ...

  3. Unity UI性能优化技巧

    本文将介绍一些提升Unity UI性能的技巧.更多优化技巧,可以观看Unity工程师Ian Dundore在Unite Europe 2017的演讲<使用Unity性能提升技巧>. 1.划 ...

  4. Android-优化UI性能(1)-降低主线程的堵塞时间

    Android-优化UI性能(1)-降低主线程的堵塞时间 一 降低主线程的堵塞时间 Android已经提供了AsyncTask实现从主线程生成新的异步任务的方法. 定义并实现以下的类就可以(方法由系统 ...

  5. Android提高UI性能技巧

    提高UI性能的方法事实上有非常多在实际的开发中都已经用到了,在此做一下总结. 1.降低主线程的堵塞时间 若一个操作的耗时较长(超过5秒),我们应该将其放入后台线程中运行.仅仅在须要改动UI界面时通知主 ...

  6. Android UI性能优化实战, 识别View中的性能问题

    出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android ...

  7. Android UI性能优化实战 识别绘制中的性能问题

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45556391: 本文出自:[张鸿洋的博客] 1.概述 2015年初google ...

  8. 控件UI性能调优 -- SizeChanged不是万能的

    简介 我们在之前的“UWP控件开发——用NuGet包装自己的控件“一文中曾提到XAML的布局系统 和平时使用上的一些问题(重写Measure/Arrange还是使用SizeChanged?),这篇博文 ...

  9. 测试c语言函数调用性能因素之测试三

    函数调用:即调用函数调用被调用函数,调用函数压栈,被调用函数执行,调用函数出栈,调用函数继续执行的一个看似简单的过程,系统底层却做了大量操作. 操作: 1,               调用函数帧指针 ...

随机推荐

  1. MACOS-Can't-connect-to-local-MySQL-server-through-socket-'/tmp/mysql.sock'

    mac os start mysql fail by "brew services start mysql"you can try : mysql.server  start

  2. linux实用操作

    静态ip vi /etc/sysconfig/network-scripts/你的网卡名字(使用ifconfig查看,第一个就是)dhcp修改为static,onboot改为yes IPADDR=19 ...

  3. Spring事务管理机制的实现原理-动态代理

    之前在做项目中遇到spring无法进行事务代理问题,最后发现是因为没有写接口,原因当时明白了,看到这篇文章写的清楚些,转过来 我们先来分析一下Spring事务管理机制的实现原理.由于Spring内置A ...

  4. 配置中心Client端

    配置中心Client端 1.在Order工程中的Order-Server模块的pom.xml中增加 <dependency> <groupId>org.springframew ...

  5. sbt第一次运行下载jar包很慢解决办法

    一.补充sbt配置文件,添加下载路径 文件结构如下:修改了sbtconfig.txt,repo.properties. sbtconfig.txt配置内容为: # Set the java args  ...

  6. RedHat6.5安装Spark集群

    版本号: RedHat6.5   RHEL 6.5系统安装配置图解教程(rhel-server-6.5) JDK1.8      http://blog.csdn.net/chongxin1/arti ...

  7. 深入理解java虚拟机读后总结（个人总结记录）

    1.jvm布局:   jdk1.6版本JVM布局分为:heap(堆),method(方法区),stack(虚拟机栈),native stack(本地方法栈),程序计数器共五大区域. 其中方法区包含运行 ...

  8. Vim插件集合

    插件Nerdtree实现浏览文件系统并打开文件或目录,在window中是非常不错的插件,但是在Ubuntu中这个插件就是一坑,特别提示,且无解.若在Ubuntu中使用目录浏览插件,建议使用其他插件,如 ...

  9. 阅读<All Digital VCXO Replacement for Gigabit Transceiver Applications>笔记---XAPP589

    阅读<All Digital VCXO Replacement for Gigabit Transceiver Applications>笔记---XAPP589 1. 2. 外部设备能为 ...

  10. Java中sleep方法和wait的详细区别

    1.两者的区别 对于sleep()方法,我们首先要知道该方法是属于Thread类中的.而wait()方法,则是属于Object类中的. 这两个方法来自不同的类分别是Thread和Object 最主要是 ...