前端优化,包括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
转载于:https://www.cnblogs.com/hyry/p/11216438.html
前端优化,包括css,jss,img,cookie相关推荐
- [前端优化]使用Combres合并对js、css文件的请求
在前端优化的各种金律铁规中,"减少客户端对资源的请求"都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文. 园子中也有几篇Combres组 ...
- Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
- 雅虎前端优化的35条军规
阅读目录 内容部分 css部分 js部分 javascript, css 图片 cookie 移动端 服务器 摘要:无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要 ...
- Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
- 干货 | Web前端优化及工具集锦
原文地址:http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization 前端的性能对于一个Web应用来说非 ...
- 前端点滴(网络协议/HTML/前端优化/浏览器)
前端点滴(网络协议/HTML/前端优化/浏览器)---倾尽所有 网络协议/HTML/前端优化/浏览器 IOS七层模型 网络协议 一. HTTP与HTTPS协议 (1)http与https概述 (2)h ...
- web前端优化(加快加载速度,由点滴做起)
前端是庞大的,包括HTML.CSS.Javascript.Image.Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 1. 从用户角度而言 ...
- y-1.前端优化不完全
前端优化不完全指南 历时144000000毫秒出山的前端优化篇,若你问我有什么感悟? 那我告诉你,看到毫秒啊,火箭啊,这些与优化相关的词,都有莫名的亲切感. 本文主要从工作效率.速度性能.稳定性.响应 ...
- 【前端优化】雅虎前端优化的35条军规(存档备用)
目录 内容部分 css部分 js部分 javascript, css 图片 cookie 移动端 服务器 摘要:无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪 ...
最新文章
- c语言le后能跟变量吗,【C语言】C语言常量和变量
- 国内首个三维重建系列视频课程,涉及SFM、立体匹配、多视图几何、结构光、单目深度估计等...
- 任正非:我若贪生怕死,何来让你们去英勇奋斗
- 八年级下册册计算机计划,粤教版(B版)信息技术八年级下册教学工作计划
- ASP.NET Core2基于RabbitMQ对Web前端实现推送功能
- 绿茶2003服务器系统 新浪,我在用WIN server2003
- SMM - 系统管理模式,SMRAM
- python输出输入的字符串_python笔记3-输出输入、字符串格式化
- 【最大连接数】Linux的文件最大连接数
- 一个意想不到的CDO.Message 错误
- 携号转网实时手机号归属地查询接口API
- 电脑文件无法删除怎么办?
- 数字后端基本概念介绍Wire
- (高小德用车)高仿滴滴/快的应用源代码
- The chain rule(链式法则)
- phhphphphphphphp转自 细雪之舞 专注DEV
- 关于无线wifi漫游设置
- geany配置python_Geany配置教程(Python)windows
- 航天信息a3连接不上服务器,航天信息睿财A3使用说明
- Jeston Agx Xavier CPU GPU 高负载功耗测试