前言:

最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教。

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前端如何进行性能优化的更多相关文章

  1. 前端project与性能优化(长文)

    原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题 ...

  2. 从就业面分析web前端开发工程师就业前景(2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  3. 第四章 Activity和Activity调用栈分析 系统信息与安全机制 性能优化

    1.Activity生命周期理解生命周期就是两张图:第一张图是回字型的生命周期图第二张图是金字塔型的生命周期图 注意点(1)从stopped状态重新回到前台状态的时候会先调用onRestart方法,然 ...

  4. Web篇之JS性能优化

    首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...

  5. Web性能API——帮你分析Web前端性能

    前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...

  6. 使用window.performance分析web前端性能

    参考链接:https://blog.csdn.net/lovenjoe/article/details/80260658

  7. WEB前端开发常用的优化技巧汇总

    减少HTTP请求次数或者减少请求数据的大小 页面中每发送一次HTTP请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性 ...

  8. Skyline Web 端数据浏览性能优化

    三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...

  9. web前端图片加载优化,从图片模糊到清晰的实现过程

    在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐? 默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我 ...

随机推荐

  1. RecyclerView详解

    RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实 ...

  2. Gradle 1.12用户指南翻译——第三十四章. JaCoCo 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  3. 怎样重建一个损坏的调用堆栈(callstack)

    原文作者:Aaron Ballman原文时间:2011年07月04日原文地址:http://blog.aaronballman.com/2011/07/reconstructing-a-corrupt ...

  4. VS2010中使用Jquery调用Wcf服务读取数据库记录

    VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...

  5. Linux - test测试标志的意思总结

    测试的标志 代表意义 1. 关於某个档名的『文件类型』判断,如 test -e filename 表示存在否 -e 该『档名』是否存在?(常用) -f 该『档名』是否存在且为文件(file)?(常用) ...

  6. Linux打包命令 - tar

    上一篇文章谈到的命令大多仅能针对单一文件来进行压缩,虽然 gzip 与 bzip2 也能够针对目录来进行压缩, 不过,这两个命令对目录的压缩指的是『将目录内的所有文件 "分别" 进 ...

  7. 拆轮子之Fish动画分析

    概述 最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...

  8. Spring 官网下载zip jar

    第一步:打开官网:http://www.springsource.org/download/community: 第二步:点击图片 第三步:点击图标 第四步:找到如下链接,点击进去 第五步:再找到如下 ...

  9. HDFS APPEND性能测试

    hbase在写入数据之前会先写hlog,hlog目前是sequencefile格式,采用append的方式往里追加数据.之前团队的同学测试关闭hlog会一定程序上提升写hbase的稳定性.而在我之前的 ...

  10. Redis客户端ServiceStack.Redis的简单使用

    在nuget中下载ServiceStack.Redis,但是运行之后会出现一个问题: Exception: "Com.JinYiWei.Cache.RedisHelper"的类型初 ...