240 Star 2.1K Fork 87

鹏磊 / DevBooks

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
前端最新基础面试题及答案整理.md 9.47 KB
Copy Edit Raw Blame History

前端最新基础面试题及答案整理

全部答案,更新日期:2023年6月11日,直接下载吧!

下载链接:高清172份,累计 7701 页大厂面试题 PDF

1、你有哪些性能优化的方法?

1、 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip, CDN托管,data缓存 ,图片服务器。

2、 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

3、 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

4、 当需要设置的样式很多时设置className而不是直接操作style。

5、 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

6、 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

7、 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

8、 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

2、用于预格式化文本的标签是?

预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。

`

3、变量作用域?

//变量作用域:一个变量的作用域是程序源代码中定义这个变量的区域。全局变量拥有全局作用域,
//在js代码中任何地方都是有定义的。在函数内声明的变量只在函数体内有定义,它们是局部变量,
//作用域是局部性的。函数参数也是局部变量,它们只在函数体内有定义。
var a = "";
window.b=''”;
function(e) {
       var c= "";
       d="";
       e="";
}
function go() {
       console.info(this);//window
       return function() {
               console.info(this); // window
               return {
                b:function(){
                       console.info(this); //b的父对象
                   }
            }
       }
}
go()().b();

4、几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构

1、 基本数据类型:Undefined、Null、Boolean、Number、String

2、 值类型:数值、布尔值、null、undefined。

3、 引用类型:对象、数组、函数。

4、 堆栈数据结构:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!

5、 js数组中提供了以下几个方法可以让我们很方便实现堆栈:

6、 shift:从数组中把第一个元素删除,并返回这个元素的值。

7、 unshift: 在数组的开头添加一个或更多元素,并返回新的长度

8、 push:在数组的中末尾添加元素,并返回新的长度

9、 pop:从数组中把最后一个元素删除,并返回这个元素的值。

5、用过哪些设计模式?

工厂模式:

1、 工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法

2、 主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字

构造函数模式

1、 使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题,该模式与工厂模式的不同之处在于

2、 直接将属性和方法赋值给 this对象;

6、选择器优先级是怎样的?

!important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承

权重算法

(0,0,0,0)==》第一个 0 对应的是 important 的个数,第二个 0 对应的是 id 选择器的个数,第三个 0 对

应的类选择器的个数,第四个 0 对应的是标签选择器的个数,就是当前选择器的权重。

比较:

先从第一个 0 开始比较,如果第一个 0 大,那么说明这个选择器的权重高,如果第一个相同,比较第二个,依次类推

7、常见的浏览器内核有哪些?

1、 Trident内核:IE,360,傲游,搜狗,世界之窗,腾讯等。[又称MSHTML]

2、 Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等

3、 Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]

4、 Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

8、HTTP状态码及其含义

举例状态码类型:

状态码 类别 原因短语
1XX Information(信息性状态码) 接收的请求正在处理
2XX Success(成功状态码) 请求正常处理完毕
3XX Redirection(重定向状态码) 需要进行附加的操作以完成请求
4XX Client Error(客户端错误状态码) 服务器无法处理请求
5XX Server Error(服务端错误状态码) 服务器处理请求出错
204 服务器成功处理,但未返回内容。
304 Not Modified 未修改。 所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400 Bad Request 客户端请求的语法错误,服务器无法理解
403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面

9、spa应用

优点:用户体验好 、良好的前后端分离。

缺点:

1、 不利于SEO。

2、 初次加载耗时相对增多。

3、 导航不可用,如果一定要导航需要自行实现前进、后退。

10、MVC BFC

mvc是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。MVC对应Html,CSS,js。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性:块状水平元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;BFC元素特性表现原则就是,内部子元素不会影响外部的元素

11、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?

12、为什么要初始化CSS样式?

13、页面导入样式时,使用link和@import有什么区别

14、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?

15、行内元素有哪些?块级元素有哪些?CSS的盒模型?

16、Jq中有几种选择器?分别是什么?

17、如何实现浏览器内多个标签页之间的通信? (阿里)

18、常见浏览器所用内核

19、::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

20、Jq绑定事件的几种方式?on bind ?

21、arguments 的对象是什么?

22、如何在 JS 中创建对象?

23、css sprite是什么,有什么优缺点

24、简述一下src与href的区别。

25、有一个导航栏在chrome 里面样式完好?在 IE 里文字都聚到一起了,是哪个兼容性问题?

26、eval是做什么的?

27、CSS3新增伪类有那些?

28、**

29、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

30、简述下工作流程###

31、webpack的优点

全部答案,更新日期:2023年6月11日,直接下载吧!

下载链接:全部答案,整理好了

新增:高清PDF:172份,7701页,最新整理

Java
1
https://gitee.com/souyunku/DevBooks.git
git@gitee.com:souyunku/DevBooks.git
souyunku
DevBooks
DevBooks
master

Search