js开发性能(一)
随着js技术的发展,性能问题开始被越来越多的人关注,最近了解了一些关于前端性能的问题,这里主要讨论一下在js脚本加载和执行的过程中,我们应该怎么样来提高js的性能。
js脚本的处理
初学前端的时候,我们都习惯把script标签放在html文档里面的<head>或者<body>,理论上来说这样的设置会让页面按照正确的方式来解析和执行,但是这样的做法会产生严重的性能问题。因为js在浏览器里面执行是单线程的,所以在某个时刻只能执行某个唯一的线程,<script>标签的出现意味着页面必须等待脚本的解析和执行(通俗来讲就是在一心不能二用)。既然如此,那我们应该怎么处理js脚本在页面的载入位置呢?
可能产生的问题:页面加载的时候页面一片空白(浏览器下载解析脚本,页面还没有完成页面加载和渲染)
解决的办法:1)如果js脚本不影响页面展示的情况下,考虑把js脚本放在页面的底部,这样可以使得用户的视觉体验更好
2)将多个js脚本进行合并,及减少页面中外链接的数量(一般情况下,下载单个100k的文件比下载4哥25k的文件效率更高。虽然现在一些浏览器已经允许并行下载文件,但还是需要尽量减少文件的数量)
3)延迟脚本的处理(给不需要立即执行的脚本进行延迟处理 defer)
js开发性能(一)的更多相关文章
- heX——基于 HTML5 和 Node.JS 开发桌面应用
heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...
- 推荐近期15个 Node.js 开发工具
近来Node.js 越来月流行了,这个基于Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些 ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- 【翻译】十大要避免的Ext JS开发方法
原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean ...
- 准备:新V8即将到来,Node.js的性能正在改变
V8的Turbofan的性能特点将如何对我们优化的方式产生影响 审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 用HTML5+JS开发跨平台的桌面应用
通过Node.js和WebKit技术的融合,开发者可以用HTML5技术编写UI,同时又能利用Node.js平台上众多library访问本地OS的能力,最终达到用Web技术就可以编写桌面应用的目的. 选 ...
- 本地模拟服务器CDN(静态HTML,CSS,JS)开发
本地模拟服务器CDN(静态HTML,CSS,JS)开发 所谓本地开发环境就是和线上cdn(a.longencdn.cn)一样的目录结构和功能,提供了一个本地镜像,开发者直接在本地镜像的对应目录中作开发 ...
- JS开发打气球游戏
JS开发打气球游戏 观视频<月薪4万的程序员有多强?半小时原生JS开发打气球游戏,征服现场数万人!> 清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心 ...
随机推荐
- spring boot开发REST接口
1.配置pom.xml文件的<parent>和<depencencies>,指定spring boot web依赖 <parent> <groupId> ...
- 造成segment fault,产生core dump的可能原因
1.内存访问越界 a) 由于使用错误的下标,导致数组访问越界 b) 搜索字符串时,依靠字符串结束符来判断字符串是否结束,但是字符串没有正常的使用结束符 c) 使用strcpy, strcat, spr ...
- Oracle-时间与字符串转换
--UPDATE_TIME 是时间,直接转成字符串 SELECT to_char(MAX(UPDATE_TIME), 'yyyy-mm-dd hh24:mi:ss') as lastUpdateTim ...
- 解决ubuntu上opengl的问题
装完ubuntu之后,对于opengl的程序总是出现问题,先将解决方案列出如下: http://www.linuxforums.org/forum/ubuntu-linux/175490-graphi ...
- SolrCloud 分布式集群部署步骤
https://segmentfault.com/a/1190000000595712 SolrCloud 分布式集群部署步骤 solr solrcloud zookeeper apache-tomc ...
- @SpringBootApplication注解
@SpringBootApplication注解表明了SpringBoot的核心功能,即自动配置. @SpringBootApplication(主配置类): @SpringBootConfigura ...
- DBI(i80)/DPI(RGB)/DSI【转】
本文转载自:http://blog.csdn.net/liuxd3000/article/details/17437317 (1)DBI接口 A,也就是通常所讲的MCU借口,俗称80 system接口 ...
- 将TensorFlow模型变为pb——官方本身提供API,直接调用即可
TensorFlow: How to freeze a model and serve it with a python API 参考:https://blog.metaflow.fr/tensorf ...
- Cosine Similarity of Two Vectors
#include <iostream>#include <vector>#include <cmath>#include <numeric> templ ...
- vs code golang代码自动补全
“go.useCodeSnippetsOnFunctionSuggest”: true 文件-->首选项--->设置--->用户设置 添加下行:然后就可以自动补全了,包括() “go ...