web前端理论拓展面试题

穿条秋裤吧

已于 2022-09-07 11:05:12 修改

阅读量346

点赞数 1

文章标签：前端 css

于 2022-05-14 18:30:40 首次发布

本文链接：https://blog.csdn.net/m0_66523895/article/details/124772099

版权

前端扩展题

1.http状态码。

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

2.输入url到显示页面的步骤。

浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构（如 HTML 的 DOM）；

载⼊解析到的资源⽂件，渲染页面，完成。

3.前端优化

1、减少http请求

2、减少资源体积

3、缓存（dns缓存、cdn部署与缓存、http缓存）

4、优化网页渲染

5、 dom操作优化

6、异步请求优化

7、图片懒加载图片精灵 base64

减少代码体积避免重回重排少用闭包少用全局变量少用iframe 触底加载

4.浏览器内核。

渲染器引擎 js引擎

5.a标签的target的取值，以及锚点。

_black：点击一次打开一个新窗口 _new：始终在同一个新窗口中打开 _self：默认，在当前窗口打开 _parent：在父级窗口打开 _top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开

href="id值"

6.html的离线存储怎么使用。

HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术为Cookie。

7.iframe框架的优缺点。

框架的优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)

技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏

框架的缺点（iframe的缺点与frame类似）
会产生很多页面，不容易管理
不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）
浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）
代码复杂,无法被一些搜索引擎索引到（框架结构（帧结构）的不能为每个网页都设置一个标题（TITLE），更为糟糕的是，有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
多数小型的移动设备（PDA 手机）无法完全显示框架
多框架的页面会增加服务器的http请求
由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃，目前的html5已不再支持此标签

8.canvas和svg的区别。

svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。

9.css图片精灵sprite.

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。

2、jpg 网页制作及日常使用最普遍的图像格式。优点：图像压缩效率高，图像容量相对最小。缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3、gif 制作网页小动画的常用图像格式。优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。

4、png 网页制作及日常使用比较普遍的图像格式。优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。缺点：不能制作成动画

10.js如何实现异步编程。

JavaScript中实现异步编程模式的方法：1、回调函数，这是异步编程最基本的方法；2、事件监听；3、发布或订阅；4、Promises对象。

11.js如何实现继承。

1.原型链继承

2.构造函数继承

3.组合继承

4.原型式继承

5.寄生式继承

6.寄生组合式继承

12.new操作符具体干了什么？

创建一个新的对象obj
将对象与构建函数通过原型链连接起来
将构建函数中的this绑定到新建的对象obj上
根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

13.怎么跨域？

jsonp window.name iframe 中继服务器利用script标签能引入不同源的资源来跨域反向代理

14.设计模式介绍？工厂模式、构造函数模式。

15.css预解析SaaS less

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

less是通过客户端处理,sass是通过服务端处理;

sass的功能比less强大,less则相对简单易于上手,对编译环境要求比较宽松;

less定义变量使用@ sass定义变量使用$

16.meta的作用

meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

17.utf-8

万国符

18.datalist标签

定义input标签可能的值在input中用list:"datalist的id"

19.w3c 万维网联盟

20.css层叠样式表

21.transform

transition rotate scale skew 3d none

22.math 对象 date对象时间戳

23.==和===的区别 ===会判断数据类型

24.es由ecma欧洲计算机协会提出

25.浏览器的两个页面如何交互

本地存储 postmessage websocket 轮训

26.hash 哈希值

你可以把哈希值简单地理解成是一段数据(某个文件，或者是字符串）的DNA，或者身份证。通过一定的哈希算法（典型的有MD5，SHA-1等)，将一段较长的数据映射为较短小的数据，这段小数据就是大数据的哈希值。他有这样一个特点，他是唯一的，一旦大数据发生了变化，哪怕是一个微小的变化，他的哈希值也会发生变化。另外一方面，既然是DNA，那就保证了没有两个数据的哈希值是完全相同的。

27.数组去重

28.jquery的4种绑定事件的方法有何区别？on live bind delegate

bind 不支持事件委托不能给未来的元素绑定事件

其他都可以

但是推荐用on

live delegate 在高版本已被废弃

29.表达式

表达式一般需要一个返回值

而一般一行代码就是一个语句他是为了某种操作一般不需要返回值

30.雪碧图

31.base64

将图片转为加密格式字符串

主要用于图片加密传输

也可以用于前端优化

把容量少于10kb的图片转为base64格式减少http请求

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

32.响应式和自适应

都是用媒体查询

自适应是根据不同的屏幕选择选用哪一套css代码

响应式是根据不同的屏幕分辨率做后续js代码是处理

33.输入url到渲染页面的步骤

34.websocket轮训

因为 HTTP 协议有一个缺陷：通信只能由客户端发起

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

35、浏览器内核

36、如何进行深拷贝？

1.递归 2.json.parse() json.stringify 3.构造函数

37、canvas画布和svg矢量图形的区别？

38、readonly和disabled的区别。

disabled属性可以作用于所有的表单元素。 readonly属性只对<input type="text">、<input type="number">、<textarea>和<input type="password">等可以输入的表单元素有效。

39、数组的方法。

join 数组转字符串

sort

reverse

slice

shift

unshift

pop

push

40、rgba的范围

0-255 16进制 15*15=255

41、面向对象

封装性继承性多态性

es6 class类

42、三元表达式

 var b = a >= 3 ? true : false

43、promiss

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果；

Promise 构造函数: new Promise (function(resolve,reject) { })；
Promise.prototype.then 方法；
Promise.prototype.catch 方法；

44、css最好在head中用link引入？

css在head标签中引入时，会阻塞HTML的渲染，因此页面只有等到css下载并解析完成之后才会进行渲染，所以最终出现的页面是带有完整样式的；这个过程只发生一次解析渲染：HTML解析生成DOM树+CSS解析生成CSSOM树+结合生成Layout树+计算布局+绘制；但也存在缺点：在css文件下载比较慢时，会出现长时间白屏，但与出现“裸奔”页面相比，白屏似乎在体验上显得更加友好**。

css在body标签中引入时，会阻塞HTML的解析，但不阻塞HTML的渲染，因此页面在css下载完成之前会将link标签前的HTML先进行解析渲染，并展现在页面，但由于没有css样式，页面会出现“裸奔”现象；等到css下载解析完成之后，页面重新解析渲染，展现出带有样式的HTML，这个过程会导致reflow或是repaint；从用户体验方面看：css在body标签中引入时，虽然页面可以先展现出来，但由于“裸奔”现象，会导致极差的用户体验；从性能方面看，与css在head标签中引入相比，页面在css加载完成后需要重新解析渲染**，这个过程带来了极大的性能损耗。

45、路由替换

46、多个页面之间如何进行通信。

window.postmessage

websocket 轮训

iframes

localstrorage

47、真值和假值