字节跳动面试(一面)

一、背景

  2019.9.16参加了我的第一个前端面试,投递的公司是字节跳动(上海),简历投出一周后被通知参加视频面试,以下为部分面试题。

二、简答题

  1. flex布局怎样实现页面固定?

    容器属性

    • flex-wrap:nowrap | wrap | wrap-reverse
    • flex-direction:row | row-reverse | column | column-reverse
    • flex-flow:flex-wrap和flex-direction的简写属性
    • justify-content:flex-start | flex-end | center | space-between | space-around
    • align-items: flex-start | flex-end | center | baseline | stretch
    • align-content:flex-start | flex-end | center | space-between | space-around | stretch

    元素属性

    • order:数值越小,排列越靠前,默认为0
    • flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
    • flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
    • flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。
    • flex:flex-grow、flex-shrink和flex-basis的简写属性,默认值为 0 1 auto。
    • align-self:auto | flex-start | flex-end | center | baseline | stretch

Ajax请求怎么实现的?

Ajax是Asynchronous JavaScript and XML的缩写,意思就是用JavaScript执行异步网络请求。

参考链接:https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

  1. new一个xhr对象。
    1 var xml=new XMLHttpRequest();
  2. 调用xhr对象的open方法。
    1 xml.open("Get/Post", "url", true/false);//true为异步,false为同步

     

  3. 调用xhr对象的send方法。
    1 xml.send(null);//GET请求
    2 xml.send(string);//POST请求
  4. 对服务器的响应过程进行监听,来知道服务器是否正确得做出了响应,接着就可以做一些事情。比如获取服务器响应的内容,在页面上进行呈现。
    • responseText:获得字符串形式的相应数据
    • responsXML:获得XML形式的相应数据
    • status和statusText:以数字和文本形式返回http状态码
    • getAllResponseHeader():获取所有的响应报头
    • getResponseHeader():查询响应中的某个字段的值
    • readyState属性:响应返回成功的时候得到通知
      • 0:请求未初始化,open还没有调用
      • 1:服务器连接已建立,open已经调用了
      • 2:请求已经接收,也就是接收到头信息了
      • 3:请求处理中,也就是接收到响应主体了
      • 4:请求已完成,且响应已就绪,也就是响应完成了。
 1 var xml=new XMLHttpRequest(); // 新建XMLHttpRequest对象
 2  3 xml.onreadystatechange = function () { // 状态发生变化时,函数被回调  4 if (xml.readyState === 4) { // 成功完成  5 // 判断响应结果:  6 if (xml.status === 200) {  7 // 成功,通过responseText拿到响应的文本:  8 return success(xml.responseText);  9 } else { 10 // 失败,根据响应码判断失败原因: 11 return fail(xml.status); 12  } 13 } else { 14 // HTTP请求还在继续... 15  } 16 } 17 18 // 发送请求: 19 xml.open('GET', '/api/categories'); 20 xml.send(); 21 22 alert('请求已发送,请等待响应...');

    追问:GET和POST有什么区别?

    参考链接:https://blog.csdn.net/fortunegrant/article/details/79534732

 

    1. GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中,这种区别对用户是不可见的。
    2. 首先是"GET方式提交的数据最多只能是1024字节",因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。注意这是限制是整个URL长度,而不仅仅是你的参数值数据长度。
    3. GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。get请求和post请求在服务器端的区别。
    4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源,资源的内容会被编入HTTP请示的内容中。例如,处理订货表单、在数据库中加入新数据行等。当请求无副作用时(如进行搜索),便可使用GET方法;当请求有副作用时(如添加数据行),则用POST方法。一个比较实际的问题是:GET方法可能会产生很长的URL,或许会超过某些浏览器与服务器对URL长度的限制。然而,在以下情况中,请使用 POST 请求:无法使用缓存文件(更新服务器上的文件或数据库)向服务器发送大量数据(POST 没有数据量限制)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 。

 

2.JS常用事件有哪些?

参考链接:https://www.w3school.com.cn/jsref/jsref_events.asp

属性 当以下情况发生时,出现此事件
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面

 

3.怎样绑定和解绑事件?

参考链接:https://www.cnblogs.com/jiangzhengbin/p/5684450.html

 

    1. 绑定事件:
      • 在DOM元素中直接绑定
        1 
        2 function myAlert(){
        3  alert("弹出警告框"); 4 }
      • 在JavaScript代码中绑定
        1 
        2 
                            
                            

你可能感兴趣的:(字节跳动面试(一面))