前端面试题集锦

1.说说你对语义化的理解?

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  • 有利于SEO
  • 方便其他设备解析
  • 便于团队开发和维护,语义化使得网页更具可读性

2.谈谈Cookie的弊端?

  • Cookie数量和长度的限制,20条,4KB
  • 安全性问题
  • 有些状态不可能保存在客户端

3.清除浮动的技巧?

  • 空标签清除:clear:both
  • 给父元素添加overflow:auto
  • 使用after伪元素清除
  • 浮动父元素

4.哪些操作会造成内存泄漏?

  • setTimeout 的第一个参数使用字符串而非函数
  • 闭包
  • 控制台日志
  • 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

5.性能优化的方法?

  • 减少http请求次数:CSS Sprites, JS、CSS 源码压缩,data 缓存
  • 减少 DOM 操作次数,优化 javascript 性能,延迟,异步加载脚本
  • 减少 IO 读取操作
  • 图片预加载,将样式表放在顶部,将脚本放在底部

6.http状态码有那些?

  • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求,但尚未处理
  • 301 Moved Permanently 请求的网页已永久移动到新位置
  • 302 Found 临时性重定向
  • 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI
  • 304 Not Modified 自从上次请求后,请求的网页未修改过
  • 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求
  • 401 Unauthorized 请求未授权
  • 403 Forbidden 禁止访问
  • 404 Not Found 找不到如何与 URI 相匹配的资源
  • 500 Internal Server Error 最常见的服务器端错误
  • 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)

7.页面加载显示过程?

  1. 当发送一个 URL 请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个 DNS查询。这能使浏览器获得请求对应的IP地址。
  2. 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
  3. 一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求,远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。
  4. 此时,Web服务器提供资源服务,客户端开始下载资源。

8.ajax 的过程是怎样的?

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

9.GET和POST的区别?

GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制
GET方式需要使用 Request.QueryString 来取得变量的值
POST方式通过 Request.Form 来获取变量的值
也就是说 Get 是通过地址栏来传值,而 Post 是通过提交表单来传值。
在以下情况中,请使用 POST 请求:

  1. 无法使用缓存文件(更新服务器上的文件或数据库)
  2. 向服务器发送大量数据(POST 没有数据量限制)
  3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

10.引用类型和基本类型的区别?

基本数据类型:Number,String,Boolean,Null,Undefined,Symbol
引用类型:Object,Array,function,Date,RexExp等
区别:

  1. 基本类型的值不可变,引用类型的值可变
  2. 基本类型的比较是值的比较,引用类型的比较是引用的比较
  3. 基本类型的变量存放在栈区,引用类型的值同时保存在栈内存和堆内存中
    引用类型的赋值是对象保存在栈区地址指针的赋值,两个变量指向同一个对象,任何的操作都会相互影响

11.深拷贝和浅拷贝的区别?

  • 深拷贝:两数组指针指向不同的地址,数组元素发生改变时不会相互影响
  • 浅拷贝:相当于使两个数组指针指向相同的地址,任一个数组元素发生改变,会影响另一个

12.js继承的方式和特点?

  • 原型链继承:利用原型让一个引用类型继承另一个引用类型的属性和方法
  • 借用构造函数继承:在子类型构造函数的内部调用超类型构造函数
  • 组合继承:集二者之长
  • 原型式继承:借助原型并基于已有的对象创建新对象,不用创建自定义类型
  • 寄生式继承:创建一个仅用于封装继承过程的函数
  • 寄生组合式继承:解决两次调用的问题
  • 类继承:通过extends关键字实现继承

13.defer和async属性的区别?

  • defer:与文档元素同步加载,脚本在文档解析后执行
  • async:加载和渲染文档元素的过程和脚本的加载与执行并行进行

14.前端的安全问题?

  1. sql注入:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
  2. XSS攻击:指的是攻击者往Web页面里插入恶意html标签或者javascript代码。
  3. CSRF:跨站请求伪造

15.浏览器如何渲染网页?

  1. 使用HTML创建文档对象模型(DOM)
  2. 使用CSS创建CSS对象模型(CSSOM)
  3. 基于DOM和CSSOM执行脚本(Scripts)
  4. 合并DOM和CSSOM形成渲染树(Render Tree)
  5. 使用渲染树布局(Layout)所有元素
  6. 渲染(Paint)所有元素

16.如何解决跨域问题?

  1. jsonp(动态插入 script 标签)
  2. document.domain + iframe
  3. window.name、window.postMessage
  4. 服务器上设置代理页面

17.TCP传输的三次握手策略

  1. 发送端首先发送一个带SYN标志的数据包给对方。
  2. 接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。
  3. 发送端再回传一个带ACK标志的数据包,代表“握手”结束。

18.CSS和JavaScript的阻塞问题

  • css阻塞:当CSS后面跟着嵌入的JS的时候,会出现阻塞后面资源下载的情况
  • js阻塞:下载JS的时候,会阻止一切其他活动
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • 常见的浏览器内核有哪些?介绍一下你对浏览器内核的理解? Trident内核:IE,MaxThon,TT,The W...
    我是白夜阅读 1,633评论 0 50
  • 请描述一下 JavaScript 事件冒泡机制? 当页面中某个元素的事件被触发以后,比如点击了页面中的某个按钮,就...
    我是白夜阅读 1,193评论 0 49
  • 一、概念(载录于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434阅读 8,326评论 6 152
  • 我记得有人说过,时间可以治愈一切,我信以为真。 一个人承载太多的故事 总会太累,我只是不想太累,便想写写出来吧~~...
    痞子阅读 255评论 0 2