web前端性能优化方法总结、移动页面性能优化-超级全面

「爱情、让人受尽委屈。」 2021-11-11 04:10 480阅读 0赞

### **web性能优化的具体方法（way）** ###

一）内容层面

1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

2、避免重定向（/还是需要的）

3、切分到多个域名

4、杜绝404

二）网络传输阶段

1、减少传输过程中实体的大小

1）缓存

2）cookie优化

3）文件压缩（Accept-Encoding：g-zip）

2、减少请求的次数

1）文件适当的合并

2）雪碧图

3、异步加载（并发,requirejs）

4、预加载、延后加载、按需加载

三）渲染阶段

1、js放底部，css放顶部

2、减少重绘和回流

3、合理使用Viewport 等meta头部

4、减少dom节点

5、BigPipe

四）脚本执行阶段

1、缓存节点，尽量减少节点的查找

2、减少节点的操作（innerHTML）

3、避免无谓的循环，break、continue、return的适当使用

4、事件委托

### 移动端页面性能优化方案 ###

Html5优化

**1、加载优化**

减少http请求、合并css、js、缓存、压缩html\\css\\js、使用首屏加载、按需加载、预加载、压缩图片、减少cookie影响加载速度、避免重定向、异步加载第三方资源。

**2、脚本执行优化**

css在头部，js在尾部、避免图片和iFrame等空scr，影响当前加载速度和效率、避免多次重设图片大小，会导致多次重绘、

**3、css优化**

避免写在html标签中写style、避免css表达式、移除空的css、正确使用display属性，影响页面渲染、不滥用float计算量较大、不滥用web字体，加载解析耗时、不声明过多的Font-size。

**4、js执行优化**

减少重绘和回流、缓存Dom选择于计算；缓存列表length；尽量使用事件带来；尽量使用Id选择权; touch事件优化；

**5、渲染优化**

html使用viewpoint，可以加速页面的渲染；减少Dom节点；动画优化；高频事件优化；GPU加速；

详情：

转载：[https://blog.csdn.net/alex\_hou0814/article/details/91421331][https_blog.csdn.net_alex_hou0814_article_details_91421331]

转载：[https://blog.csdn.net/w2326ice/article/details/64122372/][https_blog.csdn.net_w2326ice_article_details_64122372]

[https_blog.csdn.net_alex_hou0814_article_details_91421331]: https://blog.csdn.net/alex_hou0814/article/details/91421331
[https_blog.csdn.net_w2326ice_article_details_64122372]: https://blog.csdn.net/w2326ice/article/details/64122372/

发表评论取消回复

表情：

评论列表（有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读

相关前端性能优化方法总结

端性能优化（一）前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源...

骑猪看日落/ 2024年04月18日 21:56/ 0 赞/ 109 阅读

相关 web前端性能优化总结

1.减少http请求，合理设置http缓存 http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独

曾经终败给现在/ 2023年01月08日 08:28/ 0 赞/ 256 阅读

相关 web前端性能优化总结

网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体

ゞ浴缸里的玫瑰/ 2022年07月26日 09:02/ 0 赞/ 472 阅读

相关 web前端性能优化总结

原文网址：http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是

灰太狼/ 2022年06月17日 19:57/ 0 赞/ 857 阅读

相关前端性能优化方法总结

前端性能优化（一）前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面

灰太狼/ 2022年05月24日 05:58/ 0 赞/ 435 阅读

相关 web前端性能优化总结

概括涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类

叁歲伎倆/ 2022年03月07日 02:56/ 0 赞/ 683 阅读

相关 Web前端页面性能优化小结

前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。而前端开发工作者可以控制的是什么呢？那就是xh

亦凉/ 2022年01月23日 14:35/ 0 赞/ 435 阅读

相关 web前端性能优化方法总结、移动页面性能优化-超级全面

web性能优化的具体方法（way）一）内容层面 1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名） 2、避免重定向（/还是需

「爱情、让人受尽委屈。」/ 2021年11月11日 04:10/ 0 赞/ 481 阅读

相关 web前端性能优化总结

为什么要进行前端性能优化影响用户访问体验的绝大部分来自前端页面，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体

ゝ一纸荒年。/ 2021年09月19日 00:22/ 0 赞/ 683 阅读

相关关于web前端性能优化总结

1、从DOM结构和标签上来优化 ·使用语义化的标签，代码清晰简洁； ·减少Dom节点，增加渲染速度； ·使用W3C标准书写闭合小写的标签； ·给图片和tabl

偏执的太偏执、/ 2021年09月15日 14:04/ 0 赞/ 643 阅读