随着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. Serverless（baas & faas）无服务器计算

    自从2014年AWS推出Lambda服务后,Serverless一词越来越热,已经成为一种新型的软件设计架构,即Serverless Architecture.作为一种原生于公共云的架构,Server ...

  2. ARC 73 E - Ball Coloring

    E - Ball Coloring Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement Ther ...

  3. mysql :=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:= := 不只在set和update时时赋值的作用,在select也是 ...

  4. firedac的数据序列和还原单元（Data.FireDACJSONReflect.pas）之拷贝FIREDAC数据集

    使用流做中转 procedure CopyDataSet(const ASource, ADest: TFDAdaptedDataSet);var LStream: TStream;begin LSt ...

  5. MVC.Net：读取Web.config/App.config配置

    需要读取Web.config/App.config的配置很简单,首先我们需要将配置写入到<appSettings>中,例如: <appSettings> <add key ...

  6. HDU 4516

    此题不难,但我就是RE,搞不懂啊...郁闷. 说下基本算法吧,只要留意到要分解的因式是(x+ai)..的形式,x前是系数为1的,而且,它们的绝对值在1000以内,于是,好办了.只要枚举(x+k)中的k ...

  7. AspNet MVC4 教学-27:Asp.Net MVC4 自己定义helper及function的高速Demo

    A.创建Basic类型项目. B.创建App_Code目录,在里面创建2个cshtml文件: MyHelper.cshtml: @helper MyTruncate(string input, int ...

  8. 臣妾做不到啊---记团队内首次尝试HOLACRACY管理会议

    "易穷则变,变则通.通则久". --<系辞传>下篇的第二章 实践敏捷方法接近两年,瓶颈效应逐渐显现.计穷力竭之时.有幸了解到HOLACRACY.购买了市面上唯一一本中文 ...

  9. 以&quot;小刀会“的成败论当今创业成败

    讲起"小刀会",熟悉的人或许非常熟悉,不熟悉的人或许根本不知道清末有这样一个组织. 依据翻查史料,最初的小刀会是在福建成立的,来源有两个.一个是天地会的分支,一个是白莲教分支. 而 ...

  10. 计算几何 二维凸包问题 Andrew算法

    凸包:把给定点包围在内部的.面积最小的凸多边形. Andrew算法是Graham算法的变种,速度更快稳定性也更好. 首先把全部点排序.依照第一keywordx第二keywordy从小到大排序,删除反复 ...