解题过程：
1. 解析url，去域名系统里匹配IP（域名是真实IP的映射）
- 解析url过程（例：https://www.baidu.com）: https —— 传输协议， www —— 服务器，baidu.com —— 域名
2.如果是第二次访问某个网址，会先去浏览缓存里找是否有这个url，找到对应IP
3.浏览器与网站建立链接 （TCP三次握手，期间不携带任何真实数据）
4.请求数据
5.渲染页面（详细过程如图）
TCP断开连接（四次挥手）
2. css 加载会造成阻塞吗 ？
如以上图，可知：
CSS加载不会阻塞DOM解析
CSS加载会DOM渲染
CSS会阻塞JS执行
3. 常见的性能优化策略（面向加载）
a. 减少http请求(精灵图，雪碧图，CSS、js文件的合并，用CSS代替图片)
b. 缩减文件大小(资源压缩，webpack，GZip压缩，图片压缩)
c. CDN ( 大图加载，大文件，类库)
d. http2
e. SSR服务端渲染(vue)，预渲染...
f. 懒加载，减少首屏加载量
g. 减少回流，使用定位等，对于操作量比较大的dom，用文档碎片去做（虚拟dom原理）
h. 缓存（配置cache文件）
4. 图片懒加载实现原理
实现原理：即判断当前图片是否在当前视口中，如果是则加载，当滚动条滚动的时候，加上滚动条的距离，继续判断。
详见代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } </style> </head> <body> <img src="./img2/timg.gif" data-src="./img2/time.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time2.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time3.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time4.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time5.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time6.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time7.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time8.jpg" alt=""> <img src="./img2/timg.gif" data-src="./img2/time9.jpg" alt=""> <script> let num = document.getElementsByTagName('img').length; // 9 let img = document.getElementsByTagName('img'); let n = 0; lazyload(); window.onscroll = lazyload; function lazyload(){ // 可见区域高度 let seeHeight = document.documentElement.clientHeight; // 滚动条距离顶部的高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = n; i < num; i++){ // 是否在当前视口之内 if(img[i].offsetTop < seeHeight + scrollTop){ if(img[i].getAttribute("src") == "./img2/timg.gif"){ // 替换 img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } </script> </body> </html>
