web前端性能优化 -- 从浏览器输入url到页面加载完成全过程解析
本文将从浏览器输入url到页面加载完成中经历的各个阶段来探讨web前端性能可以优化的点
1、浏览器输入URL并按下回车
无优化点
2、浏览器查找当前URL是否存在缓存
彻底弄懂HTTP缓存机制及原理
传送门：https://www.cnblogs.com/chenq...
优化点
服务器对静态资源设置浏览器缓存信息，浏览器在有缓存的情况下直接从本地读取资源。
3、DNS域名解析
地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。
顺便介绍下，无优化点
4、TCP连接
DNS解析后得到了服务器的ip，接下来就是和服务器建立起连接，这通过TCP的三次握手完成。
具体为：
浏览器：你好~你在吗~我能和你聊会天吗
服务器：嗯！我在~我们聊会吧~
浏览器：好的，那我们开始咯
顺便介绍下，无优化点，顺便再说下四次告别
TCP连接后数据的传输是双向的，那么当浏览器不想说话了，就会发出中止连接的信号标志，服务器收到后会回一个确认标志给浏览器，这时浏览器就不能再向服务器传输数据了，但是还可以发送信号。为了对服务器的尊重，等服务器把话说完后才会发一个结束标志给浏览器，这时浏览器知道服务器也向自己传输完数据了，回一个确认标志过去，才真正结束这次TCP连接。
5、浏览器向服务器发送HTTP请求
完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。缓存信息是存储在请求头中，在阶段二上的连接有介绍。
优化点
减少请求次数
- 合并外部请求的js、css文件
- 对icon文件进行处理。运用CSS精灵合并处理多个icon文件、运用图标字体、把小图标转为base64等
6、浏览器接收响应体
服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。
优化点
压缩响应体
- 对请求的文件进行打包（webpack），减少文件体积
7、页面渲染
页面是如何渲染的
传送门： https://www.cnblogs.com/tootw...
js的影响
js是会阻塞页面渲染的，那么解决方法有很多，可以把js放在body的底部，或者是异步加载js。
同步异步加载详解传送门：https://blog.csdn.net/qq_3498...
浅谈script标签的defer和async传送门：https://segmentfault.com/a/11...
css的影响
前端页面渲染时会根据DOM结构生成一个DOM树,然后加上CSS样式生成渲染树。如果CSS文件放在<head>标签中，则CSS RuleTree会先于DOM树完成构建，之后浏览器就可以边构建DOM树边完成渲染；反之，CSS文件放在所有页面标签之后，比如<body/>之前，那么当DOM树构建完成了，渲染树才构建，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。而且页面还可能会出现闪跳的感觉，或者白屏或者布局混乱或者样式很丑，直到CSS加载完成，页面重绘才能恢复正常。因此，一般来讲，css标签应放在标签之间。但如果css文件较大，会让首页白屏时间更长，所以并不是说把css都放顶部是一个完美的方法。权衡利弊，应该把必须的css（js）放顶部，把不那么重要的css（js）放底部。--------------------- 作者：JiajiaAz 来源：CSDN 原文：https://blog.csdn.net/qq_3265...
优化点
图片懒加载
概念：
访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。方法：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。
1）懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素“data-url”属性里。
2）页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-url的值取出来存放到src中。
vue/react项目页面渲染优化
在vue或者react的项目下，怎么解决页面渲染问题呢，毕竟初始的html就是一个空白页面，页面渲染全靠js的render，如果这个入口js过大，必然会导致页面白屏时间过长。
如果可以对入口的js进行代码分割，把后期才会用到的js先独立出来，等用时再引入那么就可以大大减少初始js的体积了，首屏页面渲染起来自然也快。
异步加载js的概念
<button>click to load js</button>
<script>
document.querySelector('button').onclick = () => {
let loadJs = document.createElement('script')
loadJs.src = './load.js'
document.body.appendChild(loadJs)
loadJs.onload = () => {
alert("finish loading!")
}
}
</script>嗯简单来说原理就是这么实现的，设置个触发点，触发后创建个src为需要引进js路径的script Dom，然后设置下加载后的回调函数..
webpack上的实现方法
写在主入口main.js中