录一段搜狐采访（含笔试题）

使用伪类实现图形这样题目还有很多，分享两个：纯CSS实现一个正方形带三角形只用一个divhttps://blog.csdn.net/hahahah...CSS实现太极图（1个DIV实现）https://www.cnblogs.com/web12...2。如何实现①平行四边形②三角形①平行四边形cssdiv{width:100px;高度：100px；边框：2px实心#333；颜色：#333；transform:skew(-20deg);}html运行结果：②三角形cssdiv{width:0;高度：0；边框：10px实心透明；边框顶部样式：#333；}htmlrunResult:3.请记下以下alert的结果alert(typeofnull)//objectalert(typeofundefined)//undefinedalert(typeofNaN)//numberalert(NaN==undefined)//falsealert(NaN==NaN)//falsevarstr="123abc"alert(typeofstr++)//numberalert(str)//NaN4。已知数组[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10],数组展平后应该得到数组：[1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]，请写代码实现扁平化第一种方法：vararr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]functionFlat1(arr){varnewArr=[];for(vari=0;iarr.reduce((a,b)=>a.concat(Array.isArray(b)?Flat2(b):b),[]);console.log(Flat2(arr))对应es5代码vararr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]varFlat3=function(arr){returnarr.reduce(function(a,b){returna.concat(Array.isArray(b)?Flat3(b):b)},[]);}console.log(Flat3(arr))5.写入以下代码的执行结果：asyncfunctionasync1(){console.log('async1start')awaitasync2()console.log('async1end')}asyncfunctionasync2(){console.log('async2')}console.log('scriptstart')setTimeout(function(){console.log('setTimeout')},0)async1();newPromise(function(resolve){console.log('promise1')resolve();}).then(function(){console.log('promise2')})console.log('scriptend')运行结果：scriptstartasync1startasync2promise1scriptendpromise2async1endsetTimeout类似标题修改：asyncfunctionasync1(){console.log('async1start')awaitasync2()console.log('async1end')}functionasync2(){//移除异步关键字console.log('async2')}console.log('scriptstart')setTimeout(function(){console.log('setTimeout')},0)async1();newPromise(function(resolve){console.log('promise1')resolve();}).then(function(){console.log('promise2')})console.log('scriptend')运行结果：scriptstartasync1startasync2promise1scriptendasync1endpromise2setTimeout分析：https://www.cnblogs.com/geyou...6.写出可以转换http://www.sohu.com的信息/a/2830163...{code:aaa,_f:index_cpc_0}functionfunctionparseObject(url){varobj={};if(url.indexOf('?')!==-1){varurl=url.substring(url.indexOf('?')+1);}else{返回;}vararr=url.split('&');arr.forEach(function(val){varbrr=val.split('=');obj[brr[0]]=brr[1];});returnobj;}varurl="http://www.sohu.com/a/283016366_267106?code=aaa&_f=index_cpc_0"parseObject(url)7.tcp/ipprotocolTCP/IP是一种协议体系，是一组用于网络通信的协议。传统上认为TCP/IP是一个四层协议1）网络接口层：主要是指一些物理层面的接口，比如电缆。2）网络层：提供独立于硬件的逻辑寻址，实现物理地址和逻辑地址的转换。在TCP/IP协议族中，网络层协议包括IP协议（InternetProtocol）、ICMP协议（InternetInternetControlMessageProtocol）和IGMP协议（InternetGroupManagementProtocol）。3）传输层：为网络提供流量控制、差错控制和确认服务。　TCP/IP　协议族中有两种不同的传输协议：TCP（传输控制协议）和UDP（用户数据报协议）。4）应用层：提供网络故障排除、文件传输、远程控制、　上网操作等具体应用八、关于缓存1、前端缓存概述前端缓存主要分为HTTP缓存和浏览器缓存。传输过程中使用的缓存主要设置在服务器代码上；而浏览器缓存主要是前端开发在前端js上设置的。它们将在下面详细描述。2、前端缓存的分类2.1HTTP缓存从HTTP协议说起由于整个网络服务都是基于http协议的，所以我们先介绍一下HTTP协议中定义的缓存机制。HTTP协议主要是通过请求头中的一些字段与服务器进行通信，从而采用不同的缓存策略。一般来说，一个完整的HTTPGET请求缓存过程会包括七个主要步骤：①从接收网络请求开始，②客户端读取请求报文并解析报文，然后提取URL和各种Header，③查询是否有是本地的副本，如果本地没有副本，它会从服务器上获取副本并保存在本地。④然后检查文案是否足够新鲜（新鲜度检测）。如果缓存无效，它会询问服务器是否有任何更新。⑤服务器将使用新的头部和缓存的主体来构建响应消息。⑥最后发给客户。⑦根据服务器的不同，您可以选择创建日志来记录该过程。总体流程：HTTP缓存从第二次请求开始。第一次请求资源时，服务端返回资源，并在响应头中返回资源的缓存参数；第二次请求时，浏览器判断这些请求参数，如果命中强缓存则直接200，否则将请求参数添加到请求头中发送给服务端看是否命中协商缓存，命中则返回304，否则服务器返回一个新的资源。HTTP缓存分为强缓存和协议缓存。它们的区别如下：200fromdiskor200frommemory：strongcache的200也有两种情况：200fromdisk和200frommemory。现在我还没有找到明确的文档来描述这种区别发生的条件。https://www.zhihu.com/questio...这个问题知乎提到了一些场景，可以自己使用。2.1.1强缓存2.1.2协商缓存协商缓存成对出现。2.1.3最佳优化策略——消除304最佳优化策略：因为协商缓存本身也存在http请求的丢失，所以最佳优化策略是尽量把静态文件存放的时间长一点，多做一些而是使用强缓存。不是协商缓存，也就是304被淘汰了。但是在文件上设置很长的Cacha-Control也会带来其他问题。主要问题是当静态内容更新时，用户无法及时获取更新后的内容。这时候就需要使用hash的方式对文件进行命名，通过每次更新不同的静态文件名来消除强缓存的影响。哈希命名：http://xxx.com/main.5eas34fa.jshttp://xxx.com/main.js?5eas34fahttp://xxx.com/5eas34fa/main.js2.2浏览器缓存2.2.1本地存储小-capacitycookies主要用于存储用户信息，cookies的内容可以在请求时自动传递给服务器。LocalStorage中的数据会一直保存在浏览器中，直到用户清除浏览器缓存数据。SessionStorage的其他属性与LocalStorage相同，只是其生命周期与标签页相同。当标签页关闭时，SessionStorage也会被清空。2.2.2大容量本地存储WebSql和IndexDB主要用在需要大容量存储的前端页面上，比如在线编辑浏览器或网络邮箱。2.2.3应用缓存和PWA应用缓存称为OfflineWebApplication，其缓存内容保存在浏览器的ApplicationCache中。也是W3C标准放弃的一个功能，主要是通过manifest文件来标记需要缓存的静态文件列表。但是在缓存静态文件的同时，默认也会缓存html文件。因此，页面更新只能通过清单文件中的版本号来确定。而且，即使我们更新了版本，用户第一次访问还是会访问旧页面，只有下次访问才能访问新页面。因此，应用缓存只适用于常年不变的静态网站。这种不便也是被遗弃的重要原因。PWA的全称是progressivewebapplication，主要目标是实现网站APP式的功能和展示。PWA虽然也有manifest文件，但是和应用缓存完全不同。不同于简单的以是否缓存manifest来对文件进行分类，PWA是通过manifest构建自己的APP骨架。此外，PWA使用ServiceWorker来控制缓存的使用。这部分内容比较多，这里就不详细展开了。2.2.4往返缓存往返缓存，也称为BFCache，是浏览器用来提高历史页面在前进和后退按钮上的渲染速度的一种策略。BFCache会缓存所有的DOM结构，但问题是某些在页面开始的报告或请求可能会受到影响。这个问题现在主要会出现在微信h5的开发中。原文：http://web.jobbole.com/95057/