`
gistool
  • 浏览: 4645 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

web前端优化很重要

阅读更多
现在的网站都在对用户体验上面下足了功夫,包括UI,样式 但是在这里想着重说明一点 就是js的异步加载会给你带来不可思议的功效。
我记得在最开始的时候。我们根本不懂什么叫做页面优化,以为只是把页面稍微整合的漂亮点就ok 。
到后来慢慢的知道把js放到页面的最下边。感觉这样似乎比以前把js放在网页顶部要好了很好。可是,还有没有比这样更优秀的加载技术呢。
答案就是in.js 异步加载技术,我的网站开始的时候就是把所有的js文件全部放到网页底部,因为js的数据大。所有感觉服务器还是hold不住,特别是当网站的访问量在周末上升到1W的时候,感觉tomcat很吃力,后来分析了页面的加载每个时间段的消耗值。发现js的加载会占用很大的时间。会很大的影响用户的体验。那么怎么样采用in。js来实现异步加载呢?我用我的网站 bushere.com 来作为例子来解释。
    1  首先 在最开始的只是加载一些必要的js文件。例如我在我的网站中底部就只是加载了in.js这个异步加载框架。这个框架只有6K,所以速度很快。
    2  为了方便用户更好的找到所需要的数据。我在页面中采用了搜索指导技术,就是你数据公交线路102的时候。我自动把深圳市公交线路中符合10*开头的公交线路都给你找出来。这样用户肯定觉得很舒服,但是带来一个新的问题 ,就是这些数据文件很大怎么办?要是一开始的就是加载,那就有一下两个问题:1 一开始就加载这些js会导致页面速度慢,用户体验差。2. 如果用户不搜索公交线路。而是搜索其他的公交信息,例如站点名称等等。那一开始加载的这些数据信息 不就是占用了时间,影响了速度,但是用户却不需要的。 所以我采用了 当用户点击这个搜索框的时候,我再开始加载这些公交数据信息,这样既不影响速度,而且也不浪费无用的时间。
    3.还有其他的方面的优化,今天就只讲到这里。经过这个步骤的优化,bushere.com 的速度比以前有了相当大的提高,而且在并发方面经过压力测试,有了显著的提高。当然还有很到其他的方面的优化,我会陆续写出来。欢迎大家指点。
4
7
分享到:
评论
2 楼 theskyofsky 2012-07-19  
都过用户群是固定的,这种JS加载优化的意义就不大了
1 楼 webbox 2012-07-19  
学习了。。 不过优化是一件持续的过程

相关推荐

    web前端性能优化

    前端优化的重要性、前端优化的主要方法、推荐前端优化工具

    在线学习平台的前端设计优化与实现

    Web前端、模块化、组件开发、性能优化 随着互联网技术的发展,人们越来越习惯通过网络获取信息,在线学习平台 也因此应运而生。同时,人们对于网站的易用性和交互体验的要求也越来越高, 设计良好、性能优良的网站...

    web前端优化技巧1

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)作为第一条,可能也是最重要的一条 3. 避免重定向 (Avoid Redir

    前端性能优化——移动端浏览器优化策略

    摘要:前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...

    前端开发是软件开发中的重要一环.docx

    此外,前端开发还涉及到网站的动态效果制作、前端优化、Web标准实现以及Web可访问性等多个方面。 随着Web应用程序和移动应用程序的快速发展,前端开发在IT行业中的地位日益重要。越来越多的企业和组织开始将业务...

    压测性能测试培训(2022-02-16 性能测试培训) 压缩文件包含 【JMeter基础培训、WEB网站优化、性能测试知识分享】

    web页面加载时间重要性 前端页面测试常见优化点 性能测试的基本概念 性能测试指标 服务器指标 网络指标 关键性能指标 性能测试的环境条件 性能测试分析、调优整体框架 性能测试优化实施策略 性能分析原则 性能调优的...

    跟老男孩学Linux运维:Web集群实战(高清完整PDF版)

    本书针对中小规模网站集群的搭建、部署、优化进行了详细讲解,全书可分为三大部分,其中第一部分讲的是Linux相关的基础且重要的知识,第二部分针对当下流行的Web环境架构(LNMP)的搭建及企业级Web优化等进行了讲解...

    12.运维:Web集群

    全书可分为三大部分,其中第一部分讲的是Linux相关基础且重要的知识,第二部分针对当下流行的Web环境架构(LNMP)的搭建及企业级Web优化等进行了讲解,第三部分讲的是Web集群后端数据存储和Web集群前端负载均衡。...

    浅谈雅虎前端优化的35条军规

    无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢,这篇文章主要介绍了浅谈雅虎前端优化的35条军规,感兴趣的小伙伴们可以参考一下

    跟老男孩学Linux web集群实战(高清版)注重实战真实案例.pdf

    本书针对中小规模网站集群的搭建、部署、优化进行了详细讲解,全书可分为三大部分,其中第一部分讲的是Linux相关的基础且重要的知识,第二部分针对当下流行的Web环境架构(LNMP)的搭建及企业级Web优化等进行了讲解...

    web服务器nginx+部署前端vue项目

    1. 什么是 nginx 和可以做什么事情 ...Nginx 专为性能优化而开发, 性能是其最重要的考量,实现上非常注重效率 ,能经受高负载的考验,有报告表明能支持高 达 50,000 个并发连接数。 https://lnmp.org/nginx.html

    High.Performance.Responsive.Design-响应式Web设计性能优化 中文高清完整版pdf 带详细书签

    文件已上传到百度网盘,附件中是下载地址。... High.Performance.Responsive.Design-响应式Web设计性能优化 [美]tom barker(著) | 余绍亮 丁一 叶磊(译) | 人民邮电出版社 | 9787115399748 | 2015-09-01

    探索前端技术:构建现代化网络体验的关键.docx

    性能优化和加载速度:用户对于网站和应用的加载速度要求越来越高,因此性能优化成为了前端开发的重要方向。通过减少资源大小、使用CDN加速、懒加载等技术,可以提升网站和应用的加载速度,从而提升用户体验。 关键...

    浅谈CSS在前端优化中一些值得注意的关键点

    在Web前端开发中,性能是一个非常重要的需要考虑的点。本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础。 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的...

    跟老男孩学linux运维 web集群实战

    Web集群实战》针对中小规模网站集群的搭建、部署、优化进行了详细讲解,全书可分为三大部分,其中第一部分讲的是Linux相关基础且重要的知识,第二部分针对当下流行的Web环境架构(LNMP)的搭建及企业级Web优化等进行了...

    前端黑科技:美团网页首帧优化实践

    移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了SSR、CSR、预渲染等技术。在美团支付的前端技术体系里,通过预渲染提升网页首帧优化,从而优化了白屏问题,提升用户体验,并形成了最佳实践。在前端...

    前端开发笔记.docx

    前端开发是指构建和开发Web应用程序的过程,主要涉及创建用户界面、实现交互功能以及优化用户体验。前端开发人员使用各种技术和工具来设计和构建Web页面,使其在不同的设备和浏览器上都能良好运行。 在前端开发的...

    跟老男孩学Linux运维 Web集群实战.part2

    全书可分为三大部分,其中第一部分讲的是Linux相关的基础且重要的知识,第二部分针对当下流行的Web环境架构(LNMP)的搭建及企业级Web优化等进行了讲解,第三部分讲的是Web集群后端的数据存储和Web集群前端的负载...

Global site tag (gtag.js) - Google Analytics