Web运行环境总结

1. 页面加载过程

1.1 加载一个资源的过程

在浏览器地址栏输入URL

浏览器查看缓存(强缓存)

浏览器解析URL获取协议，主机，端口，path

浏览器组装一个HTTP（GET）请求报文

浏览器根据DNS服务器得要域名的IP地址

打开一个socket与目标IP地址，端口创建TCP连接

向这个IP的机器发送http/https请求

服务器收处处理并返回http请求

判断协商缓存

服务器将响应报文经过TCP链接发送回浏览器

关闭TCP链接

浏览器检查响应状态吗作出不一样处理

若是资源可缓存，进行缓存

浏览器获得返回的内容

1.2 浏览器渲染页面的过程

根据HTML结构生成DOM Tree

根据CSS生成CSSOM

将DOM和CSSOM整合成RenderTree（渲染树，比DOM树多了样式）

根据RenderTree开始渲染和展现

HTML解析器遇到没有async和defer的script时，会执行并阻塞渲染 （js可能会改变dom结构）

浏览器在Document对象上触发DOMContentLoaded事件

显示页面

图片加载完毕

调用onload

1.3 为何把css放在head中

在html渲染以前渲染css

若是css放在html元素后面，会先按没有css的状况渲染html，而后加载到css后再从新渲染html元素，这样会损耗性能。

1.4 为何要把js放在body的最下面

1.不会阻塞body中元素的渲染，能让页面更快出来

2.script能拿到全部的标签

1.5 图片

图片是异步请求，不会影响dom树的渲染

1.6 load,DOMContentLoaded

window.addEventListener('load',function(){
         //页面资源所有加载完成，包括图片视频
        });

        document.addEventListener('DOMContentLoaded',function(){
         //DOM 渲染完便可执行，图片视频尚未加载完
        });

• DOMContentLoaded : dom结构化完成之后
• load：dom 结构化以及静态资源所有加载完毕之后
• $(document).ready 底层是DOMContentLoaded函数
• $(window).load 底层是load函数
• $(function () {}) 是$(document).ready的缩写

var show = console.log.bind(console);

        show('观察脚本加载的顺序')

        document.addEventListener("DOMContentLoaded", function () {
            show('DOMContentLoaded回调')
        }, false);

        window.addEventListener("load", function () {
            show('load事件回调')
        }, false);


        show('脚本解析一');


        $(document).ready(function () {
            show('$(document).ready')
        })
        
        // 测试加载
        $(function () {
            show('脚本解析二');
        })


        $(window).load(function () {
            show('$(document).load');
        });

        show('脚本解析三');

1.7 重排Reflow

DOM结构中的元素都有本身的盒子，这些都须要浏览器根据各类样式来计算并根据计算结果来将元素放到他们该出现的位置，称为Reflow。

触发reflow的条件：

1.增删改dom节点

2.移动dom位置或者有动画

3.修改css样式

4.resize窗口或者滚动（移动端没有该问题）

1.8 重绘Repaint

页面要呈现的内容绘制在屏幕上。

DOM改动，CSS改动（判断页面呈现的内容有没有发生变化）

1.9 避免relow和repaint

1.尽可能用class来修改样式

若是要修改多个样式，每一个样式修改时都会出发reflow，能够将这些样式保存在一个class中，每次修改只reflow一次。

1. 将元素的position设置为absolute和fixed可使元素从DOM树结构中脱离出来独立的存在，而浏览器在须要渲染时只须要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今愈来愈多的Javascript动画方面尤为值得考虑。
2. 不要使用 table 布局，可能很小的一个小改动会形成整个 table 的从新布局