前端开发常见面试题

性能优化

  • 减少http请求的次数
  • 避免使用全局变量,减少DOM操作
  • 避免在CSS文件里使用动态属性
  • 压缩代码和图片,图片选用合适的格式
  • 利用ajax缓存,减少DNS查找

移动端ToC产品性能优化

  • 尽可能使用CSS3动画,开启硬件加速
  • 尽量避免CSS3的渐变阴影效果
  • 适当使用touch事件代替click事件
  • 尽量少用float,float在渲染时计算量大

ToC产品VSToB产品

  • ToB产品主要对象是企业,后台产品。比如公司内部的平台,主要进行的操作是数据的增删改查,注重逻辑性,用户都是公司内部人员。
  • ToC产品用户基本上是个人用户,重视用户的体验感和视觉效果。

深浅拷贝

  • 深拷贝:深拷贝会创造一个一模一样的对象
    • JSON.parse(JSON.stringify(object))
    • lodash的深拷贝函数
  • 浅拷贝:浅拷贝只复制指向某个对象的指针而不复制对象本身
    • Object.assign
    • ...展开运算符

ES6新特性

  • let:声明局部变量
  • const:声明只读变量
  • 解构赋值:从对象或数组中解构出值对变量进行赋值
  • 模板字符串:反单引号中${}插值
  • 当属性名和属性值相同只需写一个
  • 箭头函数,改变this的指向
  • for of专门用于遍历数组
  • 展开字符串 ...
  • 使用class定义类,extends实现类的继承

服务端渲染(SSR)VS客户端渲染(BSR)

  • 服务端渲染:由后端直接返回HTML,用nodejs编写
    • 优点:

有利于SEO优化
前端耗时少
后端直接生成HTML文件,减少查询数据的时间

  • 缺点:

不利于前后端分离,开发效率低
占用服务器资源

  • 客户端渲染:由前端使用js语法进行HTML渲染
    • 优点:

用户体验好
前后端分离,开发效率高

  • 缺点:

前端响应慢
不利于SEO优化

ES5原型链

  • 每个函数都有prototype属性,指向了函数的原型
  • 每个对象都有proto属性,指向了创建该对象的构造函数的原型。
  • 对象可以通过 proto 来寻找不属于该对象的属性,proto 将对象连接起来组成了原型链。

类的写法

  • ES5
function Person(name) {
    this.name = name; 
}
Person.prototype.sayHello = function(){
    return 'Hi, I am ' + this.name;
}
  • ES6
class Person {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}
typeof Person; 

HTML5

  • 新增语义化标签:

header,nav,footer,aside,article,section

  • 新增表单属性

datalist,datetime,date,month,week,number,emailurl等

axios及其封装

  • axios是基于promise的http库
  • 根据npm官网封装请求拦截器和响应拦截器

XHR手动封装

export function 名字(params/data) {
  return fetch({
    url: '   ',
    method: 'GET/POST',
    params/data
  })
}

事件委托

  • 原理:事件的冒泡机制,将子元素的事件委托给父元素
  • 优点:大量减少内存使用,减少事件注册

DOM 0级/2级

  • 0级DOM:绑定on...事件,不能同时绑定多个相同的事件,相同的会覆盖
  • 2级DOM:事件监听。同时绑定几个事件(相同或不同),然后顺序执行,不会覆盖

防抖与节流

  • 防抖:防抖是将多次执行变为最后一次执行
    • 如果短时间内大量触发同一事件,只会执行一次函数。
    • 定义一个定时器
  • 节流:节流是将多次执行变成每隔一段时间执行
    • 在函数执行一次之后,该函数在指定的时间期限内不再工作
    • 利用时间戳和定时器

获取DOM对象有哪些方法

  • getElementById()
  • getElementsByName()
  • getElementsByTagName()
  • getElementsByClassName()
  • document.querySelector()
  • document.querySelectorAll()

CSS权重

  • !import > 行内式 > id选择器 > class选择器 > 标签选择器

CSS3新增属性

  • border-color
  • border-image
  • border-radius
  • box-shadow
  • background-origin
  • transform
  • animation动画
  • transition过渡

position常用定位

  • static
  • relative
  • absolute
  • fixed

常用块级元素

  • h1 - h6
  • div
  • p
  • ul,ol ,li
  • form
  • table

DOM文档流

  • 将窗口自上而下分成一行一行,在每行中按从左往右依次排放元素。

BFC

  • 块级格式化上下文:新建了一个BFC盒子,盒子里面的元素不会影响外面元素的样式。在垂直方向上margin会重叠。
  • BFC作用:
    • 避免margin重叠
    • 清除浮动
    • 自适应两栏布局
  • 如何创建BFC
    • 有浮动
    • position为absolute或fixed
    • display为inline-block、table-cell、flex、table-caption或者inline-flex
    • overflow不为visible

GETvs.POST

  • get时从服务器获取数据,post时向服务器传递数据
  • get传送的数据量较小,不能大于2KB。post传送的数据量较大
  • get把参数添加到url中,post看不到用户信息
  • get安全性非常低,post安全性较高

状态码

  • 200:请求成功
  • 301:永久重定向
  • 302:暂时重定向
  • 405:客户端请求中的方法被禁止
  • 413:请求的实体过大,拒绝请求
  • 415:客户端媒体类型错误
  • 504:代理无法连接到服务器

AJAX

  • AJAX 是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

同源策略,CORS

  • 同源:域名,协议,端口号都相同
  • CROS:跨域资源共享,它允许浏览器向跨源服务器发送XHR请求,克服了AJAX只能同源使用的限制

正则表达式

img+span 上下居中有哪些方案

  • 给sopan和img添加vertical-align:middle

常用设计模式

  • 单例模式:只能创建唯一的实例
  • 适配器模式
  • 工厂模式

跨域的解决方案

  • JSONP跨域
  • nodejs中间件代理
  • nginx代理

JS常用数据类型

  • 基本数据类型:string,number,boolean,null,undefinded
  • 复杂数据类型:object

数组去重有哪些方法

undefined和null

  • undefinded和null相等但不全等。
  • 数据类型转换成number时,null为0,undefined为NaN。

严格模式下的代码规范有哪些

  • 变量必须先声明再使用,不存在变量提升
  • 不能使用保留字或关键字为变量名
  • 函数的参数不能有重复

作用域链

  • 在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

window和document

  • window:浏览器中一个打开的窗口
  • document:整个HTML文档,可以来访问页面中的所有元素

同步与异步

  • 同步:需要有返回结果才能继续执行
  • 异步:不需要有返回结果,之后使用回调函数调用结果

阻塞与非阻塞

  • 阻塞和非阻塞是在等待调用结果时的状态
  • 阻塞调用是指结果返回之前该线程会被挂起,只有得到结果才会返回
  • 非阻塞调用指在不能立刻得到结果之前,该调用不会阻塞当前线程。定时查看询问状态

回流与重绘

  • 回流:也叫重排。因为规模尺寸、布局等改变时,浏览器重新渲染。
  • 重绘:页面元素改变但不影响在文档流中的位置时,浏览器将重新绘制新样式
  • 回流必将引起重绘,但是重绘不一定会引起回流
  • 减少回流和重绘
    • 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流
    • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
    • 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容