前端面试总结下~

1、简述下src和href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src：指向的内容会嵌入到文档中当前标签的所在位置，在请求src资源时会将指向的资源下载并应用到文档内
href:指向网络资源的所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接

2、什么是CSS Hack？

css Hack是通过在css样式中加入一些特殊符号，已达到被不同浏览器识别并应用到不同css样式的目的。

.bdw{width:300px;_width:200px;} _width只有ie6能识别，所以其他浏览器识别width，ie6会执行_width:200px;

3、简述下你了解到的Web攻击技术？

sql入注：把SQL命令插入到web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意sql命令。

XSS:它允许恶意web用户将代码植入到提供给其它用户使用的页面中(在论坛博客中加入恶意链接，当用户点击链接时，就会把隐私信息发送到攻击者的电脑，导致被窃取信息)

4、浏览器是如何渲染界面的？

DNS域名解析-建立TCP连接-发起http请求-接受响应结果-浏览器解析html-浏览器布局渲染

附带浏览器中输入url发生了什么？

解析域名-建立tcp连接-发起http请求-接收响应结果-浏览器解析html-浏览器布局渲染

400：Bad Request 请求报文中存在语法错误

5、讲述下对MVC、MVVM的理解？

MVC是一种架构模式，M表示Model，V表示视图View，C表示控制器Controller

MVVM是一种设计思想，M表示Model，V表示视图View，VM表示数据与模型（区别MVC中，C是用于跳转至哪个页面，而VM只是将数据进行转换或者封装）

6、写一个function，清除字符串前后的空格兼容所有浏览器

function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}

function myFunction() {
    var str = myTrim("        Hello World11!        ");
    console.log(str);
}


myFunction();


Jquery:
trim()

7、简述同步和异步的区别？

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

8、怎样添加创建移除、赋值、移动、查找节点？

var para=document.createElement("p"); //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1");//向一个已有的元素追加这个新元素
element.appendChild(para); //向这个已有的元素追加新元素

（2）添加、移除、替换、之前插入、之后插入、复制

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

      insertAfter()

      cloneNode() 

（3）查找

      document.getElementsByTagName("")    //通过标签名称

      document.getElementsByName("")    //通过元素的Name属性的值

      document.getElementById("")    //通过元素Id，唯一性

      document.getElementsByClassName("");  //通过类查找

      document.querySelector("")

9、清除数组中重复的元素？

function unique(arr){
        var result = [];
        for(var i=0;i<arr.length;i++){
            if(result.indexOf(arr[i])==-1){
                result.push(arr[i])
            }
        }
        return result;
    }

10、说说px、em、rem和各自的使用场景？

px就是css中最基本的长度单位，

em是相对单位，相对的基准点是浏览器字体大小(若浏览器默认字体大小是16px,那1em = 16px)，用来解决，鼠标缩放浏览器大小导致的界面错乱，字体大小相对于父元素 html{font-size: 62.5%} 16*62.5% = 10px

rem 也是相对单位，只相对<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等

rem用来响应式开发

11、$(document).find(“div>p”).html();语句的作用？

整个界面搜索所有div后面的所有p标签下的html代码

element element 选取div内部包含的所有p

12、ajax beforeSend() async:true dataType

beforeSend方法用于在向服务器发送请求前添加一些处理函数,

常见的一种效果，在用ajax请求时，没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”，用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。

dataType：服务器返回的数据类型

async:true 是否异步，默认异步

13、给string添加一个方法，然后将每个字符之间添加空格返回

var str = "hello world";
var str1 = str.split("").join(" ");
    console.log(str1);

14、请简述promise的编程模式，和应用场景

1 解决回调地狱
比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参
- 2 promise 可以实现在多个请求发送完成后再得到或者处理某个结果
- 1.最简单的实现
  基于上面的应用场景发现promise可以有三种状态，分别是pedding 、Fulfilled、 Rejected。
  
  Pending Promise对象实例创建时候的初始状态
  Fulfilled 可以理解为成功的状态
  Rejected可以理解为失败的状态
  - 构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
  - Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
  - 当状态变为resolve时便不能再变为reject，反之同理。
  作者：Keely袁庆玲
  链接：https://www.jianshu.com/p/fc5030e725ae
  來源：简书
  简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

15、display:none;和visible:hidden;区别

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

猜你喜欢