zoukankan      html  css  js  c++  java
  • UI 性能因素考虑

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

  • 相关阅读:
    java反射机制2
    Java反射机制
    EKT Java企业级关键技术强化 Enterprise Edition
    idea导入tomcat后解决控制台中文乱码问题(day12)
    大对象数据LOB的应用 (day10)
    Java关键技术强化:JDK5.0新特性 (day08)
    Java关键技术强化:JDK5.0新特性1 (day07)
    Java高效特性:反射(二)之获取Class对象的四种方式及其区别 (day06)
    Java关键技术强化:类加载器 (day05)
    Java高级特效:反射 (day04)
  • 原文地址:https://www.cnblogs.com/torri/p/6538818.html
Copyright © 2011-2022 走看看