文档章节

前端性能优化总结

小致Daddy
 小致Daddy
发布于 2017/08/12 13:42
字数 586
阅读 1009
收藏 48

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。

前端性能优化分为如下几个方面:

一、代码部署:

1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")

二、编码

html:

1、使用结构清晰,简单,语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片

css:

1、精简css选择器 2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式

a {star : expression(onfocus=this.blur)}

10、避免使用滤镜

javascript:

1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、减少属性查找
6、使用原生方法
7、用switch语句代替复杂的if else语句
8、减少语句数,比如说多个变量声明可以写成一句
9、使用字面量表达式来初始化数组或者对象
10、使用DocumentFragments或innerHTML取代复杂的元素注入
11、使用事件代理(事件委托)
12、避免多次访问dom选择集
13、高频触发事件设置使用函数节流,如:onmousemove、onmouseover
14、使用Web Storage缓存数据
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

© 著作权归作者所有

小致Daddy

小致Daddy

粉丝 171
博文 549
码字总数 591066
作品 0
济南
技术主管
私信 提问
前端集成解决方案--F.I.S

F.I.S(FIS)所提供的集成解决方案依托于一套灵活高效的 编译工具,F.I.S借助该编译平台对前端开发资源进行整合。接触F.I.S,可以从该平台入手。 前端团队发展大多会经历规范设计、技术选型、...

滔哥
2013/10/01
8K
4
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通
2015/11/16
60
0
阿里巴巴高级程序员告诉你,前端到底难不难

先说一下个人认为:整个Web层的纯业务开发可以说都没有难度,后端业务基本就是CURD,前端基本就是数据渲染到视图。 1.逻辑部分: 后端业务层的代码大多数时候只是在处理数据库中的数据,即便是...

IT智云编程
2018/09/27
0
0
vue + webpack 前端性能优化

背景 对于程序开发者而言,开发一个项目不仅仅注重效率和功能,前端的性能问题也是非常重要的。这直接影响用户的体验,从而间接的也反应该项目质量的好坏。 影响项目性能的原因有很多,如:资...

花语_
2018/10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hystrix 资料简单梳理

Hystrix 资料简单梳理 状态 Hystrix不再处于活动开发阶段,目前处于维护模式。 Hystrix(版本1.5.18)足够稳定,可以满足Netflix对现有应用程序的需求。与此同时,我们的重点已转向更具适应性...

晨猫
15分钟前
1
0
黑群晖部署

mark 下有空在玩 U盘安装 将U盘id写入到启动配置文件中(syslinux.cfg) https://www.douban.com/note/518491129/ https://www.nas2x.com/threads/dsm-6-2-1-20190221.29/...

以谁为师
19分钟前
1
0
页面性能优化办法有哪些?

摘要: 性能是最重要的用户体验之一。 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有。 引子 互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果...

Fundebug
20分钟前
0
0
arcgis api for js加载天地图

天地图有经纬度和墨卡托两种坐标系的切片 arcgis默认为墨卡托坐标系,可以切换二维/三维,加载经纬度切片时view需要设置wkid:4326

单线程生物
21分钟前
1
0
常用正则(含小程序验证)

小程序常用正则 使用样例 let roomNumber = that.data.roomNumber; if (roomNumber.length == 0) { wx.showToast({ title: '房间号不能为空', icon:......

whatwhowhy
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部