delphi10.3 加载gif图片不动_1秒加载的网站，你需要做到这些

点上面“东哥IT笔记”，关注并星标

每天一篇业界最新技术分享

---

网站加载的速度一直都是一个很值得研究的性能问题，这里我们提供一些小技巧，我们曾使用这些技巧让一个网站的加载速度只要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中

  "my-animation.webm"   "my-animation.mp4" 

技巧4 预加载关键的请求

比如你的页面加载了一个js文件，这个js文件又需要加载别的JS和CSS文件，整个页面其实需要等到所有这些资源加载完成才能显示。我们可以通过以下代码让浏览器早一点加载，你可以通过preload来实现：

"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

好了，希望这篇文章能帮你在优化网站的道路上找到一些新的灵感。