前端—每天3道面试题(二)

每天进步一点点，波折烦恼都不见!

一、前端优化性能的方法有哪些？

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)。