2020-09-02-add-brower-render

180 阅读1分钟

如何加快页面渲染速度,都有哪些方式?

1.静态资源的优化

主要是减少静态资源的加载时间,只要包括html、js、css和图片

a.减少http请求数:合并js、css、制作雪碧图以及使用http缓存

b.减少资源的大小:压缩图片、压缩文件、小兔使用base64编码

c.异步组件和图片懒加载

d.CDN加速和缓存(bootCND):客户端可通过最佳的网络链路加载静态资源,提高访问的速度和成功率。(CDN:通过在网络各处放置节点服务器构成的一层智能虚拟网络,可将用户的请求重新导向离用户最近的服务节点上)

2.接口访问的优化

a.http持久连接(Conention:keep-alive)

b.后端优化和并请求(比如在进入一个商品详情页的时候后端会提供一个接口获取商品的基本信息,然后当用户点击加入购物车时)

c.数据接口缓存到localStorage,减少请求

3.页面渲染速度的优化

a.由于浏览器的js引擎线程和GUI渲染线程是互斥的,所以在执行js的时候会阻塞它的渲染,所以一般会将css放到顶部,优先渲染,js在底部

b.减少dom操作

c.使用虚拟dom渲染方案,做到最小化操纵真实的dom

d.事件代理:利用事件冒泡原理,把函数注册到父级元素上

e.减少页面的重绘和回流