2019校招前端笔试面试题

2026高频前端面试题(含答案) 一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动 第一个float:left,第二个float:right,第三个设置margin-left和margin-right (2)绝对定位法 第一个定位到left,第二个定位到right,第三个设置margin-left和margin-right (3)flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px; 阅读详情

程序员学习书籍推荐:(点击查看)

大厂面试题 (点击查看)

前期概要:

01你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

答案

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

02Javascript中的定时器有哪些?

答案

1.setTimeout 只执行一次 

2.setInterval 会一直重复执行  

03img的alt与title有何异同? strong与em的异同?

答案

a:alt(alt text):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签,强调,表示内容的重要性

em:斜体强调标签,更强烈强调,表示内容的强调点

04一个200*200的div在不同分辨率屏幕上下左右居中,用css实现 

答案

<style>
   /*一个200*200的div在不同分辨率屏幕上下左右居中,用css实现*/
   div
   {
       background: red;
       position:absolute;
       width:200px;
       height:200px;
       top:50%;
       left:50%;
       margin-left:-50px;
       height:-50px;
       z-index:1000;
   }
</style>

05为什么利用多个域名来存储网站资源会更有效?

答案

  1. CDN缓存更方便;

    2.突破浏览器并发限制;
    3.节约cookie带宽;
    4.节约主域名的连接数,优化页面响应速度;
    5.防止不必要的安全问题。

06写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式的相关代码:

答案

HTML代码:

 

CSS代码:


07请描述  WebStorage与cookie相比存在的优势?

