Powered by md-Blog  文 - 篇  访客 -

2020前端面试题整理


  分类:大前端  / 
更新:2020-11-01 17:25:17  /  创建:2020-06-08 16:16:31
不要删除

0、概念

  • HTML:超文本标记语言(HyperText Markup Language)
  • XHTML:可扩展超文本标记语言(eXtensible HyperText Markup Language)
  • CSS:层叠样式表 / 级联样式表(Cascading Style Sheets)
  • JavaScript:一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

1、前端层

  • 结构层(structural layer)

由 [X]HTML 语言负责,由标签组成。

  • 表示层(presentation layer)

由 CSS 负责。

  • 行为层(behaviorlayer)

由Javascript 语言负责,回答:“内容应该如何对事件做出反应”这一问题。

2、position

  • static【默认值】
  • relative
  • fixed
  • absolute

3、行内元素、块级元素、盒模型

  • 块级元素:div p h1 h2 h3 h4 form ul
  • 行内元素:a b br i span input select
  • Css盒模型:内容,border ,margin,padding

4、XHTML VS HTML

XHTML 更规范:

  • XHTML 文档必须拥有根元素。
  • XHTML 要求正确嵌套
  • XHTML 所有元素必须关闭
  • XHTML 区分大小写
  • XHTML 属性值要用双引号
  • XHTML 用 id 属性代替 name 属性
  • XHTML 特殊字符的处理:&lt; => <
  • XHTML 混合各种XML应用,如数学标记、SVG等

5、结构、表现

  • 结构:HTML
  • 表现:CSS

6、图片

Alt:必须,无意义的图片可以设置为空。不支持图片显示视障人群屏蔽图片的时候显示的图片信息,另对SEO搜索提供关键字收录。

Title:非必须,鼠标指上有文字提示无SEO,提升用户体验

CSS Sprites:又名 CSS雪碧CSS精灵。把一堆小的图片整合到一张大的图片上,减少 服务器对图片的 请求数量

7、资源优化

Webpack 方向
  • 文件合并 bundle.js
  • 代码压缩 PostCSS
  • 引入 CDN 公共资源库,减少服务器请求
  • 对缓存的合理使用

8、清除浮动

额外标签法

在最后一个浮动标签后,新加一个标签,给其设置 clear:both;
<div style="float:left"></div>
<div style="clear: both;"></div>
  • 优点:通俗易懂,方便
  • 缺点:添加无意义标签,语义化差

使用 :after 伪元素

在浮动标签的最后加一个伪元素,伪元素的内容为空,但具有清除浮动的属性,解决了父标签塌陷问题。
<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
.box_1{
    float: left;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}
</style>
<div class="clearfix">
    <div class="box_1">
        浮动模块
    </div>
</div>
<div>后面的模块</div>

9、CSS选择器

https://www.w3school.com.cn/cssref/css_selectors.asp
  1. id 选择器:#id
  2. 类选择器:.class
  3. 标签选择器:div / h1 / p
  4. 相邻选择器:h1+p
  5. 子选择器:ul>li
  6. 后代选择器:lia
  7. 通配符选择器:*
  8. 属性选择器:a[rel = 'external']
  9. 伪类选择器:a:hover / li:nth-child

CSS 优先级

  • !important > id > class > tag
  • important 比 内联优先级高,但内联比 id 要高

10、DOM操作

  • 增加节点
createDocumentFragment()    // 创建一个DOM片段
createElement()     // 创建一个具体的元素
createTextNode()    // 创建一个文本节点
  • 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()

11、HTML5

新特性:

  • 拖拽释放:Drag、Drop
  • 语义化更好的内容标签:header、nav、footer、aside、article、section
  • 音视频:audio、video
  • 画布:Canvas
  • 地理:Geolocation

12、从输入URL到页面展示的过程

  1. 应用层DNS解析域名:客户端先检查本地是否有对应的IP地址,若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到或到根节点。
  2. 浏览器与服务器建立TCP连接(默认端口80)(详细点可以说下三次握手的过程)
  3. 应用层客户端发送HTTP请求。
  4. 服务器响应请求:查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息——状态码(200-300,成功;304使用缓存)。
  5. 服务器返回相应文件给浏览器。
  6. Tcp连接释放(可以说下四次挥手的过程)。
  7. 浏览器对HTML文件进行解析构建DOM树 ,构建渲染树 ,js根据DomAPI操作执行绑定事件等,页面显示完成。
