WEB前端性能优化小结
转:http://www.gafish.net/archives/1514
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前端性能优化。
HTML部分
- 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;
- 减少DOM节点:加速页面渲染;
- 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;
- 防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;
- 正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;
- 链接为目录或首页的地址后面加”/”,如http://www.qq.com/;
- 用LINK而不用@import方式导入样式;
- 样式放在页头,JS放在页尾;
- 缩小favicon.ico并缓存;
CSS部分
- 避免使用 CSS Expressions(CSS表达式):如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
- 避免使用 CSS Filter(CSS滤镜);
- 使用CSS缩写,减少代码量;
- 通过CSSSprites把同类图片合成一张,减少图片请求;
- 减少查询层级:如.header .logo要好过.header .top .logo;
- 减少查询范围:如.header>li要好过.header li;
- 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
- 删除重复的CSS;
Javscript部分
- 尽量少用全局变量;
- 使用事件代理绑定事件,如将事件绑定在body上进行代理;
- 避免频繁操作DOM节点;
- 不使用EVAL;
- 减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;
- 类型转换:把数字转换成字符串使用”” + 1,浮点数转换成整型使用Math.floor()或者Math.round();
- 对字符串进行循环操作,譬如替换、查找,应使用正则表达式;
- 删除重复的JS;
服务器部分
- 尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;
- 压缩CSS、JS文件,缩短文件传输时间;
- 避免404错误:特别要避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;
- 一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机名,这里要做一个权衡;
- 使用CDN加速,使用户从离自己最近的服务器下载文件;
- 减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;
- 为文件头指定Expires,使内容具有缓存性;
- 使用gzip压缩内容;
WEB前端性能优化小结的更多相关文章
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- Web前端性能优化教程03:添加Expires头
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...
- Web前端性能优化教程04:压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
- Web前端性能优化教程07:精简JS 移除重复脚本
本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看: 一.精简javascript 基础知识 精简:从javascript代码中 ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
随机推荐
- Tesseract-OCR识别验证码
1. 安装Tesseract-OCR,安装后测试下是否安装成功
- Win7+xp命令行 一键修改IP、DNS
这里提供了一个简便方法:(该方法为Win7下的,XP下的见最后一行) 第一步:新建一个txt文件 第二步:在文件中添加如下内容: netsh interface ip set address name ...
- 多线程的Python 教程--“贪吃蛇”
本指南的里代码可以在这里下载: threadworms.py ,或者从 GitHub.代码需要 Python 3 或 Python 2 ,同时也需要安装 Pygame . 点击查看大版本图片 ...
- 离线树状数组 hihocoder 1391 Countries
官方题解: // 离线树状数组 hihocoder 1391 Countries #include <iostream> #include <cstdio> #include ...
- sql server 2008 r2 出问题
1.想利用sql2008的数据挖掘功能,以为是没有安装全,所以就卸载了. (1)利用Windows Installer Clean UP将以前的卸载干净 (2)出现了Could not open ke ...
- 记录一下ORACLE 10gR2的软件下载地址,备用。
转载自:http://www.eygle.com/archives/2008/06/10gr2_download_link.html 记录一下ORACLE 10gR2的软件下载地址,备用. 下载OTN ...
- WCF_Config頁面常用配置
右键点击App.config文件,选中Edit WCF Configuration进行编辑,我们添加2个baseAddress,一个是基于HTTP协议的:一个是基于TCP协议的.同时添加2个bindi ...
- Ubuntu 上安装R
1. 编辑 /etc/apt/sources.listsudo cp /etc/apt/sources.list /etc/apt/sources.list.backupsudo gedit sour ...
- 项目常用jquery/easyui函数小结
#项目常用jquery/easyui函数小结 ##背景 项目中经常需要使用到一些功能,封装.重构.整理后形成代码沉淀,在此进行分享 ##代码 ```javascript /** * @author g ...
- POJ 2395 Out of Hay(MST)
[题目链接]http://poj.org/problem?id=2395 [解题思路]找最小生成树中权值最大的那条边输出,模板过的,出现了几个问题,开的数据不够大导致运行错误,第一次用模板,理解得不够 ...