如何建设高性能网站

发布时间:2020-04-03 10:38:00

近年来,工程建设面临诸多困难。首先,容易被忽视的问题是性能优化。你为什么这么说?我相信许多小型k8凯发最新网址的合作伙伴开发网站都是在本地建立的。我们发现在项目运行之后没有延迟的问题。也许我们根本不会注意到这个问题,特别是当我们接触到工程项目开发时。通过本地项目构建本地http服务,但如果我们在线,它将有所不同。服务器被放置在很远的地方,会有意外的延迟。

近年来,工程建设面临诸多困难。首先,容易被忽视的问题是性能优化。你为什么这么说?我相信许多小型k8凯发最新网址的合作伙伴开发网站都是在本地建立的。我们发现在项目运行之后没有延迟的问题。也许我们根本不会注意到这个问题,特别是当我们接触到工程项目开发时。通过本地项目构建本地http服务,但如果我们在线,它将有所不同。服务器被放置在很远的地方,会有意外的延迟。

那么,我们在这个项目中应该做些什么才能取得更好的效果呢?你可以从一个非常经典的采访话题“网站从按下进入到显示的过程”来思考。实际上,有两个方面,一个是减少请求,另一个是压缩请求。一是减少数量,二是缩小项目规模,解决好这两个问题。基本上,你的网站可以优化很多。我以前写过一篇关于性能优化的文章,“如何优化前端性能”,现在我将添加一些其他内容。这里有一些规则。

如果我们的网站上有很多小图片,可以采用图片合成的方法,将所有图片放在同一张图片中,然后根据位置显示图片内容。这样,我们只能发送一个请求并获取多个图像。这就是我们常说的“精灵地图”。但是,这种方法通常用于小图片,如图标或徽标。通常,大型图片使用一些新的图像格式,如webp格式和svg格式。

我们之前也讨论过cdn的原理,cdn(content delivery networks)的内容分发网络。其原则是,当您请求内容时,它会将内容返回到近的服务器。但这一前提是我们的网站资源应该提前放到不同的缓存服务器中,一般是一些静态资源文件不经常更改或依赖较少。这样的措施不仅可以要求内容快速返回,而且可以缓解网络流量高峰时源服务器的请求压力。

我们知道这是一个与缓存相关的响应头。如果我们的网站动态内容较少,我们可以缓存一些css样式的文件、图片文件、静态脚本等。当您下次请求相同的资源文件时,如果文件未过期(设置expires时),您可以直接从缓存中读取。但缺点是会受到当地时间的影响。如果你改变当地时间,它将以你当地时间为准。

使用缓存控制来克服本地时间的影响,可以将其设置为在一段时间内(如24小时)过期。有关详细信息,请参阅我的另一篇文章“系统摘要浏览器缓存”。

这方面是关于减少体积。假设您后只合并到一个文件,但这个文件有10mb。即使你的网络没有问题,你也会要求至少10秒,这是用户无法接受的。减少代码量的方法有很多,例如减少代码、删除一些不相关的代码和注释以及打印与信息相关的代码。当然,如果你熟悉韦贝克,那就很简单了。把它交给插件来处理。服务器协作的另一个需要是打开服务器的gzip压缩,这可以极大地压缩代码。您可以配置gzip的压缩级别。压缩级别越高,文件就越小,但服务器会有压力(完成压缩需要cpu周期),这取决于具体情况。

这也是因为代码是自上而下执行的,所以为了防止页面出现“条纹”,我们必须先加载样式文件,然后分析dom节点,后执行js脚本。这也是因为当我们执行js代码时,dom树的构造将被阻塞。这样,我们的k8凯发最新网址主页文件将快速显示,较少的白屏时间和屏时间。

如果对此不满意,可以在加载前加载一些骨架屏幕,即模仿一些内容的一般骨架,在内容返回后显示具体内容,这样不会让用户觉得你的网站卡住了。这种加载方法也是一种很好的实现方法。

我们知道css代码的解析是从右到左开始的,因为官方通过很多实验知道,从右匹配的方式可以快速匹配到节点文件。但是我们也应该注意不要使用太多的嵌套css选择器来避免递归查询和css解析器的匹配。这里我们应该注意的是不要使用通配符选择器*。在我们知道这个危险的选择器之前,我们通常会编写这样的代码:

此外,正确使用选择器可以有效防止重绘和回流。例如,如果同时隐藏一个节点并使用display:none,则会导致节点位置重新计算导致回流,这将花费大量成本。但如果使用opacity:0,它将只重绘,成本更低。

我们知道dns是通过域名找到ip地址,然后执行tcp三次。但您可能会忽略一个非常重要的过程,即重定向。此前,我们曾在文章中称“2020年中高级前端面试问题”。我们可以看到,在重定向(302)上花费的时间相对较大,相当于多了一个请求。

前端现在是一个更重要的位置,因为我们是离用户近的开发人员,我们应该在性能优化方面尽可能满足用户的需求,减少不必要的请求,尽量合并代码操作。当然,这些用户并不十分关心,只关心你的网站是否易于使用、运行是否顺畅等。您可以发现html文档相对较小。大部分时间都在等待下载一些组件或第三方软件包。

好的,我们今天再谈。我一直在学习性能优化。我会记录和更新新的凯发精英体育k8的解决方案在未来。


热门推荐

技巧精选

0571-88730320 联系k8凯发最新网址,谈您的需求