`
andyLee520
  • 浏览: 4471 次
  • 性别: Icon_minigender_1
  • 来自: 湖南怀化
社区版块
存档分类
最新评论

js简单性能问题以及js学习总结

阅读更多
最近在看一本书:《高性能javaScript》,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧!!!

1、<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染
2、<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行的时候,都会下载对应的js文件,浏览器会等待所有js/css下载完成才显示出页面
3、当需要导入多个js文件的时候,一般情况下我们都是写两个<script src="..." />,实际上是支持一次性导入多个的,例如:<script src="file1.js&file2.js" />
4、<script>标签中有一个属性:defer,该属性指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行,但是该属性只有IE4+和Firefox3.5+浏览器支持,希望大家使用的时候注意,如果其他浏览器,则会被直接忽略,使用例子:
<script type="text/javascript" src="file1.js" defer />
,测试验证defer属性示例:
<script defer>alert("defer");</script>
<script>alert("script");</script>
<script>
window.onload = function() {
alert("load");
};
</script>

这段代码在我们正常理解下执行顺序应该是:defer、script、load,但是如果在支持defer的浏览器上顺序则是:script、defer、load,这里需要注意的是:defer不是跟在script后面执行,而是在onload事件处理之前被调用

未完....待续,后续会继续更新,希望大家关注!
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

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

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

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

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

    Vue.js学习文档

    ### Vue.js 学习文档知识点总结 #### 一、Vue.js 概览 - **起源与发展**: - **起源**:Vue.js 最初由尤雨溪(Evan You)在2013年底作为个人实验项目开始开发。 - **公开发布**:2014年2月正式公开发布。 - **...

    前端vue ,css ,js ,学习笔记,全部总结

    这份"前端vue ,css ,js ,学习笔记,全部总结"涵盖了这三个重要组成部分的精华内容,旨在为开发者提供一个全面的学习资源。 Vue.js是当前非常流行的前端框架,由尤雨溪创建,以其轻量级、易上手和高度可扩展性而...

    javascript XMPP strophe.JS,聊天室

    总结,通过结合HTML5、JavaScript以及Strophe.js,开发者可以快速搭建起一个功能丰富的Web聊天室。尽管描述中提到"里面东西不对",但基本的构建流程和关键知识点依然适用,希望这些信息能为初学者提供有价值的指导。...

    JavaScript基础知识总结

    自 1996 年以来,JavaScript 已经被所有主流浏览器支持,并且随着标准的不断更新,JavaScript 的功能和性能也在不断提升。 5. JavaScript 在 HTML 中的实现 `&lt;script&gt;` 标签用于在 HTML 中插入 JavaScript 代码。...

    APP.js 简单的移动端App应用

    开发者可以在社区中交流问题,获取最新的开发资讯,以及分享自己的经验和实践。 ### 7. 应用发布与更新 使用App.js 开发的应用可以通过常规的App Store和Google Play进行发布。由于大部分代码是JavaScript,所以...

    vue.js学习笔记

    Vue.js是一个轻量级的前端JavaScript框架,它以其易用性、灵活性和高效性而受到开发者的青睐。Vue的核心功能是能够将页面上的功能模块化开发,即通过组件化的方式构建前端界面,从而提高开发效率和可维护性。Vue.js...

    js_game.rar_javascript_js 游戏_js游戏

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,特别适合于创建交互式网页和游戏。本文将深入探讨如何使用JavaScript开发一款小型游戏,这对于初学者来说是一个很好的学习项目。 首先,理解...

    node.js学习案例

    总结,这个“Node.js学习案例”提供了一个完整的微型博客应用程序的实例,涵盖了Node.js开发的关键技术和流程。通过这个案例,初学者不仅可以学习到Node.js的基础知识,还能体验到一个实际项目从无到有的过程,从而...

    vue.js学习经典实例(本人总结)

    在"vue.js学习经典实例(本人总结)"这个主题中,我们可以看到作者分享了一些基于Vue.js的实践案例,包括移动前端的开发经验,如聊天窗口、消息列表以及tab切换等常见功能。 首先,让我们详细了解一下Vue.js的核心...

    ChartJS-13.1.5.zip_chartjs_javascript

    总结来说,ChartJS 13.1.5是一个适合ASP.NET开发者的JavaScript图表库,提供丰富的图表类型和定制选项,尤其是仪表盘图表功能,对于构建数据可视化应用非常实用。通过提供的示例和许可协议,开发者可以快速上手并...

    JQuery框架 JS框架 JS javascript

    JQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在标题和描述中提到的“JQuery框架 JS框架 JS javascript”表明我们将探讨JQuery如何作为JS的...

    asm.js FFT module

    然而,asm.js 也有其局限性,如代码可读性较差,学习曲线较陡峭,以及并非所有 JavaScript 引擎都完全支持其优化。 总结,asm.js FFT 模块展示了如何利用 JavaScript 的低级子集进行高效计算,为 web 应用提供了一...

    WT-JS_DEBUG v1.4 ,本地JS调试工具。

    然而,随着项目规模的扩大和复杂性的增加,JS代码的调试变得越来越必要,以确保代码的正确性、性能优化以及问题定位。 ### 二、WT-JS_DEBUG v1.4 的核心特性 1. **断点调试**:此工具允许用户在代码中设置断点,当...

    JS日历 JS万年历 包括阴历、节气、节日、单页式双页式都有

    在IT行业中,JavaScript(简称JS)是一...对于开发者而言,它是学习JavaScript编程、日期处理以及UI设计的一个好案例。同时,对于用户来说,它提供了一种直观且实用的方式来查看和选择日期,包括重要的农历日期和节日。

    tiny-js-42tiny-js_javascript_presskgq_源码

    在源码分析中,开发者可以学习到如何构建一个简单的JavaScript引擎,理解JavaScript代码执行的底层原理,以及如何在有限的资源下优化性能。这对于深入理解JavaScript语言、编译原理以及嵌入式系统开发都是非常有价值...

    VideoJs 视频JS包及演示Demo

    本资源包含VideoJs的包文件以及一个经过优化的演示Demo,允许你在本地直接运行播放视频。 ### 1. VideoJs简介 VideoJs是一个强大的跨浏览器、跨设备的JavaScript和CSS库,用于构建用户友好的、交互式的HTML5视频...

    基于Tensorflow.js和Vue.js的机器学习平台.zip

    总结来说,基于Tensorflow.js和Vue.js的机器学习平台是将深度学习与前端开发紧密结合的一种创新实践,它让AI技术更加易于访问,为开发者提供了新的工具和可能性,同时也为用户提供了一种全新的交互体验。

Global site tag (gtag.js) - Google Analytics