`
xiangqian0505
  • 浏览: 321769 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js性能问题

阅读更多
随着web应用的复杂度日渐提高,JavaScript代码量也变得越来越多,所以JavaScript在浏览器中性能应得到更多的关注。这事又因为JavaScript的阻塞特性而变得复杂。要提高JavaScript的性能一方面需要浏览器方面提升优化自身的JS引擎,另一方面作为JS程序开发员应该编写高效的JS代码来提高web程序的性能。本文立足于后一种情况。这将是一系列的文章,有关优化你JS代码的一些建议,本系列文章的观点大都提取自《高性能JavaScript》一书。首先从JS代码的加载和执行开始



脚本加载和执行会阻塞其它资源的下载,应该尽量将<script>标签放到<body>标签底部。确保在脚步执行前页面已经完成渲染。
合并脚本,减少<script>标签的数量,以减少http请求的次数。
无阻塞的下载脚本(页面加载完成之后才去加载执行JS代码):
              方法: 1.为<script>标签添加defer属性,表明不涉及修改dom操作,可以延时载。
                              如:<script type=”text/javascript” src=”file.js” defer></script>
                         2.动态脚步元素。利用DOM动态创建script标签,到指定位置。
                         3.XMLHttpRequest脚本注入。利用ajax下载JavaScript代码并注入到页面中。
分享到:
评论

相关推荐

    JS性能优化框架

    Head.js、RequireJS以及AsyncJS等框架,通过并行加载、模块化管理和异步控制等技术,有效解决了资源加载和代码执行中的瓶颈问题。开发者应根据项目需求选择合适的框架,并结合最佳实践,以实现最佳的性能优化效果。 ...

    《高性能JavaScript编程》.Nicholas.C.Zakas著.英文版

    9. **DOM优化**:书中深入讲解了DOM操作的性能问题,如批量操作、事件委托等,帮助开发者写出更高效的DOM代码。 10. **异步编程**:除了传统的回调函数,还涵盖了Promise、async/await等现代异步处理技术,以及如何...

    浏览器性能测试JavaScript脚本

    "浏览器性能测试JavaScript脚本"是一个专门用于评估JavaScript引擎性能的工具,由Google开发,它可以帮助开发者了解不同浏览器在运行特定JS任务时的性能差异。 这个工具包含了一系列基准测试脚本,比如`earley-...

    JavaScript性能监视器

    "mrdoob-stats.js"是一个流行的JavaScript性能监视器库,由知名开发者MrDoob贡献。版本"fb9875b"可能是该库的一个特定版本号,通常与源代码控制系统的提交ID相关联,用于跟踪代码的变更历史。 使用"mrdoob-stats.js...

    比较几个流行的JavaScript框架的性能

    本篇文章将深入探讨几个流行的JavaScript框架——React、Angular、Vue.js和Ember.js的性能差异,旨在为开发者提供决策参考。 首先,React是由Facebook开发并维护的库,主要用于构建用户界面,特别是单页面应用(SPA...

    高性能JavaScript + 高清+目录 PDF

    作者还探讨了JavaScript的性能瓶颈分析和调试技巧,讲解如何使用浏览器的开发者工具进行性能测试和分析,以便找出并修复性能问题。此外,还涵盖了代码的模块化和加载策略,如何利用模块系统(如CommonJS和ES6模块)...

    【JavaScript源代码】如何使用gpu.js改善JavaScript的性能.docx

    ### 使用GPU.js提升JavaScript性能详解 #### 一、引言 在现代Web开发中,复杂的计算任务变得越来越普遍。然而,这些任务往往消耗大量的计算资源,导致用户体验下降。为了解决这一问题,开发者们探索了多种优化手段...

    高性能JavaScript

    总的来说,《高性能JavaScript》是一本全面且深入的JavaScript性能优化指南,它不仅教会你如何写出高效的代码,还会引导你掌握分析和调试性能问题的技能。对于希望提升Web应用性能的前端开发者来说,这是一本不可或...

    藏经阁-Node.js性能平台.pdf

    在这方面, Node.js 的痛点包括编程语言层面的问题、JavaScript 弱类型、缺乏成熟的开发框架和运维工具等。 Node.js 应用稳定性的现状也存在一些问题,例如开发环境中存在一些调试工具,但在生产环境中监控方案却...

    你不知道的Node.js性能优化

    在部分内容中,提及了Node.js的性能优化涉及许多层面,包括使用最新的Node.js JavaScript库、C++绑定、libuv、V8等底层技术。这些底层组件的性能提升,直接关联到Node.js应用的性能。例如,V8引擎的优化,包括了对...

    Kojak, 简单的JavaScript性能分析器.zip

    Kojak, 简单的JavaScript性能分析器 ##Kojak: 一个简单的JavaScript性能分析器 ####What 是 KojakKojak是一个简单的实用工具,可以以帮助你找出哪些JavaScript函数运行得太慢。 它跟踪调用函数的时间。调用的频率。...

    如何高效使用JS

    这本书不仅提供了许多实用的技巧,还对JavaScript执行机制和浏览器行为做了深入的分析,帮助读者从根本上理解JavaScript性能问题,并能找到合适的解决方案。通过阅读和实践书中的方法,开发人员可以显著提升代码的...

    javascript的Map实现(高性能)

    在本文中,我们将深入探讨一种高性能的JavaScript `Map`实现,它基于JSON,具有出色的稳定性和更高的容量。 首先,我们来看传统的JavaScript `Map`。原生的`Map`提供了如`set`、`get`、`delete`、`has`等方法,便于...

    自己写的javascript性能测试插件

    JavaScript性能测试插件是用于评估和优化JavaScript代码执行效率的工具。通过自定义这样的插件,我们可以更好地理解和改进我们的Web应用程序在不同环境下的表现。在这个项目中,我们有两个主要文件:`t1.html`和`...

    高性能javascript中英文对照版

    性能问题之所以重要,是因为JavaScript的执行具有阻塞性质,即在JavaScript代码执行期间,其他浏览器操作(比如页面渲染)会暂停,这就导致了用户在JavaScript代码运行完毕之前无法与页面交互。 2. 浏览器对...

    SpeedRacer用于收集JS库应用程序的性能指标

    **SpeedRacer:JS 库应用性能指标...通过对 JavaScript 执行、渲染和 fps 的监测,开发者可以有效地识别和解决性能问题,从而提升用户体验。在 JavaScript 开发的道路上,善用这样的工具是确保应用高效运行的关键步骤。

    WebGL/ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例

    总结来说,这个案例展示了如何利用ThreeJS的OrbitControls.js实现3D场景的交互式相机控制,以及如何使用stats.min.js来跟踪和优化性能。理解这些组件的工作原理和使用方式对于开发高质量的WebGL应用至关重要。

Global site tag (gtag.js) - Google Analytics