更多状态码参考:https://www.runoob.com/http/http-status-codes.html

13、JS 继承的6种方式

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承(原型+借用构造)
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

14、浏览器兼容性

  1. IE6 png24位图片显示背景(无法透明)。【解决】做成 PNG8
  2. 默认 paddingmargin 不同。【解决】全局添加 *{margin: 0,padding: 0}
  3. IE6 双边距问题;在IE6中设置了float,同时又设置margin,就会出现边距问题。【解决】display:inline
  4. 当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度。【解决】overflow:hidden
  5. 图片下面有边距【解决】display:block 或者 float:left
  6. 边距重叠问题;当相邻两个元素都设置了margin边距时,margin将取最大值,舍弃最小值
  7. cursor:hand 显示手型在safari上不支持,解决:cursor:pointer
  8. 新语法问题:const 问题,IE不支持。解决:进行ES6转码,改为 var。

15、JS 中获取元素的方法

  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • getElementsByName

16、跨域:jsonp

为什么不是真正的ajax

JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

原理

JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>src 不受同源策略约束来跨域获取数据。

getJson的使用方法和普通的$.get方法基本一致,不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分,jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。然后在回调函数中操作从异域返回的json对象,回调函数callback的参数即为该json对象。

一个jQuery的jsonp请求例子
$(document).ready(function(){
    $.getJSON("http://192.168.0.X/jsonp_test.php?callback=?", function(data) {
        console.log(data)
    });
    // 或者
    $.ajax({
        url: 'http://192.168.0.X/jsonp_test.php',
        dataType: "jsonp",
        type: "get",
        jsonp: "jsonpcallback",
        success:function(data){
            console.log(data)
        }
    });
});

17、优化访问

如果制作一个访问量很大的网站,对css,js和图片应该怎么处理。
  • 资源文件按模块进行放置,有利于团队开发。
  • 图片尽量采取聚合压缩技术。
  • 精简压缩css和js文件,减少文件大小。
  • 类库、媒体使用CDN加速,减轻服务器压力。

18、Ajax

原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

创建过程

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

19、JS 的同步异步?

JS 是单线程决定,如果一个任务耗时很长,后面的任务就会排队等着。而同步可以理解为这种排队模式。也就是后一个任务等待前一个任务执行完毕才能执行。

异步,每一个任务都有一个 回调函数callback,前一个任务执行完不是执行后一个任务,而是执行回调函数,后一个任务是不等前一个任务执行完毕就开始执行,所以顺序不是排队模式也就是不一致的,也就是异步的。

  • 技术实现:Ajax,写成 setTimeout 的回调函数,事件监听。
  • 优点:回调函数的优点是简单、容易理解和部署。
  • 缺点:是不利于代码的阅读和维护。

20、xml 和 json

特性xmljson
复杂性
可读性
体积、带宽占用

21、JS 的 数据类型

【5种】

  1. boolean
  2. string
  3. number
  4. undefined
  5. null
  • 引用类型:Object
  • ES6:Symbol
  • ES10:BigInt

22、JS 的 typeof 的数据类型

【6种】

  1. boolean
  2. string
  3. number
  4. undefined
  5. object
  6. function

23、HTTP 请求

  • Get
  • Post

24、闭包函数和闭包

价值参考:https://blog.csdn.net/weixin_43586120/article/details/89456183
  • 闭包函数:声明在一个函数中的函数,叫做闭包函数。
  • 闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。

【特点】

  • 外部访问:让外部访问函数内部变量成为可能;
  • 内存常驻:局部变量会常驻在内存中;
  • 防止全局变量污染:可以避免使用全局变量,防止全局变量污染;
  • 内存泄漏:会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

闭包内存泄漏为:key = value,key 被删除了 value 常驻内存中; 局部变量闭包升级版(中间引用的变量) => 自由变量;

其实它就是将函数内外部连接起来的桥梁

【例子】

function funA(){
    var a = 10;  // funA的活动对象之中;
    return function(){   //匿名函数的活动对象;
        return a;
    }
}
var b = funA();
console.log(b());  // 10

25、i++、++i

var a = b = 0;
console.log(a++);   // i++ 输出:0
console.log(++b);   // ++i 输出:1

26、OSI 七层模型

开放式系统互联是把网络通信的工作分为了7层:

  1. 表示层
  2. 会话层
  3. 应用层
  4. 传输层
  5. 网络层
  6. 数据链路层
  7. 物理层

不要删除

小站不易,感谢支持!