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

北极甜虾 • 2022-03-09 20:53:58 • 投稿

很高兴回答这个问题

1.减少Http请求数

合并一些重复的请求，减少一些没没必要的请求，减少响应时间

2.用户行为分析

分析用户点击哪几个功能点比较多，突出优化慢的http请求，让用户体验感上升

3.全页不需要全加载

由于页面全加载，全让整体页面加载变慢，因为要渲染的内容很多。解决办法把一些不是非常重要的功能可收缩起来，用户点击后在加载出来。

4.js

位置调置

放在头部会加载js，导制首屏出现时间变慢，影响用户体验

5.请求放缓存

一些常用的请求比如查询数据字典，用户信息等请求一次后放入缓存，后面刷新页面后不需要再次请求，增强用户体验

希望对你有帮助!~

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

【读书笔记】如何进行web前端性能优化？

提起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、非关键资源延迟、异步加载，减少了首屏资源连接数。

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

三、关键渲染路径

1、bigpipe分块输出

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

2、bigrender分块渲染

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

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

4、涉及到动画时关于layer的概念render layer、graphics layer。

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

以上就是针对Web前端性能优化归纳出的解决方案。更多Web前端学习资料，关注“武汉千锋”微信公众号领取。

公司对优化人员要求，需要不需要会web前端？

对于优化而言，虽然不要求你能达到web前端开发设计的水平，但至少要能看懂网页的HTML以及css代码，再就是对后端的PHP等脚本语言要有一定的了解，对于优化而言，已经不简单的是前几年更新文章或者随便发一个外链就可以的了。

想要做好优化，就得考虑到用户体验，而对于web前端开发人员而言，注重的是前端功能以及界面的美化设计，但是优化人员需要调整代码，使其符合搜索引擎的标准，从不同的方面改善用户体验。再就是文章更新以及外链发布，算作是优化的一部分称之为外部优化，而对内部优化，需要修改页面布局，精简代码，减少代码冗余，所以优化人员懂得web前端知识是必要的，只会简单的文章信息发布，在现下也只能称之为推广人员吧，离优化还是有一段距离的。

最后就是优化人员不仅需要懂得文章外链的发布，web前端代码的优化修改之外，还有通过站长平台分析网站数据并制定长期的优化方向方案，并在执行的过程中适当适时的调整优化方案。