`
gistool
  • 浏览: 4889 次
  • 性别: 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前端性能优化解决方案。该方案涵盖了服务器端优化、HTML优化、...

    web前端-Web前端性能优化的研究与应用.pdf

    进行 Web 前端优化是非常必要的,因为用户不能忍受浏览网页的时候,长时间的等待。 知识点四: 影响 Web 前端性能的因素 影响 Web 前端性能的因素包括 HTTP 协议、浏览器工作方式、缓存机制、页面大小、页面结构...

    Web 前端性能优化思路与学习方法

    Web前端性能优化是提升网页用户体验和确保网站成功的关键因素之一。性能优化涉及多个方面,包括但不限于代码优化、资源加载策略、服务器配置等。本篇内容将深入探讨Web前端性能优化的思路与学习方法,结合WebQQ、QQ...

    网站Web前端优化(Html)

    网站Web前端优化主要关注提升网页加载速度、用户体验和性能效率,这一领域对于现代互联网产品至关重要。以下是关于Web前端优化的详细说明: 一、关于Web Web作为一种新媒体,它源自印刷业,但随着互联网的发展,Web...

    Web前端性能优化全攻略

    Web前端性能优化是提高网页加载速度和用户体验的关键因素。Yahoo! 的 Exceptional Performance team 提出了一系列不断更新的优化策略,从最初的13条发展到现在的34条,涵盖了多个角度,包括内容、服务器、Cookie、...

    前端 - 郭碧青《Web 前端性能优化思路与学习方法》.pdf

    此外,郭碧青也谈到了前端优化在移动端的应用,特别是在手机QQ兴趣部落项目中的实践。因为移动端设备的资源和网络条件通常受限,所以对于性能优化的要求更高。他分享了使用了如React Native和Vue等现代前端框架的...

    WEB前端工程师Web前端性能优化经验分享

    最后,使用JSON进行数据交换是前端优化的另一个重要方面。JSON是一种轻量级、语言无关的数据交换格式,与XML相比,其数据量更小,解析更快。由于JSON天然就与JavaScript兼容,使得数据操作更加直观和高效。JSON数据...

    WEB前端性能优化测试

    了解和应用这些优化策略,并结合YSLOW等工具进行测试和评估,可以帮助开发者大幅提升WEB前端的性能,为用户提供更流畅、更快捷的浏览体验。在实际项目中,不断监测和调整优化措施,将使网站始终保持高效运行。

    web前端笔试题面试题汇总+前端优化总结

    "前端笔试题面试题汇总+前端优化总结" ...前端优化是非常重要的,能够提高页面的加载速度和用户体验,减少服务器的资源占用。合理的优化策略可以带来很大的好处,提高投入产出比,提高网站的整体性能。

    前端性能优化探索.pdf

    随着互联网技术的快速发展,Web前端技术也逐渐成为了互联网开发的重要一环。然而,在如今这个追求极致体验的时代,我们不仅要实现业务需求,更需要考虑如何优化用户体验,提升页面性能。本文将从JavaScript、React、...

    web 前端年总结ppt模板

    1. web 前端技术研发部工作总结的重要性 通过文件的标题和描述,我们可以了解到 web 前端技术研发部的工作总结对于公司的重要性。这项工作总结不仅能够总结过去一年的工作成果,还能够为下一年的工作提供指引和建议...

    web前端课程设计.zip

    在本课程设计中,我们将深入探讨“Web前端开发”这一主题。Web前端是构建互联网应用程序和网站的关键部分,它涉及到用户与网站互动的所有视觉和交互元素。本压缩包"web前端课程设计.zip"包含了实现这一目标所需的...

    Web前端框架技术综述.pdf

    在了解Web前端框架技术的重要性之前,我们首先需要了解什么是Web前端框架技术。Web前端框架技术是一种基于Web的开发模式,它提供了一种高效、灵活的方式来开发和部署Web应用程序。这种技术的出现,使得Web应用程序的...

    web前端开发技术 在线投票网站系统设计

    总的来说,这个项目涉及了前端开发的多个核心领域,包括用户体验设计、数据交互、动态功能实现和性能优化,是学习和实践Web前端开发的好实例。通过分析和实现这样的项目,开发者能够深入理解Web应用的完整生命周期,...

    Web前端大作业.zip

    《Web前端大作业——构建漫步时尚广场完整项目》 在本次Web前端的大作业中,我们面临的挑战是构建一个名为“漫步时尚广场”的完整项目。这个项目涵盖了网页设计、交互实现以及后端数据处理等多个方面,旨在提升我们...

    web前端优化技巧1

    本文将深入探讨“web前端优化技巧1”中的关键知识点,并提供实用的优化策略。 首先,减少HTTP请求(Make Fewer HTTP Requests)是优化的核心。每个HTTP请求都会增加页面加载的时间,因为浏览器需要等待服务器的响应...

    web前端优化知识总结+笔试+面试总结.pdf

    Web 前端优化知识总结 本文总结了 Web 前端优化的知识点,涵盖了页面级别和代码级别的优化方法。优化的目的是提高用户体验和节省资源利用。页面级别的优化方法包括减少 HTTP 请求数、合理设置 HTTP 缓存、资源合并...

Global site tag (gtag.js) - Google Analytics