社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
我们知道从URL输入到页面渲染是一个比较复杂且耗时的过程,这个过程就从HTTP请求开始,比如请求html、css、js和图片。
一个完整的HTTP请求会经历DNS查找->TCP3次握手->浏览器发送HTTP请求->服务器接收请求->服务器处理请求并返回响应->浏览器接收响应。
减少请求的场景:
HTTP2的优势:
当浏览器发起跨域请求时,非简单请求会发起一次预检(也就是options请求),简单请求则不会。
MDN: 跨域资源共享
客户端渲染:获取html文件,根据需要再下载js等文件,再运行文件,生成DOM进行渲染
服务端渲染:服务端只返回html文件,客户端只需要解析html文件。服务端渲染主要针对首屏显示速度有强需求的场景,不过这样会增大服务器的压力。
CDN(内容分发网络)是一组分布在多个不同地理位置的web服务器。
我们知道当被请求资源的服务器离用户越远,网络传输耗时越久,CDN就是为了解决这一问题,在多个位置部署服务器,让用户离服务器更近,从而减少请求时间。
浏览器渲染进程的GUI渲染线程和JS引擎线程是互斥的,因此,当浏览器在处理js代码的时候,会阻塞html的解析和渲染,如果把js放在底部,浏览器可以优先解析前面的html,html中的外部资源引用也不会被底部的js阻塞发送请求的时机,css放在头部,方便解析成cssom。
Webkit渲染引擎流程如下图:
Gecko渲染引擎流程如下图:
浏览器先查询浏览器缓存数据表,没有a的缓存信息,就向服务器发送请求a,浏览器返回a和a的缓存规则,浏览器把a和a的缓存规则存入缓存表
浏览器先查询浏览器缓存数据表,命中协商缓存,返回etag和last-modified,浏览器在request header中加上etag和last-modified,服务器判断得知这个资源未修改,返回状态码304,客户端从本地缓存中读取资源
webpack用插件压缩文件:
服务器也可以通过向HTTP请求头中的Accept-Encoding添加gzip标识来开启这一功能。
<img data-src='' />
重绘不一定导致重排,重排一定导致重绘。
事件委托利用了事件冒泡机制,子元素的某个事件会冒泡到父元素的同名事件,因此,可以指定给父元素一个事件处理程序,就可以管理所有子元素的这类事件了。
使用事件委托可以节省内存,因为,不用为所有的子元素都指定这个事件,按钮事件、多数鼠标事件、键盘事件都可以采用事件委托来做
如果页面中有一个动画或渐变效果或用户正在滚动页面,那么浏览器渲染动画或页面的每一帧的速率也应该和设备的刷新频率(60次/秒)保持一致。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!