Skip to content

Latest commit

 

History

History
196 lines (138 loc) · 7.31 KB

今日头条三面面经.md

File metadata and controls

196 lines (138 loc) · 7.31 KB
Raw

今日头条三面面经

  • inline和block的区别

    • 其实就是块级元素和内联元素。block元素单独一行，inline元素前后不产生换行。一系列的inline元素都在同一行内显示，直到该行铺满。

    • 常见的inline元素：

      • <span> <a> <strong> <em> <label> <input> <select> <textarea> <img> <br>
// 可以发现都是对字进行描述的，比如空行啊，粗体啊斜体之类的

    • 常见的block元素

      • <div> <form> <table> <p> <h1-h6> <ol>

    • block元素可以包含block元素和inline元素；但inline元素只能包含inline元素

    • 可以通过display:inline和display:block的设置，改变元素的布局级别

    • display:block 会让所有block元素各自新一行，默认情况下，block元素宽度自动填满其父元素宽度

      • block元素可以设置长度/宽度，但是仍旧是独占一行

      •

        可以设置margin和padding属性

    • display：inline

      • inline元素设置长度/宽度无效
      • inline元素的水平方向的padding和Margin属性会生效，但是竖直方向不会生效

    • display：inline-block，意思就是将对象呈现为inline对象，但是对象内容作为block对象呈现，之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

  • position的四种值

    • absolute：绝对定位，相对于static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
      • 当给绝对定位元素设置定位值时，该元素会延着DOM树向上查找，直到找到一个具有定位属性的祖先元素，则定位相对于该元素，在该例子中，由于其祖先元素都没有定位属性，则该绝对定位元素会相对于body体进行定位；如果给其父元素加上一个定位属性，则该绝对定位元素会相对于这个父元素
    • fixed：绝对定位，相对于相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    • relative：相对定位，相对于其正常位置进行定位。不会改变行内元素的display属性，没有脱离普通流，只是视觉上发生的偏移。
    • static：默认值。没有定位
    • inherit：规定应该从父元素继承 position 属性的值

  • 如何实现水平居中（回头试试）

    • Flex布局下

      .flex{
    display:flex;
    flex-direction: row //主轴为垂直方向，起点在上沿。
    justify-content: center;
}

    • 行内元素（文本）居中：

      text-align:center

    • 块级元素居中

      .center-me { margin: 0 auto; }  // 设置 margin-left 和 margin-right 为 auto

    • 父元素设置text-align:center，子元素设置display：inline-block

    • width: fit-content;
margin-left: auto; 
margin-right: auto;

  • 闭包

    • 闭包可以用于在对象中创建私有变量

    • 闭包实现单例模式

      var gameInstance=(function(){  
  
    var inst=null;  
  
    function getInstance(){  
        if(inst ==null){  
  
            inst = new myobj();  
            console.log("new instance");  
            return inst;  
        }else{  
            return inst;  
        }  
    }  
  
  
    function myobj(){  
  
        this.name="zjw";  
        this.age=24;  
    }  
  
    myobj.prototype.show = function(){  
        console.log("name:"+this.name+" age:"+this.age);  
    };  
  
  
    return getInstance;  
})();  
  
  
gameInstance().show();  
gameInstance().show();

  • css实现一个硬币旋转的效果

    • 大概是 transform: rotatoY(); 然后定义帧动画

  • em和rem的对比

    • em是字体排印的一个单位，也就是说如果当前选择器的font-size属性的值为 20px,那么1em=20px
    • 它是字体排版的一个单位，等同于根font-size。这意味着1rem等同于中的font-size

  • 事件代理中怎么确定哪个子元素 传递过来的消息

    • 通过传进来的event.target可以确定哪个子元素，比如event.target.id / event.target.nodeName
    • 另外在父元素里添加子元素，通过事件代理就可以避免添加不上事件/ 无需手动添加事件

  • 原生AJAX：https://www.cnblogs.com/YiminLiu/p/6078987.html

    • get请求

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //第一个参数是请求方法，第二个参数是url，第三个参数是是否异步，true代表异步，false代表同步
	xmlhttp.send();//如果是post请求的话这个可以写一个string参数
}
</script>
</head>
<body>

  • 进程间的通信

    • 管道pipe：管道是一种半双工的通信方式，数据只能单向流动，而且只能在具有亲缘关系的进程间使用。进程的亲缘关系通常是指父子进程关系。
    1. 命名管道FIFO：有名管道也是半双工的通信方式，但是它允许无亲缘关系进程间的通信。
    2. 消息队列MessageQueue：消息队列是由消息的链表，存放在内核中并由消息队列标识符标识。消息队列克服了信号传递信息少、管道只能承载无格式字节流以及缓冲区大小受限等缺点。
    3. 共享存储SharedMemory：共享内存就是映射一段能被其他进程所访问的内存，这段共享内存由一个进程创建，但多个进程都可以访问。共享内存是最快的 IPC 方式，它是针对其他进程间通信方式运行效率低而专门设计的。它往往与其他通信机制，如信号两，配合使用，来实现进程间的同步和通信。
    4. 信号量Semaphore：信号量是一个计数器，可以用来控制多个进程对共享资源的访问。它常作为一种锁机制，防止某进程正在访问共享资源时，其他进程也访问该资源。因此，主要作为进程间以及同一进程内不同线程之间的同步手段。
    5. 套接字Socket：套解口也是一种进程间通信机制，与其他通信机制不同的是，它可用于不同及其间的进程通信。
    • 信号 ( sinal ) ： 信号是一种比较复杂的通信方式，用于通知接收进程某个事件已经发生。

  • 如果图片加载不出来，前端可以怎么处理