关键词：
下面介绍一种JS代码优化的一个小技巧，通过动态加载引入js外部文件来提高网页加载速度
-
【基本优化】
将所有需要的<script>标签都放在</body>之前，确保脚本执行之前完成页面渲染而不会造成页面堵塞问题，这个大家都懂的。
-
【合并JS代码，尽可能少的使用script标签】
最常见的方式就是带代码写入一个js文件中，让页面只使用一次<script></script>标签来引入
-
【无堵塞加载JS】
通过给script标签增加 defer属性或者是 async 属性来实现
<script src="file.js" defer></script>
注解：
async和defer不同之处是async加载完成后会自动执行脚本，defer加载完成后需要等待页面也加载完成才会执行代码
-
【动态创建script来加载-推荐】
function loadJS( url, callback )
var script = document.createElement(‘script‘),
fn = callback || function();
script.type = ‘text/javascript‘;
//IE
if(script.readyState)
script.onreadystatechange = function()
if( script.readyState == ‘loaded‘ || script.readyState == ‘complete‘ )
script.onreadystatechange = null;
fn();
;
else
//其他浏览器
script.onload = function()
fn();
;
script.src = url;
document.getElementsByTagName(‘head‘)[0].appendChild(script);
//用法
loadJS(‘file.js‘,function()
alert(1);
);
-
谷歌浏览器运行效果，script被动态创建在head中
-
建议大家可以封装成类库，单独引入。
该原理实现的也有很多不错的js类库可以使用，如LazyLoad.js，支持数组的形式引入，打开浏览器在network中可看到js是同步加载的
-
【XHR加载】
使用ajax方式加载
代码：
var xhr = new XMLHttpRequest;
xhr.open(‘get‘,‘file.js‘,true);
xhr.onreadystatechange = function()
if( xhr.readyState == 4 )
if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 )
var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
script.text = xhr.responseText;
document.body.appendChild(script);
;
xhr.send(null);
-
【总结】
最好的方式还是使用动态创建script的方式加载，当动态创建script，浏览器会分配一个线程去下载src指向的资源，多个script也是同步下载的
聊聊java中代码优化的30个小技巧(代码片段)
...的价值。今天接着优化这个话题，我们一起聊聊Java中代码优化的30个小技巧，希望会对你有所帮助。1.用String.format拼接字符 查看详情
聊聊java中代码优化的30个小技巧(代码片段)
...的价值。今天接着优化这个话题，我们一起聊聊Java中代码优化的30个小技巧，希望会对你有所帮助。1.用String.format拼接字符 查看详情
聊聊sql优化的15个小技巧(代码片段)
...想到的很有可能是优化sql语句，因为它的改造成本相对于代码来说也要小得多。那么，如何优化sql语句呢？这篇文章从15个方面，分享了sql优化的一些小技巧，希望对你有所帮助。1避免使用select*很多时候，我们写sql语句时，为... 查看详情
微信小程序性能优化技巧(代码片段)
摘要：如果小程序不够快，还要它干嘛？原文：微信小程序性能优化方案——让你的小程序如此丝滑作者：杜俊成要好好学习Fundebug经授权转载，版权归原作者所有。微信小程序如果想要优化性能，有关键性的两点：提高加载性... 查看详情
微信小程序性能优化技巧(代码片段)
...小程序的下面三个状态：有三个点的白屏（左侧）：下载代码包的阶段没有三个点的白屏（中间）：业务代码注入和渲染的阶段加载中（右边）：业务代码中异步请求数据总的来说，小程序呈现到用户面前，实 查看详情
代码优化小技巧（持续更新......）(代码片段)
1.无论读取char型还是int型，都只需一条指令 x86: movl(int) movb(char) arm: ldr(int) ldrb(char) ARM早期编译器不支持ldrbstrb，在操作char类型时，32bit处理器下用ldr加载R0寄存器（char所在的4byte），假设在低8位，就左... 查看详情
react性能优化小技巧(代码片段)
REACT优化性能介绍一些项目中可用于改进React代码的有效技巧。避免在渲染函数中使用内联函数定义原因：如果在JSX属性中使用箭头函数，它将在每次渲染时创建新的函数实例。这可能会为垃圾收集器带来很多工作。可以... 查看详情
@jvmdefaultwithcompatibility优化小技巧，了解一下~(代码片段)
.markdown-bodypre,.markdown-bodypre>code.hljsbackground:#fff;color:#000.hljs-comment,.hljs-quote,.hljs-variablecolor:green.hljs-built_in,.hljs-keyword,.hljs-name,.hljs-selector-tag,.hljs-tagcolor:# 查看详情
做oi题时的一些常用的常数优化小技巧(代码片段)
注意：本文所介绍的优化并不是算法上的优化，那个就非常复杂了，不同题目有不同的优化。笔者要说的只是一些实用的常数优化小技巧，很简单，虽然效果可能不那么明显，但在对时间复杂度要求十分苛刻的时候，这些小... 查看详情
聊聊sql优化的15个小技巧(代码片段)
...的很有可能是优化sql语句，因为它的改造成本相对于代码来说也要小得多。那么，如何优化sql语句呢？我的个人技术博客ÿ 查看详情
java代码优化的30个小技巧(代码片段)
1.用String.format拼接字符串不知道你有没有拼接过字符串，特别是那种有多个参数，字符串比较长的情况。比如现在有个需求：要用get请求调用第三方接口，url后需要拼接多个参数。以前我们的请求地址是这样拼接... 查看详情
聊聊接口性能优化的11个小技巧(代码片段)
和mq。和在代码块上加锁。先看看如何在方法上加锁：和异步调用。慢查询开关slow_query_log_file慢查询日志存放的路径long_query_time超过多少秒才会记录日志通过mysql的set命令可以设置：和预警的功能。架构图如下：我们可以用它监... 查看详情
howjavascriptworks(javascript工作原理)渲染引擎及性能优化小技巧(代码片段)
个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制。DOMtree ----| |----> RenderTreeCSSOMtree ----| 这是JavaScript工作原理的第十一章。迄今为止，之前的JavaScr... 查看详情
可以一学的代码优化小技巧：减少if-else冗余
...中都经常看见它。本文分享自华为云社区《JavaScript代码之美—代码优化，减少if-else冗余的技巧》，作者：黛琳ghz。前言if-else语句对于程序员来说，是非常非常熟悉的一个判断语句，我们在日常开发和学习中都经常看见... 查看详情
微信小程序的优化技巧都有哪些，优化方法
微信小程序代码是一种计算机语言，但是很多代码比较长，浪费时间和空间，所以如何让我们的小程序代码瘦身减肥，是本文主要介绍的内容，教大家几招小妙计，希望可以有用处。微信小程序在发布的时候，对代码的量是有限... 查看详情
8个python加速运行的小技巧(代码片段)
...0c;Python的效率并没有想象中的那么夸张。本文对一些Python代码加速运行的技巧进行整理。0.代码优化原则本文会介绍不少的Python代码加速运行的技巧。在深入代码优化细节之前，需要了解一些代码优化基本原则 查看详情
8个python加速运行的小技巧(代码片段)
...0c;Python的效率并没有想象中的那么夸张。本文对一些Python代码加速运行的技巧进行整理。0.代码优化原则本文会介绍不少的Python代码加速运行的技巧。在深入代码优化细节之前，需要了解一些代码优化基本原则 查看详情
12个vue开发中的性能优化小技巧(代码片段)
关注公众号 前端开发博客，回复“加群”加入我们一起学习，天天进步性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做... 查看详情