readystatechange

DOMContentLoaded、readystatechange、load、ready详谈

对前端同学而言,loade,unload,DOMContentLoaded等页面加载过程中会触发的事件肯定是都接触过,不过要是具体问各个事件的区别,我就不是那么能清晰的解答上来的了.正好刚刚在无阻塞脚本那看到了DOMContentLoaded事件,就来翻翻具体文档详细看一下各个事件吧.常言道温故而知新,让我们一起回头看一下触发时机先看下各个事件的触发时机(参考自MDN) DOMContentLoaded 当初始html文档完全加载并解析之后触发,无需等待样式.图片.子frame结束.作为明显…

readystatechange事件

IE为DOM文档中的某些部分readystatechange事件. 这个事件的目的是提供与文档或元素的加载状态有关的信息,但是这个事件的行为有时候也很难预测. 支持readystatechange事件的每一个对象都有一个readyState属: uninitialized(未初始化):对象存在但尚未初始化. loading(正在加载):对象正在加载数据 loaded(加载完毕):对象加载数据完成 interactive(交互):可以操作对象了,但还没有完全加载 complete(完成):对象已经…

// alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); } } DOMContentLoaded readystatechange load beforeunload unload DOMContentLoaded DOM文档加载的步骤为解析HTML结构. 加…

onload;readystatechange;DOMContentLoaded事件

当文档的 readyState 属性发生改变时,会触发 readystatechange 事件. onload 事件会在页面或图像加载完成后立即发生当纯HTML被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载. <div class="controls"> <button id="reload" type="button">Reload</button&…

Ajax实现原理，代码封装

都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和方法事件以便于脚本处理和控制HTTP的请求和响应. 下面来认识几个属性:我不用官方的话来解释,希望大家能一看就知道是什么意思 readyState 属性创建XMLHttpRequest对象(下面称ajax对象)后,readyState属性则表示当前对象处于一个什么状态 ,一共5个状态 0 未初始化状态…

JavaScript进阶之路——认识和使用Promise，重构你的Js代码

一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半年的单身生活.大家一起加油~~ 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深入人心.在设计API的时候,不管是浏览器厂商还是SDK开发商亦或是各种类库的作者,基本上都已经遵循着callback的套路.近几年随着JavaScript开发模式的逐渐成…

Javascript 相关文章 —— 性能

在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用概览无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write().例如清单 1 清单 1 JavaScrip…

JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

1.跨域指的是什么? URL 说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端口不允许 http://www.a.com/a.jshttps://www.a.com/b.js…

高性能JavaScript--加载和执行(简要学习笔记一)

1.多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行.所以同一时刻只能做同一件事.JavaScript执行过程耗时越久,浏览器等待相应的时间就越长. 2.<script>标签用来加载出现在<head>中的外链JavaScript文件,紧挨着<link>标签用来加载外部css文件或者其他页面元素.理论上来说,把与样式和行为有关的脚本放在一起,并先加载他们,这样有助于确保页面的渲染和交互的正确性.但这样会带来严重的性能问题. 3.由于脚本阻塞…

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.…

javascript性能优化：创建javascript无阻塞脚本

javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来处理ui界面刷新和JavaScript脚本执行, 这意味着在加载javascript文件的时候不能同时做任何其他的事情. 在加载的同时造成了用户交互阻塞: 理论上来说,把样式与行为有关的脚本放在一起率先加载,这样有利于确保正确的用户体验,例如下面的代码: <!DOCTYPE html…

DOM加载过程中ready和load的区别

在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有async或defer属性,就暂停解析,开始执行脚本和CSS样式 3. HTML文档解析完成 4. 浏览器等待图片.样式表.字体文件等外部资源加载完成在这其中,有两个阶段: ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): load,表示页面包含图片等外部文件在内的所有元素都加载完成. DOM…

【转】封装原生JS实现Ajax

function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE6 及以下 var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP']; for (var i = 0,len = versions.len…

高性能的JavaScript--加载和执行

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

