JavaScript优化专题之Loading and Execution加载和运行

JavaScript 在浏览器中的性能，可认为是开发者所要面对的最重要的可用性问题。此问题因JavaScript的阻塞特征而复杂，也就是说，当JavaScript 运行时其他的事情不能被浏览器处理。事实上，大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务，而同一时间只能有一个任务被执行。

JavaScript运行了多长时间，那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。

从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的JavaScript 代码是内联的还是包含在一个不相干的外部文件中，页面下载和解析过程必须停下，等待脚本完成这些处理，然后才能继续。这是页面生命周期必不可少的部分，因为脚本可能在运行过程中修改页面内容。

典型的例子是document.write()函数，例如：

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

当浏览器遇到一个<script>标签时，正如上面HTML 页面中那样，无法预知JavaScript 是否在<p>标签中添加内容。因此，浏览器停下来，运行此JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码，这要占用一些时间，然后解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。

HTML 4 文档指出，一个<script>标签可以放在HTML 文档的<head>或<body>标签中，可以在其中多次出现。传统上，<script>标签用于加载外部JavaScript 文件。<head>部分除此类代码外，还包含<link>标签用于加载外部CSS 文件和其他页面中间件。也就是说，最好把风格和行为所依赖的部分放在一起，首先加载他们，使得页面可以得到正确的外观和行为。例如：

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

虽然这些代码看起来是无害的，但它们确实存在性能问题：在<head>部分加载了三个JavaScript 文件。因为每个<script>标签阻塞了页面的解析过程，直到它完整地下载并运行了外部JavaScript 代码之后，页面处理才能继续进行。用户必须忍受这种可以察觉的延迟。

请记住，浏览器在遇到<body>标签之前，不会渲染页面的任何部分。用这种方法把脚本放在页面的顶端，将导致一个可以察觉的延迟，通常表现为：页面打开时，首先显示为一幅空白的页面，而此时用户即不能阅读，也不能与页面进行交互操作

Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允许并行下载JavaScript 文件。这个好消息表明，当一个<script>标签正在下载外部资源时，不必阻塞其他<script>标签。不幸的是，JavaScript 的下载仍然要阻塞其他资源的下载过程，即使脚本之间的下载过程互不阻塞，页面仍旧要等待所有JavaScript代码下载并执行完成之后才能继续。所以，当浏览器通过允许并行下载提高性能之后，该问题并没有完全解决，脚本阻塞仍旧是一个问题。

因为脚本阻塞其他页面资源的下载过程，所以推荐的办法是：将所有<script>标签放在尽可能接近<body>标签底部的位置，尽量减少对整个页面下载的影响。例如：

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

</body>

</html>

此代码展示了所推荐的<script>标签在HTML 文件中的位置。尽管脚本下载之间互相阻塞，但页面已经下载完成并且显示在用户面前了，进入页面的速度不会显得太慢。

以上就是关于javascript优化内容中的Loading and Execution加载和运行的相关介绍，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • Extjs优化(一)删除冗余代码提高运行速度

    Extjs 本身是一个加载慢的JS框架,这个需要程序员的多去优化,之前说过了JS的打包的优化 这次来写写怎么减少冗余代码,也是提高运行速度,包含了1.删除代码通用2.提交表单通用3.初始化Gird通用化 本次只写 删除代码优化 先贴出代码 复制代码 代码如下: /** * 获取个GridPanel的选择的记录 */ function $getGdSelectedIds(grid, idName) { var selRs = grid.getSelectionModel().getSelectio

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • 关于Javascript加载执行优化的研究报告

    关于Javascript加载执行优化的研究报告

    本人做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Def

  • 优化Node.js Web应用运行速度的10个技巧

    Node.js 受益于它的事件驱动和异步的特征,已经很快了.但是,在现代网络中只是快是不行的.如果你打算用 Node.js 开发你的下一个Web 应用的话,那么你就应该无所不用其极,让你的应用更快,异常的快.本文将介绍 10 条,经过检验得知可大大提高 Node 应用的技巧.废话不多说,让我们逐条来看看. 1. 并行 创建 Web 应用的时候,你可能要多次调用内部 API 来获取各种数据.比如说,假设在 Dashboard 页面上,你要执行下面这几个调用: 用户信息 -getUserProfil

  • JavaScript中的无阻塞加载性能优化方案

    JavaScript中的无阻塞加载性能优化方案

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行.Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不论实际的 JavaScript 代码是内

  • javascript代码加载优化方法

    下面我们通过这个例子介绍1个更简单的方法: 我们用将统计代码保存到1个文件:文件路径:/config/counter.conf 统计代码如下: 复制代码 代码如下: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744406-1']); _gaq.push(['_trackPageview']); (function() { var ga = do

  • JavaScript优化专题之Loading and Execution加载和运行

    JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题.此问题因JavaScript的阻塞特征而复杂,也就是说,当JavaScript 运行时其他的事情不能被浏览器处理.事实上,大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务,而同一时间只能有一个任务被执行. JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不

  • 详解JavaScript两个实用的图片懒加载优化方法

    详解JavaScript两个实用的图片懒加载优化方法

    目录 一.方法一 二.方法二 InterSectionObserver 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li> &

  • 通过seajs实现JavaScript的模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数"define" fn.define = function(id, deps, factory) { //code of function- } 使用define函数来进行定义一个模块,根据 CMD (Common Module Defin

  • Angular性能优化之第三方组件和懒加载技术

    Angular性能优化之第三方组件和懒加载技术

    概述 应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 1.全局安装Angular CLI:npm install -g @angular/cli 2.使用Angular CLI创建一个新

  • Docker安装、创建镜像、加载并运行NodeJS程序的详细过程

    Docker安装、创建镜像、加载并运行NodeJS程序的详细过程

    系统环境:win7 一.安装docker 从Docker官网下载并安装docker-ToolBox,并安装 安装完毕,出现三个图标: 二.创建docker镜像 Docker可以通过Dockerfile文件内容来动构建镜像. Dockerfile是一个包含创建镜像所有命令的文本文件,使用docker build命令可以根据其内容构建镜像. 示例,创建一个NodeJS程序的Docker镜像: 1.新建目录并在cmd中npm init进行初始化. 2.创建一个demo程序,内容如下: 注意:如果是正式

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • javascript框架设计读书笔记之模块加载系统

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: 复制代码 代码如下: function loadJs(url , callback){ var node = document.createElement("script");       node[window.addEventListener ? "onload":"onre

  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    关键点:1.对浏览器版本的判断:2.修改样式表路径 其中第二点也常用在实时修改网页模板.论坛风格的场合,实际上就是修改样式表路径来加载不同的样式表. 代码: 复制代码 代码如下: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); try{ //代

  • JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    淘宝图片处理讨论 淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法: 1.javascript懒加载之可视区域加载 <!DOCTYPE h

  • webpack学习笔记之优化缓存、合并、懒加载

    webpack学习笔记之优化缓存、合并、懒加载

    除了的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等,将与开发相关的东西删掉.下面的介绍均以此代码配置作参考. /*生成环境配置文件:不需要一些dev-tools,dev-server和jshint校验等.和开发有关的东西删掉*/ var webpack = require('webpack

随机推荐