知识精华—前端面试题大全（含答案）

最新推荐文章于 2024-07-08 16:36:24 发布

GllWyz

最新推荐文章于 2024-07-08 16:36:24 发布

阅读量544

点赞数 1

分类专栏： # 知识精华总结文章标签：前端面试总结

本文链接：https://blog.csdn.net/zhumizhumi/article/details/89184124

版权

知识精华总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、Doctype作用？标准模式与兼容模式各有什么区别?

2、页面导入样式时，使用link和@import有什么区别？

3、简述一下你对HTML语义化的理解？

4、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

5、网页验证码是干嘛的，是为了解决什么安全问题。

6、什么是window对象? 什么是document对象?

7、null，undefined 的区别？

13、margin和padding分别适合什么场景使用？

14、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

15、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

16、闭包

17、面向对象的方法继承对象

18、javascript创建对象的几种方式？

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

20、怎么让Chrome支持小于12px 的文字？

21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

22、promise的实现原理

23、call、apply、bind的区别

1、Doctype作用？标准模式与兼容模式各有什么区别?

（1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2、页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

3、简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

5、网页验证码是干嘛的，是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

6、什么是window对象? 什么是document对象?

博客链接：https://blog.csdn.net/jcx5083761/article/details/41243697

7、null，undefined 的区别？

null 表示一个对象被定义了，值为“空值” undefined 表示不存在这个值。

`8、`那些操作会造成内存泄漏？

（1）内存泄漏定义：内存泄漏是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束

（2）JS的回收机制

JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。

到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用计数不太常用，标记清除较为常用。

（3）引起内存泄露的原因

1：意外的全局变量引起的内存泄漏

2：闭包引起的内存泄漏（闭包可以维持函数内局部变量，使其得不到释放）

3：没有清理的DOM元素引用

4：被遗忘的定时器或者回调

5：IE7/8引用计数使用循环引用产生的问题

9、怎样避免内存泄露

1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的；

3）避免创建过多的对象原则：不用了的东西要及时归还。

10、前端性能优化

1）减少HTTP请求

（2）CSS Sprites（CSS精灵）：其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升

（3）将样式表放在头部（即引用的css放到头部）

（4）将脚本放在底部（js文件）

（5）避免CSS表达式

p {
    width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");
    height: 80px;
    border: 1px solid #f00;
}

（6）使用外部的JavaScript和CSS

内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。

11、什么是防抖、什么是节流

https://blog.csdn.net/weixin_33878457/article/details/88275209

12、移动端的布局用过媒体查询吗？

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则

例子一：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

例子二：当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

例子三：根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）：“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

例子四：使用关键词“not”是用来排除某种制定的媒体类型：也就是用来排除符合表达式的设备：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

@media not print and (max-width: 1200px){样式代码}

13、margin和padding分别适合什么场景使用？

何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

14、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

方法：

$(window).resize(function () {
    screenRespond();
});
screenRespond();
function screenRespond(){
  var screenWidth = $(window).width(); 
  if(screenWidth <= 1800){
    $("body").attr("class","w1800");
  }
  if(screenWidth <= 1400){
    $("body").attr("class","w1400");
  }
  if(screenWidth > 1800){
    $("body").attr("class","");
  }
}


// 使用
.w1800 .screen-wid{width:1200px}
.w1800 .p-top-lin,.w1400 .p-top-lin{border:solid #e5e5e5;border-width:1px 0 0}
.w1800 .dchart-conut{width:100px}
.w1800 .dchart-conut p{padding:8% 0}
.w1400 .screen-wid{width:960px}
.w1400 .header_fixed .menu-navbox{margin-left:8%}
.w1400 .header_fixed .menu-navbox li{padding:17px 1.2%}
.w1400 .header_fixed .menu-slide-down li{padding:0}
.w1400 .menu-navbox{margin-left:25%}
.w1400 .menu-navbox li{padding:17px 2%}
.w1400 .menu-navbox .none-mar{padding-right:0}
.w1400 .menu-slide-down li{padding:0}
.w1400 .menu-navbox a{font-size:15px}

15、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height)

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

标准的css盒子模型宽高就是内容区宽高

低端IE css盒子模型宽高内边距﹢边界﹢内容区

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

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法
常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。
:before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

20、怎么让Chrome支持小于12px 的文字？

<style>p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style>

<p><span>豪豪豪10px</span></p>

21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

22、promise的实现原理

http://es6.ruanyifeng.com/#docs/promise

https://blog.csdn.net/qq_38824191/article/details/80480027

23、call、apply、bind的区别

https://juejin.im/post/59bfe84351882531b730bac2#heading-13

借鉴：https://www.cnblogs.com/victent/p/3969338.html

借鉴：https://www.cnblogs.com/Alan2016/p/5443437.html

借鉴：https://www.cnblogs.com/love-sea520/p/5903442.html

GllWyz

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

知识精华—前端面试题大全（含答案）

1、Doctype作用？标准模式与兼容模式各有什么区别?

2、页面导入样式时，使用link和@import有什么区别？

3、简述一下你对HTML语义化的理解？

4、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

5、网页验证码是干嘛的，是为了解决什么安全问题。

6、什么是window对象? 什么是document对象?

7、null，undefined 的区别？

8、那些操作会造成内存泄漏？

9、怎样避免内存泄露

10、前端性能优化

11、什么是防抖、什么是节流

12、移动端的布局用过媒体查询吗？

13、margin和padding分别适合什么场景使用？

14、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

15、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

16、闭包

17、面向对象的方法继承对象

18、javascript创建对象的几种方式？

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

20、怎么让Chrome支持小于12px 的文字？

21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

22、promise的实现原理

23、call、apply、bind的区别

`8、`那些操作会造成内存泄漏？

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