前端性能优化（前端性能优化的七大手段）

本篇文章给大家谈谈前端性能优化，以及前端性能优化的七大手段对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、前端性能优化有哪些方法
• 2、前端性能优化的具体方法有哪些？
• 3、如何进行web前端性能优化？
• 4、前端开发，页面优化，性能优化有哪些方面？

前端性能优化有哪些方法

前端性能优化的方法有：

一、减少http请求数

常用的减少http请求数有以下几种：

1、合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http请求数外，还可以充分利用缓存来提升性能。

2、合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

3、去掉不哪念亏必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4、充分利用缓存。这里说高卜的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。

如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

二、图片优化

优化方法：

1、尽可能的使用PNG格式的图片，它相对来说体积较小。

2、对于不同格式的图片，在上线之前最好进行一定的优化。

3、图片的延迟加载，也叫做赖加载。

三、使用CDN

CDN即内容分发网络，可以使用户就近取得所需内容，解决网络李神拥挤的状况，提高用户访问网站的响应速度。

四、开启GZIP

GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。

五、样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。比如，放到＜head标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。

六、使用无cookie域名

无cookie域名的概念：当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何使用，也就是说这些cookie没什么用，没不要随请求一同发送。

前端性能优化的具体方法有哪些？

解决办法一：

减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，或弊键data缓存 ，图片服务器。

前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

当需要设置的样式很多时设置className而不是直接操作style。

少用衫巧全局变量、缓存DOM节点查找的结果。减少IO读取操作。

避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

解决办法二：

减少HTTP请求次数

使用CDN：CDN在前端开发的作用

避免空的src和href

为文件头指定Expires

使用gzip压缩内容

把CSS放到顶部

把JS放到底部

避 免使用CSS表达卜码式

将CSS和JS放到外部文件中

避免跳转

可缓存的AJAX

使用GET来完成AJAX请求

[img]

如何进行web前端性能优化？

提起Web前端性能优化的问题，前端开发人员非常熟悉，对于一个网站而言，即使内容和功能再优秀，如果用户需要花费很久的时间才能打开，这样迟早会消耗用户的耐心，并最终失去用户。

那如何才能优化前端性能？归纳为三步

一、关键资源字节数

字节数也就是通常说的减少资源文件（js、css、image、video...）的大小。

1、压缩衫蚂

前端使用uglify混淆压缩

后端开启gzip

对图片进行压缩，使用压缩比例更高的格式（WebP）

2、缓存

强缓存（http状态码：200），不用请求服务运纳器直接使用本地缓存，协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源，使用localstorage对数据进行存储。

3、针对首屏优化

对非关键资源延迟加载、异步加载，减少首屏资源大小

二、关键资源连接数

1、合并请求

使用http2.0的多路复用合并请求配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段。

2、减少图片请求数

使用spite图，使用svg-symbol。

3、针对一些场景采用css、js内联的方式。

4、使用强缓存减少了一次服务器请求。

5、非关键资源延迟、异步加载，减少了首屏资源连接数。

三、关键渲染路径

1、bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点，这种方式主要解决了直出页面阻塞的问题。

2、bigrender分块渲染

常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数

3、针对reflow，repaint，composit路径处理。

4、涉及到动画时关于layer的概旁塌没念renderlayer、graphicslayer。

5、css放在头部、js放底部避免阻塞DOM树的构建，关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行。

前端开发，页面优化，性能优化有哪些方面？

感觉前端的性能确实是很重要的，我谈谈我在实际项目中的应用。前端的应用主要从以下几个方面进行优化：

1．减少http请求

HTTP协议是无状态的应用层协议，意味着每次HTTP请求都需要建立通信链路、进行数据传输，而在服务器端，每个HTTP都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少HTTP请求的数目可有效提高访问性能。减少HTTP的主要手段是合并CSS、合并JavaScript、合并图片。将浏览器一次访问需要的JavaScript、CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

2．使用浏览器缓存

对一个网站而言，CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。通过设置HTTP头中Cache-Control和Expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新JavaScript文件并不是更新JavaScript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。使用浏览器缓存策略的网站在更新静态资源时，应采用批量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器突然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。

3．启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩效率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果宴袜。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

4．CSS放在页面最上面、JavaScript放在页面最下面

浏览器会在下载完全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面。但如果页面解析时就需要用到JavaScript，这时放在底闭祥坦部就不合适了。

5．减少Cookie传输

Cookie在每次响应请求中，如果太大势必会影响性能，所以没必要网cookie放的就不放，针对性的选择放入cookie的数据。

总之，优化轿桐的方法还很多，我感触最深的是第4项，有些js文件大引用如果放到最前面对性能损耗很大。

关于前端性能优化和前端性能优化的七大手段的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。