- 页面加载过程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事件显示页面图片加载完毕调用onload1.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 重排ReflowDOM结构中的元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果来将元素放到他们该出现的位置，称为Reflow。触发reflow的条件：1.增删改dom节点2.移动dom位置或者有动画3.修改css样式4.resize窗口或者滚动（移动端没有该问题）1.8 重绘Repaint页面要呈现的内容绘制在屏幕上。DOM改动，CSS改动（判断页面呈现的内容有没有发生变化）1.9 避免relow和repaint1.尽量用class来修改样式如果要修改多个样式，每个样式修改时都会出发reflow，可以将这些样式保存在一个class中，每次修改只reflow一次。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局