原文来自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

二、最最基本的

  • CSS顶部, JS底部
  • YUI compressor/Gzip
  • CDN 有
  • 必要的CSS Sprite
  • Ajax可缓存

以上没什么好说的。

三、CSS渲染、页面重绘以及回流

  • 尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器,以提高整站整体CSS渲染。
  • 避免某些expression表达式,避免IE6的AlphaImageLoader png透明滤镜,可以试试使用fireworks生成png8 alpha透明(目前photoshop只有png8 索引透明)。
  • 适当定高,例如如果div内容可能有高度差异的动态内容载入。什么意思?例如右上角的个人用户信息是页面渲染完毕之后动态载入的。但是,有可能会出现高度20像素的小图标,,而文字所占据高度为12px * 1.4 = 16.8px, IE6又存在行高被拒的悲剧。因此,如果这部分div不定高,就会出现个人信息载入后,整个页面下沉几像素(3.2像素?)页面重绘的问题。

    记住这么个原则, 页面刷新载入的时候,应避免页面元素的晃动、位移等,这些都是额外的重绘,会让你的CPU和风扇兴奋的。

  • 图片设定不响应重绘的尺寸,如果你的<img>不设定尺寸、同时外部容器没有定死高宽,则图片在首次载入时候,占据空间会从0到完全出现,左右上下都可能位移,发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题,这些都让浏览器重绘了,一是体验可能不好,二是烧CPU的。

    你可以使用width/height控制,或者在CSS中设置。

  • <textarea>或者使用<script type="text/html">存储动态载入HTML或模板HTML,降低首屏加载的渲染时间。
  • 具有复杂动画的元素绝对定位-脱离文档流,避免强烈的回流。现代浏览器可以渐进使用CSS3 transition实现动画效果,比改变像素值来的高性能。
  • 不使用iframe,据说开销最大的DOM元素。

四、降低静态资源请求数

  • 开始提到的CSS sprite,目前因降低后期维护成本,sprite的规模有所降低
  • 字符与图形生成,如: 该图效果之前有介绍
  • CSS图形生成,如三角
  • CSS模拟,如几像素的投影效果
  • CSS3技术,例如渐变效果CSS3 gradient+filter投影效果CSS3 box-shadow+filter blur。
  • base64 url技术,例如虚点效果:

五、资源的复用

  • 团队CSS样式库,快速构建网站 – Bootstrap有点类似我们这个味道,.span1,.span2,.span3,.span4,.span4,...
  • 高宽自适应 – 无论选项卡、按钮等还是各个大小模块都是高宽自适应的,以适用于各种环境、需求
  • CSS3 font-face技术 – 纯色图标大小以及颜色可以随意控制,增强复用

六、js/HTML交互相关

  • localStorage本地存储与优化。两种实践。
    一是:大数据量交互,数据不怎么更新的,含版本控制机制,一次请求,之后高枕无忧;



    二是代替cookie实现某些功能,带过期时间管理,降低页面cookie大小(IE6-7依然使用Cookie)。
  • 图片/广告位的显屏加载,也就是滚动显示加载
  • 下拉/弹框等默认隐藏资源使用textarea隐藏。需要显示时候才真正显露。
  • 特殊交互JS资源再使用的时候才异步加载(上传图片,显示地图等)
  • 无关紧要资源避开加载渲染高峰显示,例如外站iframe等载入完毕后1秒再DOM创建载入处理(例如嵌入的新浪微博)。
  • 复杂事件侦听与初始化(鼠标移动或键入到该区域才初始化复杂事件)。
  • 键盘事件延迟,例如搜索的Autocomplete效果,或hover延迟浮动层显示
  • MVC – 数据、展现、交互分离
  • 面向数据编程
  • 避免DOM操作,遍历数据而非DOM
  • 事件委托,避免过多的DOM元素的事件绑定
  • 其他N多JS编写细节等

七、浏览器自身的潜力

  • ol列表的数字、table的自适应性
  • <strong><h1-6>粗体效果
  • form相关特性,元素自身特性实现submit以及reset等效果
  • HTML5 placeholder以及其他N多现代浏览器支持特性等

