埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记，希望看完在项目中有所思考和帮助。
同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
浏览器在开始运行一个页面的时候，首先它会初始化js功能，当js发挥它的功能时候，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序，谁在谁之前发生，谁在谁之后发生。
HTML5学堂：而今，AJAX技术已经成为JavaScript的重要组成部分，提到AJAX，最核心的两个词语是“局部刷新”和“异步加载”。在本文当中，主要介绍AJAX是什么以及其操作的基本步骤。 AJAX是四个单词的简写，其中Asynchronous【发音：[eiˈsiŋkrənəs]】即异步的意思，异步的链接可以同时发起多个，并且不会阻止JS代码执行。与之对应的概念是同步，同步的链接在同一时刻只会有一个，并且会阻止后续JS代码的执行，JS必须等待同步链接加载完毕后才能继续执行。AJAX发展到现在，不但可以
Promise对象是ES6提出的的异步编程的规范。说到异步编程，就不得不说说同步和异步这两个概念。
第一种：url传值 A页面部分js代码 Page({ toDetailPage: function (e) { var zhi = "biubiubiu~~"; wx.naviga
作者：Tony Gentilcore 原文：http://webkit.org/blog/1395/running-scripts-in-webkit/ WebKit 正式版已经正式支持HTML5中<script>标签的 async 和 defer 属性了。如此一来，我们就能在不阻塞网页中其它元素下载的情况下，以异步方式下载JavaScript，从而大大提高了网页加载速度。 正常情况下，网页分析器检测到有外部脚本时，会暂停解析，并发起一个请求去下载该脚本，一直到这个脚本完全下载并执行之后解析才会继续进行。
事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~
window对象定义了一些属性，用来指定当前窗口的一些信息。通过该属性的引用，可以获取当前窗口的信息
最近新项目需要根据参数切换js的版本，就需要动态加载js，动态加载js涉及到异步加载与同步加载的问题，所以就封装了一下下面两个方法，以供使用。
Script 标记的 defer 和 async 属性可能会显著影响页面加载的性能， 总结说明一下。
异步模块模式AMD是当请求发出后，继续其他业务逻辑，直到模块加载完成执行后续逻辑，实现模块开发中的对模块加载完成后的引用，大名鼎鼎的require.js就是以它为思想的，异步模块模式不属于一般定义的23种设计模式的范畴，而通常将其看作广义上的架构型设计模式。
前端开发工程师有有必要重视的几个功用方针 关于页面相应时间，有一条闻名的“2-5-8准则”。当用户访问一个页面： 在2秒内得到照应时，会感觉系统照应很快； 在2-5秒之间得到照应时，会感觉系统的照应速度还可以； 在5-8秒以内得到照应时，会感觉系统的照应速度很慢，但可以承受； 而逾越8秒后依然无法得到照应时，用户会感觉系统糟透了，进而选择脱离这个站点，或许主张第2次央求。 关于一个网站如果期望抓住用户，网站的速度以及稳定性是首战之地的。 从各式各样的前端监控平台中，你都可以获得页面许多的功用方针。本文将介绍
前端的基本工作就是写页面，那么你写那么多页面，知道自己的页面健康吗，性能好吗？如果你不单单是完成业务需求，还会关注自己的页面是否健康，那么你是一个有追求的前端开发者。本篇文章将会讲述如何去知道你的页面是否健康。
本文内容只适用于webpack v1版本，webpack v2已经修复了hash计算规则。 之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景，如果是常规单页面应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对复杂多页面项目时，我们不得不继续踩webpack的hash坑。 在进入正文之前先解释一下所谓的常规单页面和复杂多页面是什么意思。 这两个并非专业术语，而是笔者实在想不出更恰当的说法了，见谅。 1. 项目类型 1.1 常规单页面项目 常规单页面符合以下条
浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。
下面介绍一种JS代码优化的一个小技巧，通过动态加载引入js外部文件来提高网页加载速度
相信小程序的初学者对js页面是很模糊的总感觉看不懂，其实js页面总的来说就是一个Page（）函数。用Page（）函数来注册一个页面，接受一个object参数，实现页面的生命周期函数 、初始数据、事件处理函数。下面简单介绍onLoad生命周期函数实现页面跳转。
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
工作中我们经常会遇到B页面需要A页面内的部分或全部数据；C页面内的一个函数执行完之后需要改变B页面内的显示样式；也或者是A和B两个页面用到了同样的网络数据，在其中一个页面做出修改后另一个页面也要随之改变以保证回传服务器时数据的准确性，等等诸如此类的页面间数据传递的问题。
模块类和状态类 参照上文的demo，我们结合源码分析在简单的API调用的背后，到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。 首先定义了一个Module类，对应与一个模块 function Module(uri, deps) { this.uri = uri this.dependencies = deps || [] this.exports = null this.status = 0 // Who depends on me this._wa
日常开发过程中，时不时会遇到要同时预加载几张图片，并且等都加载完再干活的情况，结合 Promise 和 async/await 代码会优雅很多，但也容易遇到坑，今天就来简单聊聊。 ES5 先从最基本的 ES5 说起，基本思路就是做一个计数器，每次 image 触发 onload 就加一，达到次数后触发回调函数。 var count = 0, imgs = []; function loadImgs(imgList, cb) { imgList.forEach(function(url,
本文由 llunnn 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 最近在开发小程序，尝试性地使用了一下mpvue框架。 mpvue是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心，mpvue修改了Vue.js的runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。 mpvue同时维护了Vue和小程序的两套机制，因此需要对两套机制进行关联。这里主要对mpvue的生命周期来进行
首先是外部脚本和行内脚本，对于异步加载的脚本，会导致竞争状态，使得出现未定义的错。
JS 的加载分为两个部分：下载和执行。 浏览器在执行 HTML 的时候如果遇到<script>时会停止页面的渲染，去下载和执行 js 的文件直接遇见</scirpt>会继续渲染页面。故浏览器在执行 js 文件的时候浏览器表现为一片空白，为了解决这个问题 ECMAScript 定义了 defer 和 async 两个属性用于控制 JS 的下载和执行。
本篇参考：salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容
2xx - 表示成功处理信息，如 200 - 成功处理请求，204 - 成功处理请求但没有返回内容
XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，当JavaScript 监测到请求的数据全部传输完成后就会触发该函数。
……如果加载失败怎么办？例如，这里没有这样的脚本（error 404）或者服务器宕机（不可用）。
1.DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。
本篇文章记录了学习微信小程序时遇到的一些问题和知识点，学习材料是coderwhy老师的视频。
写代码的时候，碰到一大堆的缩进、花括号是不是特别头疼？为什么会有这么多的标点符号，还有各种技术概念？能不能像写作一样，自由得书写？从形式上，代码比文章多的是格式，格式代表了对应的技术原理。文本分享一则关于「 同步 、异步、阻塞、非阻塞 」的技术概念，结合Javascript中的图片加载，介绍如何把异步的形式改写成同步的形式，更加优雅的书写我们的代码。
小程序一般需要用token，去识别用户身份，每次获取到token之后，再进行下一步操作。再获取到token之后，将token同步缓存 app.js:
该文介绍了如何使用modJS来加载模块，并解决了一些常见的问题。
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优
KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。
声明：本文为原创，作者为 对弈，转载时请保留本声明及附带文章链接：http://www.duiyi.xyz/%e5%8e%9f%e7%94%9fjs%e4%b8%8ejquery%e5%8a%a0%e8%bd%bd%e9%a1%b5%e9%9d%a2%e5%85%83%e7%b4%a0%e6%af%94%e8%be%83/
第三方的js文件，自己写的js文件，js越来越多了怎么办？ 提出问题： 1、js文件太多了，每个页面都写<script src="...">太麻烦。 2、如果路径变化了，或者js名称变化了怎么办？每个页面都改一遍吗？ 3、如何约束js文件的加载顺序？a.js定义了一个函数，b.js要调用，但是b.js先加载了，a.js还没加载完成，造成函数未定义，无法调用。 4、js文件的合并。开发阶段，js会分成多个文件，这样便于开发。但是成熟了之后会合并成一个文件。这样引用方式就会变化，原先引用一堆js，现在只需要引用
原则上来说，HTML在使用<script>标签加载外部脚本文件时，会顺序下载，顺序执行，并阻碍其他资源文件的下载，比如图片（当然，如今主流浏览器是可以实现JS和CSS文件并行下载）。
对于一个网页的性能和体验来讲，控制好请求发起的优先级是非常重要的，网络带宽是有限的，优先去加载重要的资源，让次要的资源延后，就可以让我们的网站体验提升一个台阶。
对于这些标签比如iframe 、img 、script标签，image对象等等，我们用的很多，都是在相应的元素加载完成之后执行的事件。下面我们讨论一下 window.onload、DOMContentLoaded的执行顺序问题。
采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理6个TCP链接问题。
我们通常会用CSP加强站点JS资源的执行限制，有效降低XSS攻击；我们通过HTTPS链接加密资源，减少站点资源劫持风险等等大量的前端安全方案。但你可能还没听说 Subresource Integrity (SRI) 子资源完整性校验。 本文将带你了解SRI是什么，能解决哪些安全风险，如何快速接入。同时，使用它又会带来哪些问题，以及浏览器的支持情况如何。 什么是SRI ？ SRI 是 Subresource Integrity 的缩写，可翻译为：子资源完整性，它也是由 Web 应用安全工作组（Web Ap
近期把团队的项目构建迁移到fis3，同时把模块加载器也由之前的requirejs切换到了modJS。
注意：学习本节内容的同学，请先把默认的 index.js文件和 index.wxml文件原有的代码删除进行学习
性能优化不单指优化一个页面的打开速度，在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化，大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中，能够让任何一个链路快一点，都可以被叫做性能优化。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