答案

    (1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
    (2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器
    这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
    (3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等
    使得数据操作更为简便。cookie需要自己封装。
    (4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

08有哪项方式可以对一个DOM设置它的CSS样式?

答案

1.外部样式表,引入一个外部css文件
2.内部样式表,将css代码放在 <head> 标签内部
3.内联样式,将css样式直接定义在 HTML 元素内部

09CSS的盒子模型?

答案

(1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。

10html语义化是什么?

答案

当页面样式加载失败的时候能够让页面呈现出清晰的结构;
有利于seo优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别);
便于项目的开发及维护,使html代码更具有可读性,便于其他设备解析。

11$(document).ready()方法和window.onload有什么区别? 

答案

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。  

12前端页面有哪三层构成,分别是什么?作用是什么?

答案

1.结构层 Html 

2.表示层 CSS 

3.行为层 js

13css优先级算法如何计算?

答案

!important >  id > class > 标签 
!important 比 内联优先级高
*优先级就近原则,样式定义最近者为准;
*以最后载入的样式为准;

14请写出你对闭包的理解,并列出简单的理解  ?

答案

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

 闭包有三个特性:

 1.函数嵌套函数  

 2.函数内部可以引用外部的参数和变量 

 3.参数和变量不会被垃圾回收机制回收 

15split() 、join() 的区别?

答案

split()是切割成数组的形式,join()是将数组转换成字符串

16数组方法pop() push() unshift() shift()?

答案

pop()尾部删除

Push()尾部添加 
Unshift()头部添加 
shift()头部删除

17JavaScript的数据类型都有什么?

答案

基本数据类型:String,boolean,Number,Undefined, Null;
引用数据类型:Object(Array,Date,RegExp,Function)。

18对该数组numberArray = [3,9,4,6,1,5]; 实现降序排列?

答案

 实现对该数组的降序排列,输出[9,6,5,4,3,1]?
numberArray.sort(function(a,b){return b-a});

19写一个function,清除字符串前后的空格?(兼容所有浏览器)

答案

 

20列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个?

答案

 

对象:window, document, location, screen, history, navigator
方法:alert(), confirm(), prompt(), open(), close()

21闭包是什么,有什么特性,对页面有什么影响?

答案

我的理解是,闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
function outer(){
    var num = 666;
    function inner(){
        var n = 999;
        alert(n + num);
    }
    return inner;
}
outer()();

22什么是javascript 中的垃圾回收机制?

答案

在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。

如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因

23请尽可能详尽的解释ajax的工作原理?

答案

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

相关代码:

<script>
   window.onload = function (ev) {
       var oBtn = document.querySelector("button");
       oBtn.onclick = function (ev1) {
           // 1.创建一个异步对象
           var xmlhttp=new XMLHttpRequest();
           // 2.设置请求方式和请求地址
           /*
           method:请求的类型;GET 或 POST
           url:文件在服务器上的位置
           async:true(异步)或 false(同步)
           */
           xmlhttp.open("GET", "04-ajax-get.php", true);
           // 3.发送请求
           xmlhttp.send();
           // 4.监听状态的变化
           xmlhttp.onreadystatechange = function (ev2) {
               /*
               0: 请求未初始化
               1: 服务器连接已建立
               2: 请求已接收
               3: 请求处理中
               4: 请求已完成,且响应已就绪
               */
               if(xmlhttp.readyState === 4){
                   // 判断是否请求成功
                   if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                       xmlhttp.status === 304){
                       // 5.处理返回的结果
                       console.log("接收到服务器返回的数据");
                   }else{
                       console.log("没有接收到服务器返回的数据");
                   }

               }
           }
       }
   }
</script>

24如何解决跨域问题?

答案

理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域;

出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案。

25阐述一下异步加载?

答案

1. 异步加载的方案: 动态插入 script 标签
2. 通过 ajax 去获取 js 代码,然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe,让它异步执行 js

26说说你对this的理解?

答案

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。

全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身

27判断一个字符串中出现次数最多的字符,并统计次数?(编程题)

答案

<script>
   var s = 'bbcitcxyllkkjjfffdddsbbbbbb';
   var obj = {};
   var maxn = -1;
   var letter;
   for(var i = 0; i < s.length; i++) {
       if(obj[s[i]]) {
           obj[s[i]]++;
           if(obj[s[i]] > maxn) {
               maxn = obj[s[i]];
               letter = s[i];
           }
       } else {
           obj[s[i]] = 1;
           if(obj[s[i]] > maxn) {
               maxn = obj[s[i]];
               letter = s[i];
           }
       }
   }
   alert(letter + ': ' + maxn);
</script>


HTML+CSS部分:


    1、什么是盒子模型?
    答:在网页中,一个元素占有空间的大小由几个部分构成,其中
    包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分
    这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。
    4个部分一起构成了css中元素的盒模型。

    2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
    答:行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
       块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
       空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

    3.利用CSS实现一个div盒子相对浏览器垂直方向居中?
    css------ <style>
                div{
                width: 20

美团点评2019校招笔试题——前端开发方向(附答案) 2019年美团点评前端开发岗位校招笔试题目,虽然不是最新的,但面试题万变不离其宗,掌握了想要考察的知识点才是重要的。 1、单选题 点击“计算”按钮后输出结果为( ) A 11.5 B 11 C NaN D其他几项都不对 2、 多选题 下面关于sass/scss 和 less 的说法正确的是( ) ALess 与sass 都是 CSS 预编译器. 对 CSS 赋予了动态语言的特性 BSass... 阅读详情

相关推荐

美团点评2020校招前端方向笔试题

美团点评2020年校招前端方向笔试题 第一题 class A { String i = "op"; void func(String s) { s = "" + 9; } static void test() { A a = new A(); a.func(a.i); } } 问: 1,变量i,s,a在堆还是栈中? 2,第8行执行完后a.i的值是什么? 第二题 请按顺序写出打印结果,并说明原因。 var name =

吃太多会胖哦的博客 1818

b站前端校招面试题分享

前言 题库来自于牛客上B站的2020前端校招笔试,刷完感觉考核得比较细致也比较全面,所以小编这边将题目都列举出来然后解析过程也都写上。整体还是有些多的要是想直接看题的话这边放个链接吧题目地址,目录上可以看到题目考点这样方便大家也可以对应查看题目,放松一下眼镜要开始看题了。 题目及解析 第一题:同源策略 正解: A 考察同源策略以及url结构的了解,初见此概念还是非常陌生的,详细介绍这边就不提了,直接解析题目,同源就是(主机名+协议+端口号【若存在】)三者相同。B项协议与题干不相同、C项端口号不相同、

天明的博客 2820

京东2019校招前端笔试题解析:考点分布与备考指南

在互联网大厂的前端招聘笔试中,扎实的JavaScript基础与浏览器原理始终是考察重点。从作用域、闭包、原型链到事件循环,这些核心概念不仅决定了编码的底层逻辑,也是应对各种框架与工程化工具的前提。同时,手写代码能力如防抖节流、深拷贝、Promise实现等,已成为筛选候选人实践能力的关键指标。本文以京东2019校招前端笔试题为样本,系统梳理了笔试中的高频考点分布,包括JavaScript核心、CSS布局、跨域方案、框架原理及编程题答题套路,并结合真实阅卷经验给出了备考路线与时间规划,帮助应届生和初级开发者高效

weixin_32349561的博客 335

模拟滤波器的基础知识和设计

使用Python实现多种模拟滤波器

faltas的博客 3530

域格4G网优模块获取

1、获取当前小区信息 接口说明 该命令用于获取当前小区信息。 语法结构 命令类型 格式 返回结果 Execute AT+SCELLINFO +SCELLINFO: <cellMode>,<mcc>,<mnc>,<lac>,<cellId>,<afrcn>,<cpi>,<rxLevel>

自由的幻想 2463

人工智能AI在软件测试和质量效能中的实际应用

人工智能在软件测试中应用,介绍chatGPT在测试中的应用,还有多个AI驱动的测试工具。

lindafang72的博客 1万+

【嵌入式面经】上海 70迈 线上笔试

“关注|点赞|收藏” 福利干货第一时间送达!最近在做免费的嵌入式知识分享,帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作!

qq_56921854的博客 1137

基于STM32的便携式心率血氧监测系统 | 保姆式教程 开源可复刻

本项目基于STM32F103C8T6核心控制器,完整实现了便携式心率血氧监测系统的全功能开发,覆盖MAX30102光电传感器驱动、PPG信号处理、心率血氧解算算法、人机交互、数据存储、报警保护、低功耗管理等核心功能,全程采用无跳步保姆式教学,从硬件选型、接线、CubeMX配置、代码开发、调试优化全流程拆解,跟着步骤一步步操作,就能顺利完成项目复刻

ZhongWeiXiang9的博客 767

解决pd.read_json报错ValueError: Trailing data问题

首先,我们使用open函数打开JSON文件,然后使用json.load函数将JSON文件数据解码为Python对象。在使用Python进行数据处理中,我们经常需要将JSON格式的数据读入到DataFrame中进行处理。而使用pandas库的read_json函数,就可以方便地将JSON数据读入到DataFrame中。但是有时候在读取JSON数据时,会遇到一个非常常见的错误:ValueError: Trailing data。这个错误的解决方案并不难,只需要在read_json中添加一个参数即可。

学习使你进步。 2234

Cadence 开发合集【总目录】

专栏主要介绍Cadence原理图和PCB信号完整性电源完整性仿真相关的内容,更加注重实操,以帮助大家轻松上手并不断提高;在开始专栏的更新前,博主先列出专栏的大纲,以供大家参考。大家直接点击大纲中的蓝色标题即可轻松传送。 ............

fydar的博客 1万+

在 SAP 中修改 Profile 文件中的主机名需要谨慎操作,需需确保所有相关配置保持一致

在SAP系统中修改Profile文件主机名需谨慎操作,主要步骤包括:1)停止相关SAP服务;2)重命名并编辑实例级Profile文件(如ER1_D00_OLDHOST改为ER1_D00_LRPSAP),修改所有含旧主机名的参数;3)可选更新默认Profile文件;4)在Windows系统中调整注册表配置;5)验证一致性后重启服务。关键注意:保持大小写统一、修改前备份文件、集群环境需同步所有节点。通过系统日志确认新主机名生效且无报错。

金牌架构师 1049

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

上一篇: 优秀的人都在读的10本好书!
下一篇: Go语言实现走迷宫
IT程序员的日常
博客等级 码龄9年 170粉丝 39原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值