全方位分析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张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我 ...
随机推荐
- g++和gcc的相同点和区别
gcc和g++的区别和联系 gcc和g++都是GNU(一个组织)的编译器. 1.对于.c后缀的文件,gcc把它当做是C程序:g++当做是C++程序: 2.对于.cpp后缀的文件,gcc和g++都会当做 ...
- Android高通平台调试Camera驱动全纪录
项目比较紧,3周内把一个带有外置ISP,MIPI数据通信,800万像素的camera从无驱动到实现客户全部需求. 1日 搭平台,建环境,编译内核,烧写代码. 我是一直在Window下搭个虚拟机登服务器 ...
- java实习面试题(阿里一面)
1.抽象类和接口的不同点: 抽象类可以有构造函数,接口中不能有构造函数: 抽象类中可以有普通成员变量,但是接口中不能有普通成员变量: 抽象类中可以包含非抽象的普通方法,但是接口中必须是抽象方法:(jd ...
- javascript学习(三)——常用方法(2)
一.兼容性较高的浏览器页面关闭 //关闭网页,不支持火狐(火狐返回上次浏览页面) //FireFox非window.open()等弹出页面,需要在地址栏中输入about:config, 然后将do ...
- 全面解读Java NIO工作原理(4)
全面解读Java NIO工作原理(4) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...
- Servlet 学习总结
Servlet资料整理[很全很强大] 分类: J2EE2009-10-23 00:51 671人阅读 评论(0) 收藏 举报 servletsessionstring服务器initialization ...
- jsoup 使用总结2--高级用法之 :gt(n)
jsoup 使用总结2--高级用法之 :gt(n) 大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询:具体使用方法可以参考jsoup官网文档 部分h ...
- 八爪鱼在哪里设置xpath
分享:35个做好的爬虫规则+160篇图文教程汇总 一般在八爪鱼中,获取网页上某个元素的XPATH有以下几种方式:一.在内置浏览器中点选的操作,八爪鱼自动识别XPATH.但是有时候,自动识别的可能不准确 ...
- Yii2数据接口
写接口之前先确认那你已经安装了Yii2的basic版或者advanced版,如果还没有,赶快去看这篇文章:composer安装Yii2. 现在默认你已经安装了basic版或者advanced版了,并且 ...
- html居中定位
<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.or ...