浏览器的最大并发连接数一般在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. 访问 iframe 内部控件方法

    方法虽然简单,但是经常忘记,网上一查,很多方法兼容性都有问题,这段代码至少兼容IE和Chrome setInterval(function(){ document.getElementById('ma ...

  2. linux kernel笔记

    文章目录 关于linux内核中的__attribute__关键字 Linux kernel启动参数 gdt / ldt PCB 关于linux内核中的__attribute__关键字 part I: ...

  3. IntelliJ IDEA 快捷键说明大全（中英对照、带图示详解）

    因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只 ...

  4. 深入详解美团点评CAT跨语言服务监控（二） CAT服务端初始化

    Cat模块 Cat-client : cat客户端,编译后生成 cat-client-2.0.0.jar ,用户可以通过它来向cat-home上报统一格式的日志信息,可以集成到 mybatis.spr ...

  5. First 1

    一,Python介绍 1,python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打 ...

  6. 学习concurrency programming进展

    看了一段时间的actor model,goroutine之类的东东,最近在github上写了个简单的框架, 注:未做大量测试,仅供学习用,勿用于生产用途 链接: https://github.com/ ...

  7. nginx 学习资料

    nginx 学习资料 table th:first-of-type { width: 90px; } table th:nth-of-type(2) { } table th:nth-of-type( ...

  8. 关于TF-IDF的解释

    TF:term frequency ,词频 .指的是 term 出现的评率.词频和 2 个因数有关,在一个文档中出现这个词条次数越多,词频越高,文档总词条总数越多这个值被稀释. 所以  一般 TF = ...

  9. java-普通类文件@Autowired自动注入为null

    @Autowired注解在非Controller中注入为null 1.配置文件(类文件所在的包) <context:component-scan base-package="net.n ...

  10. Zookeeper权限acl，acl的构成 scheme与id

    一.ACl(accerss control  lists)权限控制 1 针对节点可以设置相关读写权限,目的为了保障数据安全性 2.权限permissions可以指定不同的权限范围以及角色 二.ACL命 ...