对于我们前端来说，页面的加载速度是直接影响到用户的体验度
用户体验度是能直接决定最终的销售额的
每增加延迟一秒，页面访问量降低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