开始的流程：

　　　　1、先发请求给DNS进行域名解析获取服务器IP
　　　　2、向步骤1获取的服务器IP发送HTTP请求
　　　　//服务器的内部处理
　　　　3、服务器接收请求后，解析主机头对应的站点，把请求传送给站点
　　　　//返回http
　　　　4、站点接受转发的请求作出回应并返回HTTP回应
　　　　//解析头部
　　　　5、浏览器接到返回的HTTP回应，解析头信息和HTML主体
　　　　6、根据解析的头信息设置必要的数据，如cookie，编码，语言等声明的处理
　　　　7、在6的基础上对HTML主体进行渲染展现;

　　这个是别人的并发测试；

　　

　　nodeJS的代码：　

var express = require('express');

var path = require('path');

var favicon = require('serve-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

var routes = require('./routes/index');

var users = require('./routes/users');

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

// uncomment after placing your favicon in /public

//app.use(favicon(__dirname + '/public/favicon.ico'));

app.use(logger('dev'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(cookieParser());

app.use('/', function(req, res, next) {

    setTimeout(function(){

        next();

    },10000);

});

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

app.use('/users', users);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

    var err = new Error('Not Found');

    err.status = 404;

    next(err);

});

// error handlers

// development error handler

// will print stacktrace

if (app.get('env') === 'development') {

    app.use(function(err, req, res, next) {

        res.status(err.status || 500);

        res.render('error', {

            message: err.message,

            error: err

        });

    });

}

// production error handler

// no stacktraces leaked to user

app.use(function(err, req, res, next) {

    res.status(err.status || 500);

    res.render('error', {

        message: err.message,

        error: {}

    });

});

require("http").createServer(app).listen(3000);

module.exports = app;

　　我自己测试了下，chrome的结果是6个，对于图片chrome会先请求加载一个， 后面再一个个加载， 目测一个域名下最多有6个是对的：

　　FF下的结果也一样，不过对于图片请求处理和chrome有点区别：

　　

　　因为浏览器的并发也是有最大值的， 所以把服务器的图片放到同服务器的的二级域名下，那么就可以突破浏览器6个的并发限制， 请求会变成N倍,是hack ，已亲测;

　

　　首先，浏览器要把当前界面进行unload， unload的时间要看当前界面的HTML;

　　然后，浏览器从DOM开头由上到下步步渲染，link以及script依次加载和执行绘制, 此时的document.readyState为loading或者是interactive, 在线测试地址；

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

</head>

<body>

<script src="js.js"></script>

<script>

    document.write("<br>"+"执行内部js"+ window.performance.now());

</script>

</body>

　　img，link或者是script标签都是并行下载，但是link和script一开始执行就会阻塞浏览器的渲染；（而且此时的script标签中可以使用document.write往dom中写入数据;）

　　如果link或者script都是动态生成的话，他们都是异步加载，异步执行， js可能在link之前或者之后执行，在线测试地址：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JS Bin</title>

</head>

<body>

<p style="color:#f00">

    红色的P标签：

</p>

<script>

    var p = document.getElementsByTagName("p")[0];

    document.writeln( window.getComputedStyle(p,false)["color"] );

</script>

<script>

    var link = document.createElement('link');

    link.href = "p-green.css";

    link.rel = "stylesheet";

    document.head.appendChild(link);

    var script = document.createElement('script');

    script.src = "p-green.js";

    document.head.appendChild(script);

</script>

</body>

</html>

　　上图的代码执行后的有两种情况：

         

　　动态生成的script标签也是异步的（并行下载，并行执行），点击查看demo；

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JS Bin</title>

</head>

<body>

<script>

    window.onload = function() {

        alert("加载好了;")

    };

    for(var i=0;i<5;i++) {

        var sc = document.createElement("script");

        sc.src="js"+i+".js";

        document.head.appendChild(sc);

    };

</script>

</body>

</html

　　script是顺序添加到DOM中，但是没有按照先后顺序；

　　如果script是异步的也就是有一个async属性（IE中为defer）属性或者是动态生成的， 那么这些js会在DOMContentLoaded和onload之前执行；

　　当界面中的dom以及渲染成树形了，那么此时document.readyState 就会变成compelete, 触发DOMContentLoaded的事件(DOM3事件);

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

test

<iframe src="iframe.html"></iframe>

<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2723971161,380468241&fm=58" />

<script>

    document.onreadystatechange = function() {

        console.log(document.readyState);

        if(document.readyState === "complete") {

            alert("complete");

        };

    };

    window.onload = function() {

        alert("onload");

    };

    window.frames[0].onload = function() {

        alert("iframeLoad");

    };

    document.images[0].onload = function() {

        alert("imgLoad")

    };

    document.addEventListener&&document.addEventListener("DOMContentLoaded",function() {

        alert("DOMContentLoaded")

    })

</script>

</body>

</html>

　　标准浏览器的执行顺序为 "DOMContentLoaded", "imgLoad", "iframeLoad",  "complete",  "load";

　　DOMContentLoaded以后会下载图片， iframe等等一些需要网络的节点， 最后会触发onload事件, 咕~~(╯﹏╰)b;

　　onload一旦执行，那么浏览器就从加载阶段进入了事件驱动阶段了，如果js有很多，那么在界面加载的时候会很慢很慢， 可能要很久，用户才能对看到界面或者进行操作， 优化加载速度可以参考这里；

 　  额外也测试了几个网站的DOM加载完毕和onload的时间， 加载快的确体验好点；

　　www.qq.com  加载DOMContentLoaded用了1.5--2.0秒钟，onload触发用了6到10秒，

　　www.baidu.com 加载DOMContentLoaded用了1.5--2.0秒钟，onload触发用了2.5--3.0秒，

　　www.cnblogs.com 加载DOMContentLoaded用了0.4秒钟，onload触发用了1.5--2.0秒(中国销量遥遥领先)，

　　www.sohu.com 加载DOMContentLoaded用了2.5--3.0秒钟，onload触发用了6-7秒，

　　参考了知乎的回答： openIT ;

　　在线获取浏览器最大连接数的测试地址： openIT (不好用);

　　两年前的资料：openIT;

　　HTTP1.0协议HTTP1.1协议的区别，openIT; (HTTP1.0只能玩短连接， HTTP1.1可以玩长连接)

　　参考地址：http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/

　　老外的在线测试并发网站：http://stevesouders.com/hpws/parallel-downloads.php?t=1429612958 （╮(╯﹏╰）╭）

　　本屌神马都没有测试出来：http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/

　　chrome的timeline是好东西: , 可以看到dom加载的时间线渲染js执行的时间重绘等, 然后做对应的优化, chrome使用方法，点击打开

　　document.readyState的资料，打开带我飞；

　　UI线程的阻塞 ，又一个大神的 一篇好文;

　　面试题：

var ver = "global";

function test() {

    var ver = "1111";

    var fun = new Function("arg","console.log(ver); console.log(arg); return arg;") ;

    fun("localVar");

};

test();

  function test() {

        var x = 1;

        with ({x: 2}) {

            eval('function foo() { console.log(x); }');

            eval('var bar = function() { console.log(x); }');

        }

        foo();

        bar();

    }

    test();

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

WEB界面onload前的加载流程❤❤的更多相关文章

  1. Tomcat启动过程原理详解 -- 非常的报错：涉及了2个web.xml等文件的加载流程

    Tomcat启动过程原理详解 发表于: Tomcat, Web Server, 旧文存档 | 作者: 谋万世全局者 标签: Tomcat,原理,启动过程,详解 基于Java的Web 应用程序是 ser ...

  2. Cocos Creator 资源加载流程剖析【二】——Download部分

    Download流程的处理由Downloader这个pipe负责(downloader.js),Downloader提供了各种资源的"下载"方式--即如何获取文件内容,有从网络获取 ...

  3. Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

    这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...

  4. 8. Android加载流程（打包与启动）

    移动安全的学习离不开对Android加载流程的分析,包括Android虚拟机,Android打包,启动流程等... 这篇文章  就对Android的一些基本加载进行学习. Android虚拟机 And ...

  5. java面试记录二：spring加载流程、springmvc请求流程、spring事务失效、synchronized和volatile、JMM和JVM模型、二分查找的实现、垃圾收集器、控制台顺序打印ABC的三种线程实现

    注:部分答案引用网络文章 简答题 1.Spring项目启动后的加载流程 (1)使用spring框架的web项目,在tomcat下,是根据web.xml来启动的.web.xml中负责配置启动spring ...

  6. angular源码分析：angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  7. android源码解析（十七）-->Activity布局加载流程

    版权声明:本文为博主原创文章,未经博主允许不得转载. 好吧,终于要开始讲讲Activity的布局加载流程了,大家都知道在Android体系中Activity扮演了一个界面展示的角色,这也是它与andr ...

  8. CI加载流程小结

    无聊,决定水一把. CI(CodeIgniter)是我最早接触的一个框架,到现在也只是用了其中一点零碎的方法.一直想对其流程做个小结,却总是因各种各样的“理由”挨着.看见别人图表齐上阵,没那耐心,就从 ...

  9. Android5.1图库Gallery2代码分析数据加载流程

    图片数据加载流程. Gallery---->GalleryActivity------>AlbumSetPage------->AlbumPage--------->Photo ...

随机推荐

  1. POJ 3608 Bridge Across Islands --凸包间距离，旋转卡壳

    题意: 给你两个凸包,求其最短距离. 解法: POJ 我真的是弄不懂了,也不说一声点就是按顺时针给出的,不用调整点顺序. 还是说数据水了,没出乱给点或给逆时针点的数据呢..我直接默认顺时针给的点居然A ...

  2. 洛谷P1141 01迷宫

    题目描述 有一个仅由数字0与1组成的n×n格迷宫.若你位于一格0上,那么你可以移动到相邻4格中的某一格1上,同样若你位于一格1上,那么你可以移动到相邻4格中的某一格0上. 你的任务是:对于给定的迷宫, ...

  3. [No000053]我25岁了，是应该继续挣钱，还是选择自己的爱好？--正好庆祝自己25岁生日

    你所问的问题正是问题所在.停止做出重大决策,专注于缩小你想到达的地位与你之间的差距. 成功的生活并非由简单而鲜明的决定组成,它们更像这幅图: 但悲伤的是,太多人的状态类似于这幅图: 我知道这听上去很显 ...

  4. 如何在Kali Linux下编译Windows Exploit

    前言 微软的Windows在企业或是个人应用领域占据着最大的市场份额,在渗透测试过程中你会经常遇到很多Windows的工作站和服务器.另一方面,大多数渗透测试人员主要使用基于Linux的发行版渗透测试 ...

  5. 微信v3 JSAPI最新接口错误 get_brand_wcpay_request:fail

    WxPay.JsApiPay.php文件下 原始接口代码 /** * * 获取jsapi支付的参数 * @param array $UnifiedOrderResult 统一支付接口返回的数据 * @ ...

  6. 深入运用js

    1,eval()函数 这个函数是获取参数的字符串,并将其作为js来处理,所以这里就有可能有人用这个来搞破坏(比如注入JS脚本文件等),所以最好的是方法是尽量少用,或者可以用new function() ...

  7. PHP代码20个实用技巧（转）

    这些技巧特别是封装的,相对路径的还是挺好的,本身来自微信公众号,但是我担心以后删除,所以在我的博客上备份一下(微信公众号为:菜鸟教程) 在这篇文章中我们将看看一些关于PHP开发有用的提示和技巧,可以用 ...

  8. BZOJ 1024 【SCOI2009】 生日快乐

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  9. 1002. A+B for Polynomials

    1002. A+B for Polynomials (25) This time, you are supposed to find A+B where A and B are two polynom ...

  10. 在windows下安装配置Ulipad

    在windows下安装配置Ulipad 今天推荐一款轻便的文本编辑器Ulipad,用来写一些小的Python脚本非常方便. Ulipad下载地址: https://github.com/limodou ...