DNS
TCP 三次握手 四次握手
keep alive
http/https
浏览器渲染原理
CDN
懒加载
预加载
按需加载
面试题1：
web性能优化有哪些常见手段
- cdn加速 开启gzip
面试题2：
如何解决单页应用首屏加载慢的问题？
面试题3：
为什么要把<script></script>标签放在body最后。
面试题4
script标签中的 asycn 和 defer 有什么区别？
面试题5
http1.1 和 http1.2 有什么区别
面试题6
http缓存怎么做？
3次握手详解
SYN是synchronize(同步）的缩写。这里指的是同步信息的意思
ACK是 acknowledge （知道，获悉）的意思。这里指的是获悉，响应的意思
- 浏览器发送一个同步信息的syn(x)请求
- 服务器回复一个响应ack(x+1),同时也发送一个同步信息syn(y)的请求
- 浏览器收到后也响应这个请求发送ack(y+1)
- 连接建立成功。然后浏览器开始传输数据。
4次挥手详解：
FIN 是finish（完成，结束）的意思 - 浏览器发送FIN(x)给服务器
- 服务器响应ACK(x+1);然后服务器检查下是否接收完数据。
- 服务器发送FIN(y),表示接收完数据可以结束了
4.浏览器发送ACK(y+1).表示收到了这句话。
等待一段时间后，确认没有错误，断开连接
一次http请求与响应
1.请求报文
http动词 URL HTTP/1.1 // 动词 GET POST HEAD PUT DELETE OPTIONS PATCH TRACE CONNECT
Accept:text/html // 期待返回html
Host:baidu.com // 域名
Connection:keep-alive
Content-Type:application/json // 请求的消息体格式为json
...其他请求头字段
/r/n 回车换行
{“name”:"xxd"}
- 响应报文
HTTP/1.1 200 成功
Connection:keep-alive
Content-Type:text/html
Content-Length:224
Content-Encoding:gzip
Set-Cookie:session_id=xxx;exprice=Wed, 21 Oct 2015 07:28:00 GMT
Date:系统时间
...
/r/n
{"name":"yyd"}
一、
- 下载和执行js为什么会阻塞html解析。
因为 html的解析是一行行顺序向下进行的，一旦遇到script标签，就会去下载js,下载js的构成中会去执行js.
而执行js的操作可能会修改dom树元素。如果不等待js执行完毕，直接构建并渲染dom树，则构建并渲染的DOM树是错误的。 - 在script标签上加async，会使得js的下载执行变成异步的，和html的解析完全不相干。
- 在script标签上加defer，会使得js的下载执行变成异步的.但是js文件的执行是在html解析之后，DOMContentLoaded 事件触发之前完成。
所以推荐
1.对于操作或者以来DOM树的js脚本在script标签上加defer：<script defer src='js1.js'></script>
2.对于和DOM树完全不相关js脚本在script标签上加async：<script defer src='js1.js'></script>。async有一个问题就是如果js下载过快，js执行会堵塞html解析。
实际工作中一般推荐使用defer.
二、下载和解析css为什么会阻塞js执行？
js执行可能需要获取div的样式，所以必须等css解析完成。
三、浏览器渲染html过程
image.png
reflow 重新布局 repaint 重新绘制
在 html解析完，css解析完 js执行完，就进入HTML渲染环节
此时浏览器把css树和dom树合并成一颗渲染树。然后进行布局layout 绘制paint 合成composite
由此我们知道改变div的宽高会引起重新布局reflow和repaint重绘。
改变div的颜色和阴影，也会引起重绘。
所以为了避免这些性能耗费，尽量要减少这些js操作。
