高性能网站建设1-网络优化

  • 内容
  • 评论
  • 相关

前言

高性能不是一蹴而就的,是一点一点累积起来的

dns相关

当用户在浏览器输入域名成功后,浏览器需要先解析域名找到对应的IP

dns查找途径大致有:浏览器本地缓存、操作系统的缓存/hosts文件、路由器缓存、dns服务器(服务商的dns、自建的dns、根服务器)

第一次访问一般都会比较慢,本地没有缓存,需要在各个dns服务器之间不断的递归查找,当找到对应的IP时,各级dns服务器都会进行一段时间的缓存。

1:自建dns服务器。当需要域名解析的时候,根据源IP地址的地理位置,返回一个地理位置上最近的服务器的IP,从物理距离上加快网站访问速度。

2:减少dns查找次数。这里的减少次数是针对首屏加载的,如果首页的资源使用了CDN,尽量不要使用太多的域名,避免多次查询dns,但是也不要太极端,把所有的资源都集中在一个CDN域名上,浏览器对同一个域名的并发加载数是有限制的,2-3个CDN域名也差不多了

3:合理的dns预加载。这里的dns预解析就是为了后面加载资源使用的,类似淘宝这样的网站,页面很多,资源很多,资源的域名指向也是不同的(下面的那段代码是从淘宝首页复制的),它会对指定的域名进行dns查找,然后就可以缓存起来,后面在加载对应资源的时候就能更快的

这是从淘宝首页复制出来的一部分  在head中的
<link rel="dns-prefetch" href="//g.alicdn.com" /> 
 <link rel="dns-prefetch" href="//img.alicdn.com" /> 
 <link rel="dns-prefetch" href="//tce.alicdn.com" /> 
 <link rel="dns-prefetch" href="//gm.mmstat.com" />

网络请求

根据IP访问服务器资源,请求网站首页,这段时间是通过 HTTP/HTTPS 协议请求网站资源,能影响速度的有:

1:服务器带宽(多整点)

2:资源压缩。首页代码压缩,并且一定要启用 Gzip 压缩(nginx简单配置一下就可以了),这个东西在处理大文件的时候起码能减少一半的体积;但是不要通过服务器来动态处理压缩,项目打包部署时手动打包压缩,不要增加服务器的压力

3:首页静态化,或者说预渲染。通常情况下,静态网页的访问速度要比动态网页快(通过服务端生成html文本)。类似于淘宝这种网站,首页内容比较多,一定要提前做首页的静态化处理,如果完全使用动态页面,服务器压力会变大,速度也变慢了。

但是不一定要把所有的内容都静态化,把网页的整个框架、一些背景色、一些必要的文本处理好就可以了,不能一上来就让用户看个2 3秒的白屏。特别是SPA(单页应用)这类网站,首页白屏最严重,一定要做预渲染,就算是渲染个骨架屏也好;不要轻易的使用server-render(服务端渲染),如果需要SEO再考虑 server-render,免得一不小心变成了性能的瓶颈

4:CDN,这个不解释,能有就用

5:script标签都放到 body 标签的末尾,不多解释,加快页面的渲染速度

减少HTTP请求

在http1.0协议的时代,因为协议不支持 keep-alive ,每一次的资源请求都会重复的开启连接和关闭连接,会浪费很多时间,所以人为的减少HTTP请求次数尤为重要,下面的几种方式都可以有效的减少额外的HTTP请求

在http1.1之后,协议支持 keep-alive ,多次资源请求可以共用一个TCP连接,不需要再频繁的开启和关闭了,不过下面的那些操作还是建议使用上,毕竟也是一点优化。

1:必要的内联css,减少额外的HTTP请求,首页关键的样式需要直接放在 style 标签中(比如说首页的整体布局的样式或者骨架屏的样式),随着首页的html返回,让用户能在第一时间看到页面的大概内容,避免再次去加载css增加白屏时间

<style> body {xxxxxx} </style>

2:必要的内联js,减少额外的HTTP请求,和第一条差不多。

3:CSS Sprite,俗称雪碧图。多张小图片拼接成一张图片

4:内联图片。使用 base64 将图片嵌入到 img 中,主要是对一些小图片做处理

合理利用浏览器并行加载

现代浏览器早就可以并行加载了(http1.1后),貌似chrome可以并行6个请求,所有的请求都可以并行,不管是ajax、图片加载、js加载、css加载..,所以在首屏加载的时候,合理的安排需要加载的script标签,能够更快的加载完资源

巧用缓存

这里说的缓存指得是前端的缓存,针对ajax,某些接口的数据没有必要每次刷新都去服务端读取,比如说轮播图这种更新不太频繁的接口,第一次打开页面的时候就利用 前端缓存技术 保存起来,像localStorage  IndexDB WebSQL这些前端的持久化技术,最适合用来做前端缓存了,自己写一个缓存组件,配合过期时间等配置,合理的安排需要缓存的接口数据,让前端页面渲染的更快,也能减轻一点服务端的负担。

评论

0条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注