浏览器的最大并发连接数一般在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. 截断文件函数truncate和ftruncate

    两个函数目的都是将文件大小设置为length参数指定的值 int truncate(const char *pathname,off_t length)//pathname就是路径 int ftrun ...

  2. window.onload与$(document).ready()

    window.onload是原生JS事件,$(document).ready()是Jquery实现的与其作用类似的事件. 二者区别如下: 1.执行时间不同 $(document).ready()是DO ...

  3. babel-loader和webpack UglifyJS一起使用时console的问题

    一起使用babel-loader和webpack UglifyJS时,babel会优先处理一遍代码,编译后的代码才进入webpack进行打包和优化操作. 出处:https://www.tangshua ...

  4. react-router、react-router-dom、react-router-native 关系

    react-router 为 React Router 提供核心路由功能,但是你不需要直接安装 react-router: 如果你写浏览器端应用,你应该安装 react-router-dom: 如果你 ...

  5. jquery遍历table的tr获取td的值

    方法一: var siginArray = []; $("#tbody").children("tr").each(function () { var sigi ...

  6. Zookeeper 三台主机 Ha集群的搭建

    前期准备1.修改Linux主机名 2.修改IP 3.修改主机名和IP的映射关系 /etc/hosts ######注意######如果你们公司是租用的服务器或是使用的云主机(如华为用主机.阿里云主机等 ...

  7. Vim插件集合

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

  8. WyBox使用shell脚本检测io口是否正常

    1. 修改mt7620a.dts文件,把gpio管脚复用全都定义为通用gpio /dts-v1/; /include/ "mt7620a.dtsi" / { compatible ...

  9. 基于binlog来分析mysql的行记录修改情况

    https://www.cnblogs.com/xinysu/archive/2017/05/26/6908722.html import pymysqlfrom pymysql.cursors im ...

  10. Java Base64编码

    使用commons-codec, 下载地址 http://commons.apache.org/proper/commons-codec/ 下载commons-codec-1.12-bin.zip,解 ...