每天进步一点点,波折烦恼都不见!
一、前端优化性能的方法有哪些?
1. 减少http请求数
常用的减少http请求数有以下几种
:
- 合并图片。当图片较多时,可以合并为一张大图,从而减少http请求数。经常变化的图片可能不太合适,变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外,还可以充分利用缓存来提升性能。
- 合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。
- 去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。
- 充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据,格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。 如果当前时间小于Expires指定的时间,浏览器就会从缓存中直接获取相关的数据信息或html文件,如果当前时间大于Expires指定的时间,浏览器会向服务器发送请求来获取相关数据信息。
2. 图片优化
优化方法
:
- 尽可能的使用
PNG格式
的图片,它相对来说体积较小。 雪碧图
,CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,但是当整合图片比较大时,一次加载比较慢。随着字体图片、SVG图片的流行,该技术渐渐退出了历史舞台。Base64
,将图片的内容以Base64格式内嵌到HTML中,可以减少HTTP请求数量。但是,由于Base64编码用8位字符表示信息中的6个位,所以编码后大小大约比原始值扩大了 33%。- 使用
字体图标
来代替图片 - 图片的延迟加载,也叫做
赖加载
。
3. 使用CDN
CDN
即内容分发网络,可以使用户就近取得所需内容,解决网络拥挤的状况,提高用户访问网站的响应速度。
4. 减少DOM操作
- 少用全局变量、缓存
DOM
节点查找的结果。减少IO读取操作。 - 利用
事件代理
,可以减少内存使用,提高性能及降低代码复杂度 - 使用
函数节流
(throttle)或函数防抖(debounce),限制某一个方法的频繁触发 - 用
innerHTML
代替DOM操作,减少DOM操作次数,优化javascript性能。
5. 开启GZIP
GZIP即数据压缩
,用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单,到对应的web服务配置文件中设置一下即可。以Apache为例,在配置文件httpd.conf中添加。
6. 样式表和JS文件的优化
一般我们会把css样式表文件放到文件的头部。比如,放到标签中,这样可以让CSS样式表尽早地完成下载。对应js脚本文件,一般我们把他放到页面的尾部。
二、浏览器存储的方式有哪些?
1. Cookie
- 每个浏览器保存cookie的位置不同,都保存在浏览器内部,可以通过相应的操作查看
- 每个浏览器保存cookie的数量限制不同,一般每个网站下不大于50个,不大于4k。
- 每个网站下的cookie是以分号+空格的形式串联起来的
- 一般直接保存的cookie会在浏览器退出时清空,如果要长期保存,就得设置过期时间,使用expires=Date,卸载设置的cookie后面,使用分号+空格隔开
设置cookie:
通过document.cookie="名=值"的方式即可设置cookie,例如:document.cookie = “name=张三; expires=”+new Date(2017,9);
如果要设置过期时间,就在值后面加 分号+空格+expires=过期时间对象/过期时间字符串。
以下是分装的设置cookie的方法
//设置cookie的方法
function setCookie(key,val,time){ //tiem传入保存的天数 比如说30天过期
var nowTime = new Date();
nowTime.setDate( nowTime.getDate()+time );
//时间有GMT/UTC世界时间和北京时间相差8小时,而浏览器设置的时候是按标准时间设置的,所以需要转化。
document.cookie = key+"="+ val +"; expires="+nowTime.toUTCString();
}
获取cookie:
通过document.cookie可以获取该域名下的所有的cookie组成的字符串,格式为名=值得形式,中间由分号+空格分开,如:“name=张三; age=23”
获取之后使用字符串操作拆分即可得到对应的值
以下是获取cookie的封装方法
//获取cookie的方法
function getCookie(cookieName){
var cookies = document.cookie.split("; ");
for(var i=0; i<cookies.length; i++){
var arr = cookies[i].split("=");
if(arr[0] == cookieName){
return arr[1];
}
}
}
删除cookie
相对比较简单,只需要将值清空,并且将过期时间设置为过去即可
封装的删除cookie的方法
//清除cookie,1、讲值清空,2、设置过期时间比现在还早
function deleteCookie(key){
setCookie(key,"",-1);
}
2、localStorage与sessionStorage
-
localStorage和sessionStorage都具有相同的操作方法
-
localStorage长期存放,sessionStorage浏览器关闭时清空
设置值,使用setItemsetItem
- localStorage.setItem(“name”,“张三”);
- sessionStorage.setItem(“name”,“李四”);
获取值,使用getItem
-
localStorage.getItem(“name”);
-
sessionStorage.getItem(“name”);
删除值,使用removeItem
-
localStorage.removeItem(“name”);
-
sessionStorage.removeItem(“name”);
删除所有的值,使用.clear
- localStorage.clear();
- sessionStorage.clear();
三、Sass、LESS 是什么?大家为什么要使用他们?
- 他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
- 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行,也可一在服务端运行 (借助 Node.js)。