譬如某个js文件不是很重要，并不是整个页面需要的脚本，可能只是某个功能需要的，这个功能可能是用户点击了某个按钮才触发，入口比较深。且和你页面本身的结构不同类，譬如你是基于react的页面，这个功能的js是jquery插件。这种js文件我一般采用动态加载方式引入。
在博客魔改过程中，不可避免的会引入大量的第三方脚本（js），而基于页面读取js的加载顺序，每当浏览器在加载html的过程中遇到<script>js代码片段</script>这样的标签时，浏览器会暂停继续构建html，而是优先执行当前的js脚本，等执行完毕后再继续加载后面的html。
好几个月没动笔了, 最近一直和团队在研究一些技术上的东西, 正好有一部分关于前端模块的内容可以和大家分享下.
埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记，希望看完在项目中有所思考和帮助。
本教程将使用Visual Studio 2013手把手教你用lazyload.js释放你网站的宽带。本文源码：https://github.com/shellcheng/UsedLazyjs
看了《高性能JavaScript》的读书笔记 几个原则： 1、将脚本放在底部 <link>还是在head中，用以保证在js加载前，能加载出正常显示的页面。 <script>放在</body>前。 2、成组脚本 由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。 3、非阻塞脚本 等页面完成加载后，再加载js代码。也就是，在window.load事件发出后开始下载代码。 （1）defer属性：支持IE4和fierfox3.5更高版本浏
"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。 而 Vue3 也支持直接用 script 引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <script src="1.js"></script> <script src="2.js"></scrip
最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的
最近在做项目的时候发现在一个模块导出的时候是返回一个NEW以后实例化的对象，在其他地方使用的是同一个对象(一直以为是不用的对象，每次导入都是一个新的。。。还是太菜)。
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。
随着JS越来越庞大，已经不仅仅是以前复制粘贴做特效的时代了，JS越来越偏向于业务逻辑与应用。恰逢Node的流行，JS在web开发中占有越来越重要的地位。由于JS代码庞大，文件数目多，传统的使用<script src=""></script>会带来很多性能的问题，因此requirejs可以为我们提供两种解决思路： 1 模块化组织JS 2 异步加载JS文件 有了这两种解决办法，能有效的帮助我们解决前端代码库的组织难题。 本文下面就模拟一个小例子，由于并没有应用实践，因此命名很戳，还
声明项目的全局类型，同时不需要在各个Ts文件中import {XXX} from 'xxx' ，就能直接引用！方法是：
从网站开发者的角度来看，第三方JS相比第一方JS有如下几个不同之处： 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存（Cache-Control/Expires） 如果你的网站上面有很多第三方JS代码，那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候，如果解析到需要下载文件的script标签，那么会停止解析接下来的HTML，然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下
如果你的网站上面有很多第三方JS代码，那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候，如果解析到需要下载文件的script标签，那么会停止解析接下来的HTML，然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下：
A 引入 a.js，B 引入 b.js，这些代码最后都是存在于全局作用域里，难保不会出现变量命名冲突的问题。
最近测试了几个 ES module 和 Commonjs 的例子，理解了之前不太理解的概念，记录一下。要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码，不会贴所有验证的代码。
最近因为项目需要使用nodejs，因此不得不对其进行学习研究。一番深入后发现，nodejs除了好用，作为后台效率非常高之外，它自身的设计堪称精妙。我们都知道学习的一种有效方式就是看牛逼人物是怎么打造牛逼作品，而nodejs作为极为极为成功的后台系统，要不是有着高超精彩的设计和实现就不会有如此成就，倘若我们能吃透其设计原理和思路，那么我们成不了大师但成为小师，让自己的技术更上一层楼不成问题。
看红宝书，重新梳理JavaScript的知识。这部分主要是梳理冷门的知识点(对个人来说是冷门的)
模块是Node.js里面一个很基本也很重要的概念，各种原生类库是通过模块提供的，第三方库也是通过模块进行管理和引用的。本文会从基本的模块原理出发，到最后我们会利用这个原理，自己实现一个简单的模块加载机制，即自己实现一个require。
微信小程序在创建初期会给一个获取用户信息的示例代码，我们今天就来解析一下小程序全局app.js运行方式及用户数据存储建议。
在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。
现在回过头来想想，也许选择以《JavaScript权威指南》一书来作为入门有些不好，因为这本书毕竟是很早之前的，书中所讲的思想、标准也基本都只是 ES5 及那时代的相关技术。
image.png 各位同学们大家好，今天是4月9号周日，今天我们继续来做“倒计时”这个前端组件。之前我们是使用原生js来实现的，其实更多的只是实现了功能。 这一次我们使用ReactJs来实现它。react本身就不做过多的介绍了，相信真心关注前端的小伙伴们不可能对它一无所知。只提一下它的重点吧，一虚拟dom；二是全组件化。 而我们在日常使用react的过程中，更多的是跟组件化这三个字打交道。一般来讲，组件就是指被封装好的，且有一定功能的ui零件。 而react的思考方式，就是把页面上的每一个部分都按组件来看
使用实例：http://www.au92.com/archives/labjs.html 解释说明：http://miyuki.42code.com/2012/03/jsload-labjs-requirejs/ LABjs 对外公开的 API 一共有 4 个方法，分别为 setGlobalDefaults() 方法，setOptions() 方法，script() 方法以及 wait() 方法。其中最常用的是 script() 以及 wait()。LABjs 的内部变量中，最重要的是一个叫 engine
前言 上一篇Selenium2+python自动化23-富文本（自动发帖）解决了富文本上iframe问题，其实没什么特别之处，主要是iframe的切换，本篇讲解通过js的方法处理富文本上ifr
为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度（会用的可直接跳过） 1.打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方
在html上方先放一个div，用来显示加载动画，然后js判断当网页加载完毕后再将这个div隐藏并显示原网页。
json 异步加载js js加载的缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一 旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载。 复制代码 javascript 异步加载的三种方案： 1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。 2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 1.2 执行时也不阻塞页面 3
许多前端工程师沉浸在使用脚手架工具的快感中，认为require.js这种前端模块化的库已经过气了，的确如果只从使用场景来看，在以webpack为首的自动化打包趋势下，大部分的新代码都已经使用CommonJs或ES Harmony规范实现前端模块化，require.js的确看起来没什么用武之地。但是前端模块化的基本原理却基本都是一致的，无论是实现了模块化加载的第三方库源码，还是打包工具生成的代码中，你都可以看到类似的模块管理和加载框架，所以研究require.js的原理对于前端工程师来说几乎是不可避免的，即使你绕过了require.js,也会在后续学习webpack的打包结果时学习类似的代码。研究模块化加载逻辑对于开发者理解javascript回调的运行机制非常有帮助，同时也可以提高抽象编程能力。
简单说下webpack中关于Prefetching/Preloading的设置。 git仓库：webpack-demo 1、是什么？ 首先解决的第一个问题就是prefetching和preloading这两个是个啥子东西？ preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。 Prefetching：设置这个指令，
让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。
谷歌广告（Google Adsense）是许多站长网站的收入来源之一，但有时我们会发现谷歌广告加载很慢，影响网站的整体加载速度。本文将介绍如何优化谷歌广告加载速度，让您的网站加载更快。理论上适用于包括 Google Analytics（谷歌分析）、Google Tag Manager 和 Google AdSense 等的所有广告和统计代码。
如下引入外部js文件script.js，在script.js中打印了对应id是root的元素。但是因为我们在head标签中先引入的外部文件，然后才去渲染的dom，所以此时结果为 null。
不管是应付前端面试还是改进产品体验，性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。传输快 vs 体验快 优化的目的是让用户有“快”的感受，那如何让用户感受到快呢？ 加载速度真的很快，用户打开输入网址按下回车立即看到了页面 加载速度并没有变快，但用户感觉你的网站很快 传输快 所谓的真快就是网站资源以最快的速度到达用户浏览器，那如何去做呢？我们先粗略定一些原则： 传输的内容体积要小 传输的内容数量要少 网速要足够快 服务器响应要及时 能重复利用的资源要利用好 暂时不需要的资源先不要 将来需要的资源抽空
如果网页中存在大量的 javascript 代码会极大的影响网页的访问速度，下面就简单介绍一下如何延时加载 js 代码提高速度。
想要做前端工程师的小伙伴儿们，不管你是刚出师门还是已经工作了几年，进入到一个新公司的时候必然经过的一道坎儿就是考试，一般分为笔试、面试、机试等。
我使用的方法是利用如下js代码来完成页面的滚动，每次滚动多少可以根据不同情况自行调整。
终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。
引： 以前做项目的时候也做过webview和js交互，以为会手到擒来。结果WTFK、两天的时间来研究它。主要遇到了一个BUG，下面简单的说一下。
①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性） 在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成
Babel是一个 ES6 转码器，能将 ES6 代码转为 ES5 代码，这样原本不支持ES6的老版本浏览器执行ES6代码
一、复用（维护性、开发成本） 1、前端复用 a：文件复用：Js、css、Html、媒体文件等 b：模块复用：通过js来维护一个整体模块，包括动态引入css/js/html，或动态生成 2、后端复用 a：通用接口复用（对外部） b：UI模块复用（例如后台的include） c：通用工具API复用（例如上传服务，数据库操作等） 二、加载方式（提升用户体验） 1、同步加载 全部加载完成才展示，更少的TCP链接 2、分级加载 同步与异步相结合，先加载重要信息，后加载不重要的 3、按需加载
ES6初学者，通过阅读本文可对ES6知识点有个大体的概念，强烈建议阅读阮一峰大大的ES6入门。
之前用 vuecli做了个博客，是一个单页面项目，大概有十个路由 直接 npm run build打包出来，有一个 1M的巨大 js文件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
