文档章节

web 前端性能

东街小霸王
 东街小霸王
发布于 2017/08/28 10:16
字数 586
阅读 3
收藏 0

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

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

一、代码部署:

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

二、编码

1.html:

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

2.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、避免使用滤镜

3.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方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

本文转载自:https://my.oschina.net/liuyuantao/blog/1507021

共有 人打赏支持
东街小霸王
粉丝 2
博文 65
码字总数 17782
作品 0
深圳
私信 提问
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

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

OneAPM蓝海讯通
2015/11/16
60
0
谈谈css的加载及加载循序

谈谈css的加载及加载循序 Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客2017-12-231 阅读 css 前言 关于前端css性能优化,网上很多类似文章,我之前也写过,《[网站前端性能优...

Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客
2017/12/23
0
0
西安葡萄城招聘啦:Web、UI

UI/UE工程师 职位描述 负责新产品Web端的用户界面(UI)设计工作 负责新产品Web端的用户体验(UE)设计工作 全面负责产品的用户界面配色,图标,布局以及用户行为的设计 协助产品经理在用户体...

葡萄城技术团队
2015/02/06
1K
11
线上商城系统开发需求前端开发工程师(兼职可远程)

1、负责移动端H5页面前端开发,编写HTML、CSS和JS代码,配合后台工程师完成应用开发 2、制定JS、CSS、HTML开发规范并推进执行,扎实的JS功底,精通VueMV框架(如Vue, 3、了解前端模块化,工程...

shanwell
2016/09/05
3
2
腾讯 AlloyTeam Conf 2017 前端技术大会

活动简介 AC大会(Alloyteam Conf ),是腾讯明星前端团队AlloyTeam发起的前端技术大会,旨在分享团队在技术研究、产品研发、开源项目的经验沉淀。Web前端行业发展迅速,新技术、新工具层出不...

TAT_heyli
2017/09/14
35
0

没有更多内容

加载失败,请刷新页面

加载更多

Flink-数据流编程模型

1、抽象等级 Flink提供了不同级别的抽象来开发流/批处理应用程序。 1) 低层级的抽象 最低层次的抽象仅仅提供有状态流。它通过Process函数嵌入到DataStream API中。它允许用户自由地处理来自一...

liwei2000
24分钟前
1
0
Java开发Swing实战JFrame和JTabbedPane容器的用法详细解析

概述: 项目是一个桌面程序,涉及标签和按钮组件、布局管理器组件、面板组件、列表框和下拉框组件等组件,以及Swing事件处理机制。 下面先从最基础的界面开始。 /** * @author: lishuai * @...

金铭鼎IT教育
29分钟前
9
0
flask 之旅

环境 为了正确地跑起来,你的应用需要依赖许多不同的软件。 就算是再怎么否认这一点的人,也无法否认至少需要依赖Flask本身。 你的应用的运行环境,在当你想要让它跑起来时,是至关重要的。 ...

hblt-j
29分钟前
6
0
easyui的上传文件

记录一下自己亲手操刀easyui的心得:不用不知道,一用就问题多,网上查资料,有用的真的太少了 ——————————————————正文 FileBox,还是不错的讲真,至少我去自己写就gaga了...

anlve
30分钟前
4
0
如何做好SQLite 使用质量检测,让事故消灭在摇篮里

本文由云+社区发表 SQLite 在移动端开发中广泛使用,其使用质量直接影响到产品的体验。 常见的 SQLite 质量监控一般都是依赖上线后反馈的机制,比如耗时监控或者用户反馈。这种方式问题是: ...

腾讯云加社区
33分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部