前端优化,包括css,jss,img,cookie
前端优化,来自某懒观看麦子学院视频的笔记。
- 尽可能减少HTTP的请求数
- 使用CDN
- 添加Expirs头,或者Cache-control
- Gzip组件压缩文件内容
- 将CSS放在页面上方
- 将脚本放到页面下方
- 减少CSS中Expressions:只在IE中使用,在css中通过js动态赋值
- 将javaScript和CSS独立成外部文件
- 减少DNS查询
- 压缩javaScript和CSS
- 避免重定向
- 移除重复的脚本
- 配置实体标签(ETags):客户端请求文件,服务器读取文件标签,如果未修改就直接返回304.
- 使用AJAX缓存
- 避免空的src href属性
- 尽早地刷新缓冲
- 使用get来完成ajax
- 延迟加载:分批加载
- 预先加载:客户端缓存js文件等
- 减少DOM元素
- 避免404页面
- 高效缩写CSS
- bigpipe技术,分层显示,先出框架,再加载框架内的物体。
- 使用替代@import
- 避免使用滤镜:只在旧版IE中使用,修正图片问题
- CSS无图片技术:css image(css引入背景图片比较占资源,如果用css绘制类似小三角这样的简单图片,则大大减负)
- smush.it、转png格式压缩图片大小
- 合并和拆分图片:合并:CSS sprites 将小图片合成大图片,再用背景定位显示图标。拆分:多线程拆分后下载。
- 多域名下载图片
- IE6缓存背景图片
- 预加载图片
- 减小cookie的体积,移除不必要的cookie(注意在适应级别上设置cookie,以便子域名不受影响),设置cookie域
- 静态资源使用无cookie域名
- 设置合理的cookie过期时间
- 优化js循环语句。将length属性抽取至判断语句之外。for(in)效率最差,for(;;)=while();
- js使用闭包进行缓存
- js不再循环中创建函数。改为抽取函数后调用
- js手动消除引用,告诉垃圾回收器。不推荐delete函数,推荐使用=null的方法。
- 慎用js全局对象,因为不会被垃圾回收
- js绑定的事件不需要后取消绑定。推荐用on,防止多次绑定
- 慎用js闭包,可能会导致内存泄漏
- js少用eval,特别是在循环内。json[i][变量]=1这样的语句不要使用eval
- 使用json格式初始化js的对象和数组。而不是new一个。前者引擎直接解释,后者调用构造器。
- js使用Math.floor(),“”+的方示进行类型转换。Math是内部对象
- js使用正则处理字符串比js循环要快,但构建正则对象比较耗时,尽量抽取后复用。
- 存储时使用对象还是数组。键值对中值多样,使用对象。其他使用数组
- 数组中对象尽量一致
- 缓存ajax.函数缓存。h5中的sessionStorage(会话级)和localStorage(持久化)
- bool值的判定,通过率越小越往前。
- 工具yslow、pagespeed
前端优化,包括css,jss,img,cookie的更多相关文章
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- 前端优化:css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- flask前端优化:css/js/html压缩
1.先压缩再传输,可以减少传输的大小,减少传输时间,但是压缩需要时间,所以最终页面显示是快了还是慢了,需要比较 2.先看html压缩模块:pip install Flask-HTMLmin 压缩前:大 ...
- 【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- [转] Web前端优化之 Cookie篇
原文链接: http://lunax.info/archives/3095.html Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Re ...
- [转][前端优化]使用Combres合并对js、css文件的请求
本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...
- 【转】yahoo前端优化军规
雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
随机推荐
- ActiveMQ下载与安装(消息中间件JMS)
下载 官方网站下载:http://activemq.apache.org/ 1.3.2安装(Linux) (1)将apache-activemq-5.12.0-bin.tar.gz 上传至服务器 (2 ...
- Python网络爬虫_Scrapy框架_1.新建项目
在Pycharm中新建一个基于Scrapy框架的爬虫项目(Scrapy库已经导入) 在终端中输入: ''itcast.cn''是为爬虫限定爬取范围 创建完成后的目录 将生成的itcast.py文件移动 ...
- [洛谷P1373][题解]小a和uim之大逃离
(别点我我不是题目) 这道题可以很容易看出是一道dp(因为是在dp关卡里找的) 稍微想一下就可以yy出一个不错的状态: f[i][j][k][0/1]代表走到了点(i,j).膜液量相差k(小a-uim ...
- 【西北师大-2108Java】第十四次作业成绩汇总
[西北师大-2108Java]第十四次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第16周学习指导及要求 实验目的与要求 (1)掌握Java应用程序的打包操作: (2)掌握线程概念: (3) ...
- [考试反思]1113csp-s模拟测试113:一念
在这么考下去可以去混女队了2333 两天总分rank14,退役稳稳的 的确就是没状态.满脑子都是<包围保卫王国>ddp/LCT/ST,没好好考试. 我太菜了写题也写不出来考试也考不好(显然 ...
- 如何开启php错误日志
nginx与apache不一样,在apache中可以直接指定php的错误日志,那样在php执行中的错误信息就直接输入到php的错误日志中,可以方便查询. 在nginx中事情就变成了这样:nginx只对 ...
- Javascript模块化开发3——Grunt之预处理
一.grunt预处理简述 grunt的注册任务函数本身会对传入的参数和配置对象里的相关属性进行一定的预处理,方便任务函数进行操作. grunt的registerTask方法和registerMulti ...
- Postman安装出错.NET Framework 4.5 failed to install
正常情况下安装Postman不会出错,联网下载即可,这里的异常是因为环境不允许升级.NET4.5 解决方法:找到Postman的安装文件夹,将postman.exe启动发现可以使用 若没有安装过的文件 ...
- Java 中 PO 与 VO 的区别
什么是PO PO(Persistence Object 持久化对象)是直接跟持久层数据库打交道的java Bean (model,entity,bean等叫法都是可以的),里面除了私有的成员变量之外, ...
- Python爬虫,你是否真的了解它?
程序员有时候很难和外行人讲明白自己的工作是什么,甚至有些时候,跟同行的人讲清楚“你是干什么的”也很困难.比如我自己,就对Daivd在搞的语义网一头雾水.所以我打算写一篇博客,讲一下“爬虫工程师”的工作 ...