前端性能优化方法(一)
在打开一个网页时,我们希望网页显示出来的越快越好。那么我们怎样做才能优化页面性能,提高页面加载速度呢?
目录
- 前端性能优化
- 页面加载缓慢的原因
- 浏览器部分
- 代码部分
- 优化原则
- 1、尽量减少HTTP请求
- 2、资源压缩与合并
- 3、使用内容传送网络CDN
- 4、避免空src或者href值
前端性能优化
页面加载缓慢的原因
浏览器加载缓慢的原因,可能由以下几种因素造成:js的阻塞、html代码的多少、元素的css样式造成的重排和重绘等
浏览器的所有数据都来自服务端,服务端需要计算客户端请求的数据(数据库数据的查询,传输等),都是需要消耗时间的。
所以,不仅需要优化客户端,还要优化服务端,这样页面的性能才能得到提升。
浏览器部分
(1)网络层面
- 过多的HTTP请求
打开一个网页的时候,后台程序的响应并不需要太多时间,等待的时间主要花费在下载网页元素上了,即 HTML、CSS、JavaScript、Flash、图片等。据统计,每增加一个元素,网页载入的时间就会增加25-40毫秒(具体取决于用户的带宽情况)。
- 资源访问带宽小
- 网页元素(图片、视频、样式)太大
(2)浏览器渲染层面
- 渲染阻塞(jS阻塞与CSS阻塞)
- 重复渲染(频繁操作元素,造成的重排重绘)
- DNS解析(DNS解析找出IP地址越快,响应的越快)
(3)服务端层面
- 硬件配置低:这个是双向的
- 服务器软件,比如防火墙、内网策略等
- 未对Nginx这类web服务器进行配置优化
- CPU占满,数据库未优化
- 代码问题,代码效率,代码性能
- 包含了过多的分析类工具
代码部分
构建层面
未对代码进行打包、压缩、兼容性优化(webpack打包优化)
未合并重复的请求、代码
编码层面
错误的编排JS与CSS
for循环,迭代、同步、重定向、阻塞请求(JS代码阻塞)
未删除重复、无用的代码
未对逻辑业务复杂的代码进行重构,了解设计模式,对业务进行梳理
机制(SSR,英文Server Side Render:服务器端渲染)
未加入Async异步机制
未思考页面加载、用户体验(可以使用页面懒加载,快要滚动到页面的时候,图片等显示出来)
规范
CSS规范
HTML规范/HTML5规范
Airbnb代码规范
优化原则
1、尽量减少HTTP请求
一个正常的HTTP请求的流程简述:如在浏览器输入“www.xxx.com”并按下回车键,浏览器再与这个URL所指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接收到请求信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接与释放连接,这必定会造成资源的浪费,且每个HTTP都会对服务器和浏览器产生性能负担。
方法:
(1)组合文件、优化图片,使用sprites设计风格:将背景图片合并成一个文件,通过background-image
和background-position
控制显示;
使用CSS sprites在网站上经常使用的图像创建模板,如按钮和图标。CSS sprites将你的图像组合成一个大图像,一次加载所有(这意味着更少的HTTP请求),然后只显示你想要显示的部分。这意味着你通过不让用户等待加载多个图像来节省加载时间。
(2)内联图片(data URI scheme)
<img src="http://www.edu.cn/yinghua.png">
上述代码中,图片是独立于HTML而存在于另一个URL的,这就意味着要多一次HTTP请求。
内联图片写法:
<img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGAD CAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
- 说明:
image/png - 数据类型名称
base64 - 数据的编码方法
iVAGRw0KG… - 编码后的数据
: ; , - data URI scheme 指定的分隔符号
2、资源压缩与合并
主要包括:html压缩、css压缩、js的压缩和混乱、文件合并。
(1)html压缩
压缩在文本文件中有意义,但是在HTML中不显示的字符(空格,制表符,换行符等),还有一些其他意义的字符,如HTML注释也可以被压缩。
方法:
- 使用在线网站进行压缩
- node.js提供了html-minifier工具
- 后端模板引擎渲染压缩
(2)css代码压缩
即无效代码删除和css语义合并。
方法:
- 使用在线网站进行压缩(开发过程中一般不用)
- 使用html-minifier工具
- 使用clean-css对css进行压缩
(3)js的压缩和混乱
主要包括:无效字符的删除、剔除注释、代码语义化的缩减和优化、代码保护(代码逻辑变得混乱,从而降低代码的可读性)
方法:
- 使用在线网站进行压缩
- 使用html-minifier工具
- 使用uglifyjs2对js进行压缩
(4)文件合并
从图中可以看出,keep-alive方式可能会出现状况,经过代理服务器时可能会被断开,也就是不能一直保持keep-alive状态,并且伴有网络延迟,受丢包问题影响严重。
压缩合并css和js可以减少网站http请求的次数,但文件合并可能会带来首屏渲染和缓存失效问题。处理——公共库合并和不同页面的合并。
(5)其他方法
- 删除重复的脚本
- 使用合适大小的图片,而不是使用过大的图片然后设置宽高
- 减少DOM元素的数量
3、使用内容传送网络CDN
内容分发网络(CDN),也称为内容传送网络,是用于分发传送内容的负载的服务器网络。从本质上讲,网站的副本存储在多个地理位置不同的数据中心,以便用户可以更快,更可靠地访问你的网站。(选择距离用户最近的服务器,给用户提供静态资源的访问)
可以使用公共CDN网络上的资源,使用CDN加速,例如:
//google
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/juery.min.js"></script>
4、避免空src或者href值
空的src和href都会导致多余的HTTP请求,虽然不影响加载时间,但会对服务器产生不必要的流量和压力。浏览器仍然会向服务器发起一个HTTP请求。
有两种形式:
1、html形式:
<img src="">
<a href=""></a>
2、JavaScript的形式:
var img=new Image();
img.src="";
解决办法:
1、删除空的src和href标签;
2、给a标签的href属性连接到实际的页面:
例如:
<a href="#"></a>
<a href="void(0)" ></a> //阻止默认行为的发生
3、禁止跳转,添加cursor:pointer样式(保留了点击小手的样式,又不会跳转)
<style>a{cursor:pointer}
</style>
<a>点击</a>
4、给a标签创建一个带有描述信息的href属性,并监控click事件调用preventDefault()函数
<a href="" id="my_id">点击</a>
<script>$("#my_id").click(function(e){e.preventDefault(); //取消单击事件的默认动作以阻止链接的跳转})
</script>
前端性能优化方法(一)相关推荐
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- 【前端性能优化方法与实战】
[前端性能优化方法与实战] 性能优化概览
- 前端性能优化方法与实战17 横向对比:百度、阿里云、美团性能方案对比
前面我介绍了性能优化实践及在 Hybrid下的进阶优化方案,这是我们目前的做法,那么,业界是什么样的情况呢?在这里我就挑选三家互联网公司--百度.阿里云.美团,一起来看看他们是怎么做的? 为什么选它们 ...
- 前端性能优化方法与实战05 指标采集:白屏、卡顿、网络环境指标采集方法
上一讲我们介绍了首屏时间的指标采集,这一讲我们来聊聊前端其他的性能指标采集,比如白屏.卡顿和网络环境. 你乘火车.地铁.飞机都走过安检吧?如果说首屏时间类似你过安检的时刻,那么,白屏时间就是你排队到安 ...
- 前端优化:前端性能优化方法
一.结构优化 1.gzip压缩 gzip 压缩效率非常高,通常可以达到 70% 的压缩率. //npm i -D compression-webpack-plugin configureWebpack ...
- 前端性能优化方法与实战12 理论分析:Hybrid 下的性能优化整体分析
前几讲我们介绍了首屏时间.白屏时间.卡顿等的优化方案,它们一般适用于 App 端内和端外两种场景,App 端内就是App 内的H5 页面,端外是指 PC 站或者微信里面的 H5 等页面.接下来这一模块 ...
- 前端性能优化方法与实战14 高级进阶:瞒天过海的骨架屏及 SSR 优化手段
前面我已经提到过,骨架屏和 SSR 在首屏优化方面有较好的效果,骨架屏可以使用户预期到接下来要展示的内容和结构,让用户觉得页面加载快了,而 SSR 则可以白屏时间大幅缩短. 那么具体该怎么实现骨架屏和 ...
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- 前端性能优化的七种方法
前端性能优化主要有七种方法,包括减少请求数量.减少资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和webpack优化 1.减少请求数量 1.1 图片处理 1.1.1 雪碧图 ...
最新文章
- 深度学习100例-卷积神经网络(AlexNet)手把手教学 | 第11天
- html修改按钮背景颜色,html鼠标悬浮在按钮上,让按钮背景变色
- 如何构建和部署 SAP Commerce Cloud 项目
- LOJ#2145. 「SHOI2017」分手是祝愿
- supervisor 重启_supervisor_twiddler的使用
- python正则表达式怎么看_python如何使用正则表达式
- 稳定土厂拌设备控制系统-基本介绍(图)
- Nginx 限制某 IP 在一段时间内对服务器发起请求的连接数
- 法学界四大主流“数据权利与权属”观点
- SGU[222] Little Rooks
- 大疆aeb连拍_大疆进军运动相机领域,发布OSMO?ACTION,对标GoPro
- 西电计算机网络ppt,《西安电子科技大学》PPT课件
- Xshell 4使用
- 平面设计中有趣的词云图如何设计
- 在计算机上找不到autocad,天正提示找不到可用的AutoCAD版本怎么办?
- G729调用方法及使用wavlib播放出现颤音的解决方法
- Orcad Schematic常用功能
- C++——运算符的重载
- 河北省对口升学计算机专业学校,河北省对口升学计算机专业试题详解
- java快递管理系统
热门文章
- OB0206 obsidian 表格编辑插件:advanced Tables插件使用
- Open web start 1.5.2
- 小新打印机固件升级包Lenovo M7268W-01.11.01
- 8086 汇编程序报错信息解释
- 格蕾丝霍波计算机软件之母,计算机之母
- ios 绕过mfi_如何让联系人绕过iOS的免打扰模式
- element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索
- 12. xss bypass xss截屏
- 百度调整移动搜索排序算法 提升APP排名结果
- linux系统下使用docker镜像并安装容器