随着js技术的发展,性能问题开始被越来越多的人关注,最近了解了一些关于前端性能的问题,这里主要讨论一下在js脚本加载和执行的过程中,我们应该怎么样来提高js的性能

js脚本的处理

初学前端的时候,我们都习惯把script标签放在html文档里面的<head>或者<body>,理论上来说这样的设置会让页面按照正确的方式来解析和执行,但是这样的做法会产生严重的性能问题。因为js在浏览器里面执行是单线程的,所以在某个时刻只能执行某个唯一的线程,<script>标签的出现意味着页面必须等待脚本的解析和执行(通俗来讲就是在一心不能二用)。既然如此,那我们应该怎么处理js脚本在页面的载入位置呢?

可能产生的问题:页面加载的时候页面一片空白(浏览器下载解析脚本,页面还没有完成页面加载和渲染)

解决的办法:1)如果js脚本不影响页面展示的情况下,考虑把js脚本放在页面的底部,这样可以使得用户的视觉体验更好

      2)将多个js脚本进行合并,及减少页面中外链接的数量(一般情况下,下载单个100k的文件比下载4哥25k的文件效率更高。虽然现在一些浏览器已经允许并行下载文件,但还是需要尽量减少文件的数量)

      3)延迟脚本的处理(给不需要立即执行的脚本进行延迟处理  defer)

js开发性能(一)的更多相关文章

  1. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  2. 推荐近期15个 Node.js 开发工具

    近来Node.js 越来月流行了,这个基于Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些 ...

  3. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  4. 【翻译】十大要避免的Ext JS开发方法

    原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean ...

  5. 准备:新V8即将到来,Node.js的性能正在改变

    V8的Turbofan的性能特点将如何对我们优化的方式产生影响 审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...

  6. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  7. 用HTML5+JS开发跨平台的桌面应用

    通过Node.js和WebKit技术的融合,开发者可以用HTML5技术编写UI,同时又能利用Node.js平台上众多library访问本地OS的能力,最终达到用Web技术就可以编写桌面应用的目的. 选 ...

  8. 本地模拟服务器CDN(静态HTML,CSS,JS)开发

    本地模拟服务器CDN(静态HTML,CSS,JS)开发 所谓本地开发环境就是和线上cdn(a.longencdn.cn)一样的目录结构和功能,提供了一个本地镜像,开发者直接在本地镜像的对应目录中作开发 ...

  9. JS开发打气球游戏

    JS开发打气球游戏 观视频<月薪4万的程序员有多强?半小时原生JS开发打气球游戏,征服现场数万人!> 清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心 ...

随机推荐

  1. Linux Container测试之block IO

      简介 Linux Container是OS级别的虚拟化方案,它相比于一般的虚拟机没有了硬件模拟以及指令模拟,相比传统虚拟机具有更低的开销,因此可以应用到私有云之中.LXC目前的版本支持对memor ...

  2. 微信小程序的小问题(2)

    1.在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使 ...

  3. 成都传智播客java就业班激情洋溢的青春篮球赛

    为了缓解学员们的学习压力,也为了培养学员们的团队协作精神,5月28日下午,在班主任倪老师和王老师联手带领下,我们1406280ls" style="color:rgb(51,102 ...

  4. hdu 5094 Maze bfs

    传送门:上海邀请赛E 给定一个n×m的迷宫,给出相邻格子之间的墙或者门的信息,墙说明不可走,假设是门则须要有相应的钥匙才干通过,问是否可以从(1,1)到达(n,m) 一个带状态的bfs,再另记一个状态 ...

  5. CAS 4.0 配置开发手冊

    1    下载 地址http://downloads.jasig.org/ cas-server-4.0.0-release.tar.gz cas-client-3.3.3-release.tar.g ...

  6. 《Qt on Android核心编程》前言:为什么写作本书

    2008年.我開始在CSDN写技术博客. 在此之前,我的理想是写出受人待见的小说来.我也以前在网络论坛上笔耕不辍获得一些成绩,也以前发表过一些散文以及小说.而那一年,当我再次拾起笔来写东西时.却选择了 ...

  7. 严格符合CommonJS规范的包特性

    严格符合CommonJS规范的包应该具备下面特性: 1.package.json必须在包的顶层文件夹下. 2.二进制文件应该在bin文件夹下. 3.JavaScript代码应该在lib文件夹下. 4. ...

  8. CON1023 明明的计划

    比赛说明 邀请码:a08f 来源:自出 描述:无 难度:NOIP提高组day1 赛时答疑:私信询问 奖励:无 试题列表 赛题 #A:数学题赛题 #B:明明泡妹子赛题 #C:明明去酒店 U5012 数学 ...

  9. C# WINFORM 局域网PING 工具(技术改变世界-cnblog)

    WINFORM 局域网PING 工具(技术改变世界-cnblog) 需求: 1.实时更新 日期时间 2.可以ping多个IP 地址,必须判断 IP地址的正确性,不能为广播地址 3.对ping结果的显示 ...

  10. KD树——k=1时就是BST,里面的数学原理还是有不明白的地方,为啥方差划分?

    Kd-Tree,即K-dimensional tree,是一棵二叉树,树中存储的是一些K维数据.在一个K维数据集合上构建一棵Kd-Tree代表了对该K维数据集合构成的K维空间的一个划分,即树中的每个结 ...