如何打造亚秒级加载的网页1——前端性能

r囧r小猫 2022-01-06 02:55 108阅读 0赞

对于我们前端来说，页面的加载速度是直接影响到用户的体验度

用户体验度是能直接决定最终的销售额的

每增加延迟一秒，页面访问量降低11%，转化率降低7%

如何提高页面的加载速度是前端工程师们必然要懂的

那么我就来讲解一下可以从哪些方面来提高页面的加载速度：

**页面加载速度影响因素——前端性能**

**　　**前端性能关键呈现路径所涉及的步骤：

1 . DOM：浏览器在解析HTML时，会以递增的方式为HTML标记生成一种名为文档对象模型（DOM）的树状模型，

该模型描述了网页中包含的内容

2 . CSSOM：浏览器收到所有CSS后，会对其中包含的标记和类生成一种名为CSS对象模型的树状模型，并将样式信息附加在节点上。

这个树描述了网页中所包含内容需要应用的样式

3 . 呈现树（Render Tree）：通过将DOM与CSSOM结合在一起，浏览器可以构造出呈现树，

其中包含了页面内容以及所要应用的样式信息

4 . 布局（Layout）：布局这一步中需要计算网页内容在屏幕上的实际位置和大小

5 . 绘制（Paint）：最后一步将使用布局信息在屏幕上绘制像素

**当然对此我们也是有办法应付的**

**下面列出了各个方面处理性能的方法**

（1）网页内容 —— 减少HTTP请求次数

减少DNS查询次数

避免页面跳转

缓冲ajax

延迟加载

提前加载

减少DOM元素数量

根据域名划分内容

减少iframe数量

避免404

（2）服务器 —— 使用CDN

添加Expires 或 Cache-Control 报文头

Gzip 压缩传输文件

配置ETags

尽早flush输出

使用GET Ajax请求

避免空的图片src

Cookie

减少cookie大小

页面内容使用无cookie域名

（3） CSS —— 将样式表置顶

避免CSS表达式

用<link>代替@import

避免使用Filters

（4） JavaScript —— 将脚本置底

使用外部Javascript 和 Css文件

精简Javescript和Css

去除重复脚本

减少DOM访问

使用智能事件处理

（5） 图片 —— 优化图片

优化CSS Sprite

不要在HTML中缩放图片

使用小且可缓存的favicon.ico

移动客户端

保持单个内容小于25KB

打包组建成符合文档

这就是从前端方面来提高页面的加载速度

当然 影响页面加载速度的并不只有前端性能

还会有网络性能

下次更新再来写网络性能了

转载于:https://www.cnblogs.com/mlw1814011067/p/9683919.html

发表评论取消回复

表情：

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

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

相关阅读

相关【前端性能优化】如何应对首屏加载白屏？

目录 1. 骨架屏 1.1 绘制静态骨架屏 1.2 代码绘制骨架屏

妖狐艹你老母/ 2023年03月06日 05:29/ 0 赞/ 23 阅读

相关【前端性能优化】图片加载优化

目录 1. 图片类型 1.1 PNG 1.2 JPG/JEPG

迷南。/ 2022年11月25日 10:12/ 0 赞/ 438 阅读

相关【前端性能优化】前端懒加载

目录 1. 什么是懒加载？ 2. 图片懒加载的基本实现 3. 结合节流优化图片懒加载

水深无声/ 2022年10月29日 04:30/ 0 赞/ 310 阅读

相关前端优化（提高网页的加载速度)

1、使用css sprites，可以有效的减少http请求数 2、使用缓存 3、压缩js，css文件，减小文件体积 4、使用cdn，减小服务器负担 5、懒加载图片 6

蔚落/ 2022年03月11日 12:42/ 0 赞/ 344 阅读

相关前端性能优化--懒加载和预加载

懒加载代码实现 html <!DOCTYPE html> <html lang="en"> <head>

ゝ一世哀愁。/ 2022年03月08日 12:50/ 0 赞/ 492 阅读

相关如何提高网页加载速度

1、减少页面请求：从WEB运行原理上讲，IIS请求是无状态的，在服务器端一直是连接和关闭的不断进行着，如果能减少服务器请求，总的时间将会减少。之前我下载163邮箱的登陆

悠悠/ 2022年01月27日 08:21/ 0 赞/ 416 阅读

相关前端性能优化：使用异步加载，延迟加载依赖

日期：2013-7-1 来源：[GBin1.com][] [![前端性能优化：使用异步加载，延迟加载依赖][title.jpg]][title.jpg 1] [Requi

偏执的太偏执、/ 2022年01月16日 08:29/ 0 赞/ 442 阅读

相关前端性能优化三部曲(加载篇)

前言虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下

清疚/ 2022年01月12日 00:19/ 0 赞/ 766 阅读

相关如何打造亚秒级加载的网页1——前端性能

对于我们前端来说，页面的加载速度是直接影响到用户的体验度用户体验度是能直接决定最终的销售额的每增加延迟一秒，页面访问量降低11%，转化率降低7% 如何提高页面的加载速

r囧r小猫/ 2022年01月06日 02:55/ 0 赞/ 109 阅读

相关 Web前端性能优化——如何提高页面加载速度

原文链接：[https://www.cnblogs.com/MarcoHan/p/5295398.html][https_www.cnblogs.com_MarcoHan_p_

向右看齐/ 2021年09月28日 02:54/ 0 赞/ 574 阅读