面试总结

Posted 2022-08-05 52cyd

一、前端性能优化问题解决
    1.减少http请求
        (1)从设计实现层面简化页面
        (2)合理设置http缓存
        (3)资源合并与压缩
        (4)css sprites：合并css图片、减少请求数
    2.将外部脚本置底（将脚本内容在页面信息内容加载后在加载）
        浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源。
        例如：在脚本加载完成之前，他后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载，如果将脚本文件放在比较靠前的位置，会影响整个页面的加载速度从而影响用户体验
    3.将样式文件放在页面顶部
    4.精简代码

二、html5新标签新属性
    新特性：
        1. 拖拽释放(Drag and drop) API
        2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
        3. 音频、视频 API(audio,video)
        4. 画布(Canvas) API
        5. 地理(Geolocation) API
        6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
        7. sessionStorage 的数据在浏览器关闭后自动删除

三、缓存cookie、localStorage、sessionStorage
    cookie：cookie非常小，它的限制为4kb左右，主要用途保存登陆信息，比如在网站上看到记住密码，通常就是通过cookie中存入一段辨别用户身份的数据来实现
    sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同
    sessionStorage可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
    三者的异同：
        数据的生命期：
            cookie：一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭浏览器后失效
            localStorage：除非被清除，否则永久保存
            sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除
        存放数据大小：
            cookie：4k左右
            localStorage、sessionStorage：一般为5MB
        与服务器端通信：
            cookie：每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题
            localStorage、sessionStorage：仅在浏览器中保存，不参与和服务器的通信
        易用性：
            cookie：需要程序员自己封装，源生的cookie接口不友好
            localStorage、sessionStorage：源生接口可以接受，也可以再次封装来对object和array有更好的支持
    应用场景：
        cookie：每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，
                服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录
        localStorage、sessionStorage：管理购物车
    localStorage和sessionStorage操作：
        1.setItem存储value：将value存储到key字段
        2.getItem获取value：获取指定key本地存储的值
        3.removeItem删除key：删除指定key本地存储的值
        4.clear清除所有的key/value：清除所有的key/value

四、cookie和session的区别
    1.存放位置不同：
        cookie保存在客户端（浏览器），session保存在服务端
    2.存取方式的不同：
        cookie中保存的是字符串，session保存的是对象
    3.安全性问题：
        cookie存储在浏览器中，对客户是可见的，客户端的一些程序可能会窥探，复制以至修正cookie内容
        session存储在服务器，对客户端是透明的，不存在敏感问题泄露的风险

五、DOM文档对象模型
    DOM(document Object Model）,是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。
    通过这些功能可以对HTML文档进行动态操作，从而实现许多动态交互效果。
    通过javascript对HTML DOM进行访问。
    HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。
    可直接调用DOM实现的方法，进行DOM操作，例如：
    getElementById() 返回带有指定 ID 的元素。
    getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
    getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
    appendChild() 把新的子节点添加到指定节点。
    removeChild() 删除子节点。
    replaceChild() 替换子节点。
    insertBefore() 在指定的子节点前面插入新的子节点。
    createAttribute() 创建属性节点。
    createElement() 创建元素节点。
    createTextNode() 创建文本节点。
    getAttribute() 返回指定的属性值。
    setAttribute() 把指定属性设置或修改为指定的值。

六、BOM：浏览器对象模型
    核心对象： window对象
    BOM顾名思义就是为了控制浏览器行为的接口，比如跳转页面，获取屏幕大小等等
    1.window对象
    2.location对象
    3.navigator对象
    4.screen对象
    5.history对象

七、闭包
    1.什么是闭包：
        (1)闭包是指有权访问另一个函数作用域中的变量的函数。
        (2)可以在函数的外部访问到函数内部的局部变量。
        (3)让这些变量始终保存在内存中，不会随着函数的结束而自动销毁。
        闭包是可以在另一个函数的外部访问到其作用域中的变量的函数。而被访问的变量可以和函数一同存在。即使另一个函数已经运行结束，导致创建变量的环境销毁，也依然会存在，直到访问变量的那个函数被销毁。当然，如果仅仅是做一个简单的计数器，大可不用这样麻烦。下面这简短的代码就能轻松实现。
    2.闭包的三个特性：
        (1)函数嵌套函数。
        (2)函数内部可以引用外部的参数和变量。
        (3)参数和变量不会被垃圾回收机制回收。
     3.闭包的好处：
         (1)希望一个变量长期存储在内存中。
         (2)避免全局变量的污染。
         (3)私有成员的存在。
     4.闭包的缺点：
         (1)常驻内存，增加内存使用量。
         (2)使用不当会很容易造成内存泄露。

八、原型链
    1. 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自 己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
    2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

九、Ajax
    ajax：主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新
    同步：浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返 回数据，浏览器才能显示页面
    异步：浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面）， 服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新
    1.ajax过程：
        (1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
       (2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
       (3)设置响应 HTTP 请求状态变化的函数
       (4)发送 HTTP 请求
       (5)获取异步调用返回的数据
       (6)使用 JavaScript 和 DOM 实现局部刷新
    2.ajax 请求的时候 get 和 post 方式的区别
        (1)get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中， 如果传递中文参数，需要自己进行编码操作，安全性较低。
        (2)post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。
    3.ajax 的缺点
        (1)ajax 不支持浏览器 back 按钮。
        (2)安全问题 AJAX 暴露了与服务器交互的细节。
        (3)对搜索引擎的支持比较弱。
        (4)破坏了程序的异常机制。

十、说说你对 this 的理解
    在 JavaScript 中，this 通常指向的是我们正在执行的函数本身，或者是，指向该函数所属 的对象。
    全局的 this → 指向的是 Window
    函数中的 this → 指向的是函数所在的对象 错误答案
    对象中的 this → 指向其本身
    事件中 this → 指向事件对象