ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端面试

2022-05-02 16:33:06  阅读:156  来源: 互联网

标签:em 浏览器 前端 元素 面试 cookie 数组 页面


 

 面试注意事项

1,投简历:学历不好的海投机会才大

2,面试:对于面试官的问题,想清楚在回答,如果需要思考时间较长可以跟面试官说我思考下之类,面试过程中注意语速和吐字,说话语速很快,或吐字不清,导致原本会的问题也会让面试官觉得你没答到点子上。

3,复盘:每一场面试都要尽力展现出自己更优秀的一面,最好能有录音,方便总结面经,查漏补缺,对自己面试的真实表现有一个完整的了解。

 

HTML/CSS部分

1.什么是盒子模型?

在网页中,一个元素占有空间的大小由几部分构成,其中包活元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域。四个部分一起构成了css中元素的盒子模型。

2,行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素:a b span img input strong select label em button textarea

块级元素:div ul li dl dt dd p h1-h6 blockquote

空元素:即系没有内容的HTML元素,例如:br meta hr link input img

3.CSS实现垂直水平居中

一道经典的问题,实现的方法有很多种,以下是其中一种实现:

 

 

 4、简述一下 src 与 href 的区别

herf 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src 是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src 资源时会将其指向的资源下载到文档内,例如 js脚本  img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,图片和框架元素等也是如此,类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

 

 

 5、什么是CSSHack?

一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack

IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详情参考文档:css文档)。例如:

 

 6、简述同步和异步的区别

同步时阻塞模式,异步时非阻塞模式。

同步就是指一个进程在执行某个请求时,若该请求需要一段时间才能返回信息,那么这个请求将会一直等待下去,知道收到返回信息才继续执行下去;

异步是指进程不需要一直等待下去,而是继续执行下面的的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

7、px和 em 的区别

px和 em 都是长度单位,区别是:px 的值是固定的,指定多少就是多少,计算比较容易。em 的值是不固定的,并且em 会继承父级元素的字体大小。

浏览器的默认字体高度都是16px.所以未经调整的浏览器都不符合:1em=16px 那么 12px=0.75em, 10px=0.6253m

8、什么叫优雅降级和渐进增强?

优雅降级 graceful degradation

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

渐进增强 progressive enhancement

针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  区别:

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,,以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

9、浏览器的内核分别是什么?

IE:trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,现已改用Google Chrome 的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

 JavaScript部分

1、怎样添加、移除、移动、复制、创建和查找节点?

(1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

(2)添加、移除、替换、插入

appendChild() // 添加

removeChild() // 移除

replaceChild() //替换

insertBefore() //插入

(3)查找

getElementsByName() //通过标签名称

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

getElementsById() //通过元素Id,唯一性

2、实现一个函数clone,可以对JavaScript中的5种主要的数据类型(Number、String。Object、Array、BOOlean)进行复制。

 

 

 

 

 

 3、如何消除一个数组里面重复的元素?

 

 

 4、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

5、在JavaScript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有项调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call (fakeArray) 将数组转化为真正的Array对象。

6、JavaScript中callee和caller的作用?

callee是返回正在被执行的function函数,也就是所指定的function对象的正文

caller是返回一个队函数的引用,该函数调用了当前函数

7、请描述一下 cookies, sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一个持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

web storage的概念和cookie相似,区别是它是为了更大容量存贮设计的。cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,web Storage 拥有setItem, getItem, removeItem, clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是cookie也是不可或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而web Storage 仅仅是为了在本地 存储 数据而生

8、手写数组快速排序

“快速排序” 的思想很简单,可以整个排序过程只需要三步:

(1)在数据集之中,选择一个元素作为基准(pivot)

(2)所有小于 基准 的元素,都移动到基准的左边,所有大于 基准 的元素,都移动到 基准的右边。

(3)对 基准 左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

 

其他:

1、一次完整的HTTP事务是怎样的一个过程?

基本流程:

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起htto请求

d. 服务器响应http请求,浏览器得到html代码

e. 浏览器解析html代码,并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

2、对前端工程师这个职位你是怎样理解的?

a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100分,甚至更好

b. 参与项目,快速高质量完成实现效果图,精确到1px;

c. 与团队成员,UI设计,产品经理的沟通;

d. 做好的页面结构,页面重构和用户体验;

e. 处理hack,兼容、写出优美的代码格式;

f. 针对服务器的优化、拥抱最新的前端技术。

标签:em,浏览器,前端,元素,面试,cookie,数组,页面
来源: https://www.cnblogs.com/jiekezhi/p/16210413.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有