Web—10-前端性能优化
2024-09-28 15:48:24
前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。
前端性能优化分为如下几个方面:
一、代码部署:
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、使用字体图标
7、使用css sprite(雪碧图)
8、使用svg图形
9、避免使用CSS表达式
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
10、避免使用css滤镜
javascript:
1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、使用原生方法
6、用switch语句代替复杂的if else语句
7、减少语句数,比如说多个变量声明可以写成一句
8、使用字面量表达式来初始化数组或者对象
9、使用innerHTML取代复杂的元素注入
10、使用事件代理(事件委托)
11、避免多次访问dom选择集
12、高频触发事件设置使用函数节流
13、使用Web Storage缓存数据
最新文章
- Dagger2 (二) 进阶篇
- Win10 UWP 开发学习代码(不断更新)
- UVa 3487 &; 蜜汁建图
- django shell 集合
- 修改Linux系统时区
- UVa 11021 - Tribles
- NYOJ-20 吝啬的国度 AC 分类: NYOJ 2014-01-23 12:18 200人阅读 评论(0) 收藏
- 转:自建CDN防御DDoS(1, 2, 3)infoq
- xml中使用foreach遍历对象
- (一)问候Struts2
- Search in Rotated Sorted Array II——LeetCode
- opencart配置
- Java对文件的16进制读取和操作
- Motivation
- ubuntu中如何安装python3.6
- Solr数据迁移
- Harmonic Value Description HDU - 5916
- SQL server权限管理和备份实例
- 为jqgrid添加统计金额页脚
- Linq基础知识小记三
热门文章
- Vue 框架-01- 入门篇 图文教程
- ActiveMQ5.8.0安装及启动
- 远程桌面到 Ubuntu 虚拟机
- package.json作用
- linux Mint 安装网易云音乐
- Effective C++(1-2) 编译器替换预处理器
- [EffectiveC++]item17:以独立语句将newed对象置入智能指针
- iOS自动化-iOS录屏xrecord及解决iPhone设备不显示的问题
- TCP/IP 协议图--网络层中的 IP 协议
- require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式