八、问题所在

  • 没有模块加载机制,20个模块脚本参杂在一起,一个页面可能只使用了4个。
  • 图片的拉伸很常见
  • 各种广告跟踪代码,把网站前端性能拉低了一个等级。
  • HTML没有顶边显示,去除冗余空白字符以及注释,因此HTML页面大小未优化。不难,程序那边一直没做相关处理。
  • 头部无用的一段专为IE6的script输出,之前曾做过处理,只IE6输出的,后来因为不同城市不同站等原因,后台那边懒得折腾了。

九、结语

梳理过程中发现有些地方还可进一步改进,比如城市的下拉元素们默认可以放在隐藏的textarea中,我待会就去改掉。项目的实际情况不同,相关的处理优化策略也不一样,适用性也不一样。欢迎通过评论形式分享您的一些优化处理策略,或者帮忙指出我上面说法中有问题的地方。

互相交流,共同进步

他人观点:

  • @wo_is神仙 不要为了优化而优化,如有必要,尽量与后端配合。

(本篇完)

<转>梳理:提高前端性能方面的处理以及不足的更多相关文章

  1. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  2. web前端性能概述

    1.认识前端性能 不管你的网站设计的有多好,后端有多好,对于用户来说全部都是无感知的,用户只关心页面打开的速度,而前端性能表现很大程度上影响着用户的这种感知. 改善前端的性能对用户感知的整体性能提升有 ...

  3. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  4. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  5. Web前端性能杂记

    前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间.对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执 ...

  6. 前端性能优化:gzip压缩文件传输数据

    一.文件压缩的好处 前端生产环境中将js.css.图片等文件进行压缩的好处显而易见,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能. 二.http协议如何支持压缩文件的传输 1.浏览 ...

  7. Web前端性能

    6.1前端性能示例 性能测试工具: Apache Benchmark(ab)得到的响应时间仅为从请求发出开始到接收到HTML的最后一个字节所消耗的全部时间.ab命令行如下: ab -c [并发用户数] ...

  8. web前端性能优化一

    作为一个前端会允许自己的作品,在非硬性条件下出现卡顿? 肯定是不会,所以给大家梳理一下前端性能的优化. 一:文件操作 html文件压缩: 删除无用的空格和换行符等其他无意义字符 css文件压缩: 删除 ...

  9. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

随机推荐

  1. cocos2d-x 如何保持屏幕常亮

    转自:http://blog.csdn.net/wolfking_2009/article/details/8939027 貌似cocos2d-x没有接口直接做这个功能 而各个平台又不一样,所以只能对 ...

  2. Hadoop on Mac with IntelliJ IDEA - 9 解决Type mismatch in value from map问题

    修改陆喜恒. Hadoop实战(第2版)5.3排序的代码时遇到IO异常. 环境:Mac OS X 10.9.5, IntelliJ IDEA 13.1.5, Hadoop 1.2.1 异常具体信息如下 ...

  3. 【M17】考虑使用缓式评估

    1.缓式评估其实就是拖延战术,直到逼不得已的时候才去计算.缓式评估的使用场景有: 2.引用计数,考虑String,String是一个内含char指针(char指针以'\0'结束)的资源管理类,正常情况 ...

  4. map的实现

    1.map的实现是使用平衡树,AVL树或者红黑树. 2.在无序的情况下,查找为常数时间.有序的时候,查找为对数时间.二叉排序树(BST)就是为了解决这个问题. 3.但是,极端情况下,BST的查找效率退 ...

  5. SQL Server-删除表中重复的记录!

    比如现在有一人员表  (表名:peosons)若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 select   p1.*   from   persons   p1,persons   p ...

  6. HDU 5584 LCM Walk 数学

    LCM Walk Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5584 ...

  7. Codeforces Round #253 (Div. 1) A. Borya and Hanabi 暴力

    A. Borya and Hanabi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/442/p ...

  8. DebugView 调试工具

    软件标签: DebugView调试工具 用debugview,打开debugview,运行你的debug版本程序,可以定位到源文件的某一行.在vc源码中需要输出的地方用 OutputDebugStri ...

  9. 好记心不如烂笔头之JQuery学习,第四章

    ---恢复内容开始--- JQuery中的事件和动画 JQuery中的事件: $(document).ready()该事件和JS中的window.load类似,但是window.load中需要等待所有 ...

  10. 条件判断语句if

    一.简单if语句的格式 if 条件表达式 then 语句1 语句2 ...... fi 二.if else语句的格式 if 条件测试 then 语句块1 else 语句块2 fi 三.if elif ...