Ajax浅学习

写在前面:响应事件 function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, function () { fn.call(obj); }); } } 核心 Ajax技术核心是XMLHttpRequest对象,简称XHR.如果是IE6及…

Ajax基础（小猫）

Ajax 1.什么是Ajax: 不用刷新整个页面便可与服务器通讯的办法 2.Ajax的基本使用 2.1XMLHttpRequest l XMLHttpRequest对象 XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做:这样既减轻了服务器负担又加快了响应速度.缩短了用户等待的时间. 2.2方法的使用 l 利用XMLHttpRequest 实例与服务器进…

6_PHP AJAX MYSQL

XAMPP套装软件: 包含Apache.MySQL.PHP等多个开源软件的集合. https://www.apachefriends.org/zh_cn/index.html 监听完整相应消息: Wireshark启动--设置监听网卡--浏览器中输入要访问的资源地址,捕获相应消息,查看完整内容 JS和PHP语言的最本质上的区别? JS属于"静态网页技术",在客户端浏览器中执行--客户端技术: PHP属于"动态网页技术",在服务器端运行--服务器端技术. Server…

深入理解ajax系列第一篇——XHR对象

× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验.虽然名字中包含XML,但ajax通信与数据格式无关.下面将详细介绍ajax的内容创建 ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来…

JavaScript阻塞剖析与改善

一.阻塞特性 <高性能JavaScript>一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度. 说到无阻塞加载JavaScript要点,我们就有必要知道,为什么在html中不管是内联JavaScript还是外联,会影响到页面的性能? 原因是:JavaScript是单线程,在JavaScript运行时其他的事情不能被浏览器处理.事实上,大多数浏览器使用单线程处理UI更新和JavaScript运行等多个任务,而同…

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有…

在web上逐行输出较大的txt文件

在某些场景下,需要在web上展示一些日志文件,这些日志文件是放在文件服务器上的一些txt. 当日志文件很大时,下载日志会导致页面长时间卡住,一直在loading状态,而且下载完日志之后分析日志并生成dom,瞬间大量的dom渲染可能导致页面崩溃. 于是想着优化一下日志的输出方式,开始下载即在页面上一行一行打印日志,就像一些IDE中输出程序的编译过程一样. 最终实现的方法如下: 在下载文件的时候,让请求过一层代理,代理写输出流的时候分段输出: int l; byte[] buffer = new…

DOMContentLoaded实现

IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断是否构建好DOM树:如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕). 所以可以采用这种方式: /** * 实现DomContentLoaded的兼容性 * @param ca…

javascript - 封装原生js实现ajax

1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { if(window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new XMLHttpRequest(); } else if(window.ActiveXObject) { //IE6 及以下 var versions…

js跨域那些事

原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表:…

BOM与事件

PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都有各自独立的WINDOW对象,并使得它们可以彼此通信,window对象是BOM的核心.为了访问HTML文档的入口,window对象包含了document对象,反正document对象掌握着用户正在浏览的整个HTML页面.还有其他功能,window对象包含了LOCATION和HISTORY对象,一些交…

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一传统事件绑定的问题传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme…

XHR——XMLHttpRquest对象

创建XMLHttpRequest对象与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP function XHR() { var xhr; try {xhr = new XM…

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH…

JS：XML

一 IE中的XML //1.创建XMLDOM对象 //创建XMLDOM对象 var xmlDom = new ActiveXObject("MSXML2.DOMDocument.6.0"); //IE9之前使用 function createXMLDOM () { var version = [ 'MSXML2.DOMDocument.6.0', 'MSXML2.DOMDocument.3.0', 'MSXML2.DOMDocument' ]; for(var i = 0; i<…

AjaxStudyNote

AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxAjax技术的产生Ajax被认为是(Asynchronous JavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 不用刷新整个页面便可与服务器通讯的办法:FlashJava applet框架:如果使用一组框架构造了一个网页,可以只更新其…

【readystatechange】的更多相关文章