前端优化,来自某懒观看麦子学院视频的笔记。

  1. 尽可能减少HTTP的请求数
  2. 使用CDN
  3. 添加Expirs头,或者Cache-control
  4. Gzip组件压缩文件内容
  5. 将CSS放在页面上方
  6. 将脚本放到页面下方
  7. 减少CSS中Expressions:只在IE中使用,在css中通过js动态赋值
  8. 将javaScript和CSS独立成外部文件
  9. 减少DNS查询
  10. 压缩javaScript和CSS
  11. 避免重定向
  12. 移除重复的脚本
  13. 配置实体标签(ETags):客户端请求文件,服务器读取文件标签,如果未修改就直接返回304.
  14. 使用AJAX缓存
  15. 避免空的src href属性
  16. 尽早地刷新缓冲
  17. 使用get来完成ajax
  18. 延迟加载:分批加载
  19. 预先加载:客户端缓存js文件等
  20. 减少DOM元素
  21. 避免404页面
  22. 高效缩写CSS
  23. bigpipe技术,分层显示,先出框架,再加载框架内的物体。
  24. 使用替代@import
  25. 避免使用滤镜:只在旧版IE中使用,修正图片问题
  26. CSS无图片技术:css image(css引入背景图片比较占资源,如果用css绘制类似小三角这样的简单图片,则大大减负)
  27. smush.it、转png格式压缩图片大小
  28. 合并和拆分图片:合并:CSS sprites 将小图片合成大图片,再用背景定位显示图标。拆分:多线程拆分后下载。
  29. 多域名下载图片
  30. IE6缓存背景图片
  31. 预加载图片
  32. 减小cookie的体积,移除不必要的cookie(注意在适应级别上设置cookie,以便子域名不受影响),设置cookie域
  33. 静态资源使用无cookie域名
  34. 设置合理的cookie过期时间
  35. 优化js循环语句。将length属性抽取至判断语句之外。for(in)效率最差,for(;;)=while();
  36. js使用闭包进行缓存
  37. js不再循环中创建函数。改为抽取函数后调用
  38. js手动消除引用,告诉垃圾回收器。不推荐delete函数,推荐使用=null的方法。
  39. 慎用js全局对象,因为不会被垃圾回收
  40. js绑定的事件不需要后取消绑定。推荐用on,防止多次绑定
  41. 慎用js闭包,可能会导致内存泄漏
  42. js少用eval,特别是在循环内。json[i][变量]=1这样的语句不要使用eval
  43. 使用json格式初始化js的对象和数组。而不是new一个。前者引擎直接解释,后者调用构造器。
  44. js使用Math.floor(),“”+的方示进行类型转换。Math是内部对象
  45. js使用正则处理字符串比js循环要快,但构建正则对象比较耗时,尽量抽取后复用。
  46. 存储时使用对象还是数组。键值对中值多样,使用对象。其他使用数组
  47. 数组中对象尽量一致
  48. 缓存ajax.函数缓存。h5中的sessionStorage(会话级)和localStorage(持久化)
  49. bool值的判定,通过率越小越往前。
  50. 工具yslow、pagespeed

前端优化,包括css,jss,img,cookie的更多相关文章

  1. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...

  2. 前端优化:css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  3. flask前端优化:css/js/html压缩

    1.先压缩再传输,可以减少传输的大小,减少传输时间,但是压缩需要时间,所以最终页面显示是快了还是慢了,需要比较 2.先看html压缩模块:pip install Flask-HTMLmin 压缩前:大 ...

  4. 【前端优化之拆分CSS】前端三剑客的分分合合

    几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...

  5. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  6. [转] Web前端优化之 Cookie篇

    原文链接: http://lunax.info/archives/3095.html Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Re ...

  7. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  8. 【转】yahoo前端优化军规

    雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...

  9. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

随机推荐

  1. Excel上下标如何设置?

    Excel表格怎么设置上下标?Excel上下标设置技巧 在21世纪的我们,平时的工作和学习中,经常会使用到一些专业的文档,比如方程式.数据的公式和科学计数等,其中均会涉及到许多的上下标符号输入以及使用 ...

  2. robotframework框架 - 利用RequestsLibrary关键字轻松实现接口自动化!

    robotframework(后续简称为robot)是一款自动化测试框架,可能做各种类型的自动化测试. 本文介绍通过robotframework来做接口测试. 第一步:安装第三方库,提供接口测试的关键 ...

  3. 51和32共用keil5方法

    链接:https://blog.csdn.net/qq_41639829/article/details/81813992 看这位道友写的方法挺好的,可以实现共用,不过有点小问题是,安装 以后,用32 ...

  4. 新版Notepad++加十六进制查看的插件HexEditor

    Notepad++新版虽然去掉了在线插件商店功能,但是依然可以使用自定义插件 Notepad++下载地址 腾讯(请务必点普通下载):https://pc.qq.com/detail/0/detail_ ...

  5. Laravel 即时应用的一种实现方式

    即时交互的应用 在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录.这些业务场景都基本需要遵循以下流程: 客户端触发相关业务,并产生第三方应用的操作(比如支付) ...

  6. Springcloud 中 SpringBoot 配置全集 (收藏版)

    Springcloud 中 SpringBoot 配置全集 (收藏版) 疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群 ...

  7. Gluserfs 架构详解【译】官网

    Gluserfs详解 排版看着不舒服的,可以查看[我的简书](https://www.jianshu.com/p/0340e429431b) doc home:https://docs.gluster ...

  8. 【ST开发板评测】Nucleo-F411RE开箱报告

    前言 面包板又举办开发板试用活动了,很荣幸能获得一块ST官方的Nucleo-F411RE开发板,感谢面包板社区和ST意法半导体的赞助,这是我第一次试用官方的开发板,收到板子后查了一些关于ST官方开发板 ...

  9. intelj idea中除了Find Usage外的另一种查找级联调用的方法

    一.方法 平时都是使用find usage来找一个方法的引用的地方,但是只能查看一级,今天偶然发现个查看多级的办法: 在源码编辑界面:

  10. Linux 磁盘分区、挂载

    一.分区介绍 mbr分区: 1.最多支持四个主分区 2.系统只能安装在主分区上 3.扩展分区要占一个主分区 4.mbr最大只支持2TB,但拥有最好的兼容性 gpt分区: 1.支持无限多个主分区(但操作 ...