浏览器的最大并发连接数一般在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. Gravitee.io Access Management docker-compose运行

    Gravitee.io 官方提供的docker-compose 快速运行的方式 默认ui 账户 admin adminadmin 环境准备 docker-compose 文件 # # Copyrigh ...

  2. BeEF介绍

    什么是BeFF?         BeEF是眼下欧美最流行的web框架攻击平台,它的全称是 the Browser exploitation framework project.近期两年国外各种黑客的 ...

  3. android设备兼容性

    原文地址:http://developer.android.com/guide/practices/compatibility.html android被设计成能够在多种不同的设备上执行的系统,为了达 ...

  4. 怎样解题 (G. 波利亚 著)

    第一部分 (已看) 目的 1. 帮助学生 2. 问题,建议,思维活动 3. 普遍性 4. 常识 5. 教师和学生,模仿和实践 主要部分,主要问题 6. 四个阶段 7. 理解题目 8. 例子 9. 拟订 ...

  5. Jenkins发布后自动通知【钉钉】

    阅读目录 一.前言 二.使用钉钉推送的优势 三.配置 一.前言 最近使用Jenkins进行自动化部署,但是发布署后,并没有相应的通知,虽然有邮件发送通知,但是发现邮件会受限于大家接受的设置,导致不能及 ...

  6. 设置 IntelliJ IDEA 的彩色代码主题

    首先,给出一系列 IntelliJ IDEA 代码的彩色主题,供大家选择: VibrantUnknown(Darcula) FadeComments NicePython Solarized Have ...

  7. MySQL插入，更新，删除数据

    插入 单行插入 1.insert into 表名 values(col1_value,col2_value,...); 每个列必须提供一个值,如果没有值,要提供NULL值 每个列必须与它在表中定义的次 ...

  8. [转]从OSI网络模型到TCP/IP协议族简介

    OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...

  9. c#多线程与委托（转）

    一:线程在.net中提供了两种启动线程的方式,一种是不带参数的启动方式,另一种是带参数的启动的方式.不带参数的启动方式 如果启动参数时无需其它额外的信息,可以使用ThreadStart来实例化Thre ...

  10. Linux rcp命令详解

    Linux rcp命令 Linux rcp命令用于复制远程文件或目录. rcp指令用在远端复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件 ...