1、http和https 待定
说一下http和https_前端校招面试题目合集_牛客网 (nowcoder.com)
2、从发送请求到页面展现，都经过了哪些
3、TCP和UDP的区别 ！！待定
参考回答:
（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
（4）TCP只能是1对1的，UDP支持1对1,1对多。
（5）TCP的首部较大为20字节，而UDP只有8字节。
（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。
4、WebSocket的实现和应用 待定，需要深入
5、一个图片url访问后直接下载怎样实现？
参考回答：
请求的返回头里面，用于浏览器解析的重要参数就是OSS的API文档里面的返回http头，决定用户下载行为的参数。
下载的情况下：
- x-oss-object-type:Normal
- x-oss-request-id:598D5ED34F29D01FE2925F41
- x-oss-storage-class:Standard
6、几个很实用的BOM属性对象方法?
几个很实用的BOM属性对象方法?前端校招面试题目合集牛客网 (nowcoder.com)
7、HTML5 drag
参考回答：
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
8、说一下http2.0和 htttp3.0 （这个可能不对，需要查证）
说一下http2.0_前端校招面试题目合集_牛客网 (nowcoder.com)
9、fetch发送2次请求的原因
参考回答：
fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？
原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。
10、Cookie、sessionStorage、localStorage的区别
应该已经谢过了
11、说一下web worker
参考回答：
在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建web worker：
检测浏览器对于web worker的支持性
创建web worker文件（js，回传函数等）
创建web worker对象
12、HTML5标签语义化的好处
好像也写过了
13、iframe是什么？有什么缺点？
参考回答：
定义：iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器
缺点：
会阻塞主页面的onload事件
搜索引擎无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。
14、你了解的网络安全都有哪些？如何抵御（自己找）
XSS。等
15、cookie和session的区别 （自己查）
16、讲讲viewport和移动端布局
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
17、http常用请求头 （背诵）
http常用请求头前端校招面试题目合集牛客网 (nowcoder.com)
18、强缓存和协商缓存都是什么 （自己查）
参考：强缓存、协商缓存什么时候用哪个前端校招面试题目合集牛客网 (nowcoder.com)
19、get和post的区别
get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET产生一个TCP数据包；POST产生两个TCP数据包。
20、在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？
（直接看公众号）
21、画一条0.5px的线 （自己搜）为什么这个会是一个问题
22、transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
23、flex布局 （全背）
24、BFC是什么
25、垂直居中的方法，水平居中的方法。（自己搜，经典题目）
垂直居中的方法前端校招面试题目合集牛客网 (nowcoder.com)
26、 css动画和js动画有什么区别
渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别：
功能涵盖面，js比css大
实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3可以做到自然降级
css动画有天然事件支持
css3有兼容性问题
27、文本溢出省略号（自己查）
28、position属性
fixed \ relative \ absolute \ sticky \ static \ inherit
29、CSS选择器，优先级
30、三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响
三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响前端校招面试题目合集牛客网 (nowcoder.com)
31、用css实现一个硬币旋转的效果
用css实现一个硬币旋转的效果前端校招面试题目合集牛客网 (nowcoder.com)
32、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有：
添加或者删除可见的DOM元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有：
不在布局信息改变时做DOM查询，
使用csstext,className一次性改变属性
使用fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
33、CSS画基础形状，正方形，圆形，椭圆等等
34、前端事件流
参考回答：
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
事件捕获阶段
处于目标阶段
事件冒泡阶段
addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡。
35、说一下事件委托
事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
36、说一下图片的懒加载和预加载
参考回答：
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
37、bind，apply，call的区别
38、手写bind，apply，call
39、异步加载js的方法
参考回答：
defer：只支持IE如果您的脚本不会改变文档的内容，可将 defer 属性加入到<script>标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
async，HTML5属性仅适用于外部脚本，并且如果在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。
创建script标签，插入到DOM中
40、Ajax解决浏览器缓存问题 （待查）
Ajax解决浏览器缓存问题前端校招面试题目合集牛客网 (nowcoder.com)
41、js的防抖节流
http://www.cnblogs.com/coco1s/p/5499469.html
网友评论