Web前端性能优化,前端性能优化方法分析

开课吧开课吧科科2021-02-25 15:51

点赞
有用
分享分享

Web性能优化对Web应用具有很重要得意义,这篇文章讲述可以帮助改善优化前端的技术,非常有用。那么具体该如何做呢?下面和开课吧广场小编一起来看看吧!

Web前端性能优化

一、HTTP请求

1.减少HTTP请求数量

I. 合并文件:将相关代码文件进行合并

II. Css Sprites:将多张图片合并成单张图片,通过css来控制什么地方显示图片的那个位置。

III. 图片映射:也是将多图拼在一起,然后通过坐标来控制。通常在页面中连续的时候才有用,比如导航条。

IV. 行内图片(Base64编码): 通过编码的字符串将图片内嵌到网页文本中。

2.避免重定向

3.DNS预解析

4.使用CDN

二、浏览器缓存

对一个网站而言,CSS、Javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。

在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新Javascript文件并不是更新Javascript文件内容,而是生成一个新的JS文件并更新HTML文件中的引用。

使用浏览器缓存策略的网站在更新静态资源时,应采用逐量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应该一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器忽然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。

三、页面静态资源

1.将CSS样式表放在顶部

如果将css样式定义放在页面中或者页面底部,会出现短暂白屏或者某一区域短暂白板的情况,这和浏览器的运营机制有关的,不管页面如何加载,页面都是逐步呈现的。所以在每做一个页面的时候,用Link标签把每一个样式表定义放在head中

2.将Javascript脚本放在底部浏览器

在加载css文件时,页面逐步呈现会被阻止,直到所有css文件加载完毕,所以要把css文件的引用放到head中去,这样在加载css文件时不会组织页面的呈现。但是对于js文件,在使用的时候,它下面所有也页面内容的呈现都会被阻塞,将脚本放在页面越靠下的地方,就意味着越多的内容能够逐步呈现。

3.使用外部Javascript和CSS

4.组件压缩

5.图片优化

以上就是今天开课吧广场小编分享的内容,对于前端性能优化,你有什么心得体会呢?更多Web前端相关内容尽在开课吧广场Web前端教程频道!

有用
分享