1秒加载的网站,你需要做到这些
网站加载的速度一直都是一个很值得研究的性能问题,这里我们提供一些小技巧,我们曾使用这些技巧让一个网站的加载速度只要0.8s,lighthouse的性能得分到97分。 技巧1 不要使用大的DOM tree 假如你的DOM tree非常大,那么显然性能是不会太好的。 Memory性能 使用一个通用的query选择器比如document.querySelectorAll(‘li’),这样能欧股使用memory来存储多个节点。 网络效率和加载性能 一个有很多节点的大的DOM tree(尤其包含很多开始并看不到的部分),必然会加大加载时间。 运行时的性能 当用户和网页交互的时候,浏览器需要不停计算节点的位置和style,那些复杂的style必然会导致rendering变慢。 技巧2 不要使用很多的网络加载 你的网页的总加载大小应该小于1600KB,为了达到这个效果,你可以做下面这些: 在需要的地方才发请求 minify和压缩网络加载的内容 把JPEG的压缩级别设置到85 技巧3 不用使用GIFs 假如你想使用动态的图,那么不要使用GIF,使用MPEG4/WebM格式吧。 假如你需要下面这些性能: 自动播放 不停循环 没有声音 其实HTML5中<video>是可以实现这样的效果的 技巧4 预加载关键的请求 比如你的页面加载了一个js文件,这个js文件又需要加载别的JS和CSS文件,整个页面其实需要等到所有这些资源加载完成才能显示。我们可以通过以下代码让浏览器早一点加载,你可以通过preload来实现: 技巧5 不要使用多页面的重定向 当浏览器请求了重定向的资源的时候,服务器会返回一个HTTP的response,这个时候,浏览器需要再使用一个HTTP到新的位置去请求资源,这样一来,因为网络的延迟必然会造成性能的下降。 技巧6...