全方位分析web前端如何进行性能优化
前言:
最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教。
1、整体资源
(1)js、css源码压缩
(2)css文件放到文档顶部,js 文件放到文档底部
因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误
(3)进行CDN托管(具体可参看https://div.io/topic/930)
(4)data缓存
2、css
(1)避免使用css expression (css 表达式)
微软在IE5时支持,IE8就不支持了,过老的内核,这个基本没有人会使用
(2)使用CSS Sprites(图片精灵)
将图片合到一张大图,并且控制图片大小(在满足显示的情况下,过大图片可以进行质量压缩),目的减小体积,减小http访问次数
(3)js中动态改变元素样式时,使用类名修改,而不是直接在DOM中更改css 属性,避免页面进行重构
3、image
(1)大型web应用中,可以搭建图片服务器,存放图片以及视频资源(具体实施请自行百度)
4、js
(1)模块化编程,养成封装方法的习惯,提高代码的重复利用率
(2)减少闭包的使用频率,减少内存占用
目前想到的是以上,欢迎补充和指教!
全方位分析web前端如何进行性能优化的更多相关文章
- 前端project与性能优化(长文)
原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题 ...
- 从就业面分析web前端开发工程师就业前景(2011.6)
案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...
- 第四章 Activity和Activity调用栈分析 系统信息与安全机制 性能优化
1.Activity生命周期理解生命周期就是两张图:第一张图是回字型的生命周期图第二张图是金字塔型的生命周期图 注意点(1)从stopped状态重新回到前台状态的时候会先调用onRestart方法,然 ...
- Web篇之JS性能优化
首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...
- Web性能API——帮你分析Web前端性能
前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...
- 使用window.performance分析web前端性能
参考链接:https://blog.csdn.net/lovenjoe/article/details/80260658
- WEB前端开发常用的优化技巧汇总
减少HTTP请求次数或者减少请求数据的大小 页面中每发送一次HTTP请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性 ...
- Skyline Web 端数据浏览性能优化
三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...
- web前端图片加载优化,从图片模糊到清晰的实现过程
在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐? 默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我 ...
随机推荐
- RecyclerView详解
RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实 ...
- Gradle 1.12用户指南翻译——第三十四章. JaCoCo 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- 怎样重建一个损坏的调用堆栈(callstack)
原文作者:Aaron Ballman原文时间:2011年07月04日原文地址:http://blog.aaronballman.com/2011/07/reconstructing-a-corrupt ...
- VS2010中使用Jquery调用Wcf服务读取数据库记录
VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...
- Linux - test测试标志的意思总结
测试的标志 代表意义 1. 关於某个档名的『文件类型』判断,如 test -e filename 表示存在否 -e 该『档名』是否存在?(常用) -f 该『档名』是否存在且为文件(file)?(常用) ...
- Linux打包命令 - tar
上一篇文章谈到的命令大多仅能针对单一文件来进行压缩,虽然 gzip 与 bzip2 也能够针对目录来进行压缩, 不过,这两个命令对目录的压缩指的是『将目录内的所有文件 "分别" 进 ...
- 拆轮子之Fish动画分析
概述 最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...
- Spring 官网下载zip jar
第一步:打开官网:http://www.springsource.org/download/community: 第二步:点击图片 第三步:点击图标 第四步:找到如下链接,点击进去 第五步:再找到如下 ...
- HDFS APPEND性能测试
hbase在写入数据之前会先写hlog,hlog目前是sequencefile格式,采用append的方式往里追加数据.之前团队的同学测试关闭hlog会一定程序上提升写hbase的稳定性.而在我之前的 ...
- Redis客户端ServiceStack.Redis的简单使用
在nuget中下载ServiceStack.Redis,但是运行之后会出现一个问题: Exception: "Com.JinYiWei.Cache.RedisHelper"的类型初 ...