前端常见面试题(二)————前端
前端常见面试题(二)————前端
小小的提一下,面试时,面试官很喜欢看你的项目实践,就看你做过什么项目,如果一个都不写,可能会跪,然后围着你的项目去问细节。(自己做些项目很重要)
正文部分:
1.var,let,const的区别:
(1).var可以变量提升:啥是变量提升?
var a=10 //全局变量
function fn() {
console.log(a);//输出undefined
var a=20;//var会把a这个声明提到作用域的顶端,var a;
console.log(a);//20
}
fn()
console.log(a);//10
//上面的代码与下面的等同!
var a=10 //全局变量
function fn() {
var a; //只是声明放在顶端,值还在原来的位置!!!!而且以声明就把a局部重置了!!!
console.log(a);//输出undefined,a局部重置了,重置了还没有值!!!
a=20;//var会把a这个声明提到作用域的顶端,var a;
console.log(a);//20
}
fn()
console.log(a);//10
变量提升:只提声明,不提数值的!
注:class声明类时,不存在变量提升。
(2).let和const声明只在他声明的代码块里面有效果。
(3).const声明后不能修改,声明必赋值!
注:const声明一对象,可以使用Object.freeze()来锁死数值。
2.js的基本数据类型:
boolean,null,number,underfined,string,Object,symbol(es6新增)
那么symbol是啥呢?
- 表示独一无二的值
- 声明时可以加参数,用与描述
- 作为key时不能被遍历
3.移动端如何实现自适应?
- bootstrap 等ui框架
- rem
- vw和vh
4.你是怎么学前端的,你是怎么学某某技术(vue)的?
一般这题应该是看看你是不是培训班出来的。其实我也不知道,他问这个的具体意义。
5.如何解决跨域问题:
跨域问题是每一个前后端分离都会遇到的。
无法跨域一般都会报错:。。。。cors。。。。
说明cors这就是问题所在。主要是通过设置,access-control-allow-origin来实现的。
我用的是node,通过安装cors依赖。
//cors跨域问题
const cors = require('cors');
app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
}));
//跨域问题解决方面
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
两种都行,你不确定就一起用了吧。
6.xml与json的区别:
个人喜欢json,数据简洁明了,而且还好调用,小程序,web应用,网站用这数据很方便。
- 体积:json相对于xml来说,体积更小,传递速度更快。
- 交互:json与js的交互更加方便,更加容易解析处理,更好的数据交互。
- 级别:xml是重量级的,json是轻量级的。
- 描述:json对数据描述性比xml的差。
- 解析:json可用jackson,gson等方法解析,xml可用dom,sax,demo4j等方式解析。
7.Vue 有哪些指令?
v-html,v-show,v-if(v-else-if,v-else),v-for,v-cloak,v-text,v-bind,v-model,v-pre
8.前端如何优化网站性能?
- 减少 HTTP 请求数量
- CSS Sprites:国内俗称 CSS 精灵,这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案,可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
- 合并 CSS 和 JS 文件:现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
- 采用 lazyLoad:俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
- 控制资源文件加载优先级
- 浏览器在加载HTML内容时,是将HTML内容从上至下依次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受 JS 加载影响。
- 一般情况下都是CSS在头部,JS在底部
- 减少DOM操作和图标使用iconfont代替。多利用浏览器缓存。
9.对以后自己的前端职业路线,怎么规划?
这东西都是自由发挥的,可能说好点能加印象分。
10.前端页面有哪三层构成, 分别是什么?作用是什么?
结构层 Html ,表示层 CSS ,行为层 js。
11.行内元素有哪些?块级元素有哪些?CSS 的盒模型?
块级元素: div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容, border ,margin, padding
12简介盒子模型:
CSS 的盒子模型有两种: IE 盒子模型、 标准的 W3C 盒子模型模型
盒模型: 内容、 内边距、 外边距( 一般不计入盒子实际宽度) 、 边框
13.Sass、 LESS 是什么? 大家为什么要使用他们?
他们是 CSS 预处理器。 他们是 CSS 上的一种抽象层。 他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性, 如变量, 继承, 运算, 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox), 也可一在服务端运行(借助 Node.js)。
为什么要使用它们?
结构清晰, 便于扩展。
可以方便地屏蔽浏览器私有语法差异。 这个不用多说, 封装对浏览器语法差异的重复处理,减少无意义的机械劳动。可以轻松实现多重继承。
完全兼容 CSS 代码, 可以方便地应用到老项目中。 LESS 只是在 CSS 语法上做了扩展, 所以老的 CSS 代码也可以与 LESS 代码一同编译。
14.CSS 中 link 和@import 的区别是:
Link 属于 html 标签, 而@import 是 CSS 中提供的
在页面加载的时候, link 会同时被加载, 而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别, 而 link 是 html 标签, 不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用( @import 是将引用的样式导入到当前的页面中)
原文地址:https://www.cnblogs.com/cth0/p/11700378.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php 实现简单的登录功能示例【基于thinkPHP框架】
- laravel框架邮箱认证实现方法详解
- 使用Git实现Laravel项目的自动化部署
- php传值和传引用的区别点总结
- php pdo连接数据库操作示例
- 关于Laravel参数验证的一些疑与惑
- PHP cookie与session会话基本用法实例分析
- Laravel 微信小程序后端实现用户登录的示例代码
- 使用PHP开发留言板功能
- PHP的new static和new self的区别与使用
- php时间戳转换代码详解
- thinkPHP和onethink微信支付插件分享
- PHP各种常见经典算法总结【排序、查找、翻转等】
- php字符串截取函数mb_substr用法实例分析
- PHP利用DWZ.CN服务生成短网址