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>是可以实现这样的效果的
<video autoplay loop muted playsinline> <source src="my-animation.webm" type="video/webm"> <source src="my-animation.mp4" type="video/mp4"> </video>
技巧4 预加载关键的请求
比如你的页面加载了一个js文件，这个js文件又需要加载别的JS和CSS文件，整个页面其实需要等到所有这些资源加载完成才能显示。我们可以通过以下代码让浏览器早一点加载，你可以通过preload来实现：
<link rel="preload" href="style.css" as="style">
技巧5 不要使用多页面的重定向
当浏览器请求了重定向的资源的时候，服务器会返回一个HTTP的response，这个时候，浏览器需要再使用一个HTTP到新的位置去请求资源，这样一来，因为网络的延迟必然会造成性能的下降。
技巧6 预连接到需要的内容
使用preconnect关键字，可以让浏览器今早地和一些重要的第三方建立连接：
<link rel="preconnect" href="https://www.google.com">
有了这个关键字之后，浏览器就知道你是希望今早启动这个进程的。
技巧7 对图像进行有效编码
使用86级压缩JPEG就足够了，你还可以使用下面这些方法:
- 压缩图片
- 使用图片CDN
- 避免GIF
- 惰性加载图片
技巧8 Minify JS文件
所谓的minification就是把代码中的空格以及一些没有别要的代码去除掉，从而让文件的大小变小。有了minify之后，你文件的加载和解析时间都会变少。
技巧9 minify CSS文件
CSS文件中的空格其实比别的文件还要多，所以minify CSS文件，必然会节约很多空间。另外还有一些小的技巧，比如把颜色的值用一个小的值来替代，比如#000000和#000是一样的，但是大小则变小了。
技巧10 调整图像大小
众所周知，我们的网页其实最大的资源大概就是图像了，很多时候他比文字文件大多了。所以永远不要加载比屏幕上显示的还大的图片，你可以这样做：
- 使用响应式图像
- 使用图片CDN
- 使用SVG而不是icon
好了，希望这篇文章能帮你在优化网站的道路上找到一些新的灵感。
参考文章：https://dev.to/cmcodes/my-website-now-loads-in-less-than-2-sec-here-s-how-i-did-it-hoj
Recent Comments