前端开发：Web性能优化有哪些方法？

Web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了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个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。

三、页面静态资源

将CSS样式表放在顶部

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

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

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

3.使用外部Javascript和CSS

4.组件压缩

5.图片优化

以上就是今天千锋广州前端小编分享的内容，对于前端优化，你有什么心得体会呢?欢迎评论区留言交流哦!

前端开发：Web性能优化有哪些方法？相关推荐

白告王旋的前端开发笔记——性能优化
HTTP协议 Etag 前言在HTTP1.1规范中,新增了一个HTTP头信息:ETag.对于普通开发者来说,可能平时真的不会接触到该HTTP头.平时接触不到或者说用得少,不代表这个请求头不重要.ET ...
前端性能优化及其度量方法
前端性能优化及其度量方法前端页面性能对用户留存.用户直观体验有着重要影响,当页面加载时间超过 2 秒后,加载时间每增加一秒,就会有大量的用户流失,所以做好页面性能优化,对网站来说是一个非常重要的步骤 ...
前端利器，6 款开源 Web 性能优化辅助工具推荐
转自:原文链接 Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分.当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验. 下面推荐几款 Web 性能优化辅助工具推荐 ...
前端小白浅谈seo优化以及web性能优化方案
写在前面这是好久之前的工作了,之前还没用vue spa 做项目的时候,都是用的原生js写项目,纯html,css,js写项目,真的是每个页面引用css,js各种文件写到头痛, 那个时候做一个大型网站 ...
Web性能优化方法总结
web性能优化一.页面优化 1.减少HTTP请求数量 1.从设计实现层面简化页面:尽量将页面设置成百度首页那样,保持页面简洁.减少资源的使用. 2.合理设置HTTP缓存:合理设置缓存可以大大地减少H ...
摸鱼前端的自检（六）你不知道的web性能优化
你不知道的web性能优化你遇到过打开一个网站需要10秒以上的吗,这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅.你会有什么反应?我猜想,大多数用户会关闭这个 ...
[译]Web 性能优化：图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
前端工程与性能优化：静态资源版本更新与缓存
2019独角兽企业重金招聘Python工程师标准>>> 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的 ...
如何重新认知性能优化及其度量方法
正文如下本文是第十八届 - 前端早早聊性能优化专场,也是早早聊第 123 场,来自阿里 UC-海愚的分享. 我是来自 UC 内核团队的林洁伟,海愚是我的花名.今天我将分享的主题是如何重新认识性能 ...

前端开发：Web性能优化有哪些方法？

前端开发：Web性能优化有哪些方法？相关推荐

最新文章

热门文章