码迷,mamicode.com
首页 > 其他好文 > 详细

前端常见面试题

时间:2021-06-24 18:17:06      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:safari   expr   items   作用   控制   解构   高度   建立   试题   

这段时间去找工作,发现了很多出现概率比较高的面试题,这里记录一下,希望对大家有帮助!

盒子模型的类型和区别
盒子包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。
分为盒子模型(标准盒模型)和IE盒子模型(怪异盒模型),两者最大的区别是总宽/高包括的范围的不同
标准盒模型:盒子总宽度/高度=width/height+padding+border+margin。
怪异盒模型:盒子总宽度/高度=width/height + margin (即 width/height=内容区宽度/高度 + padding + border)

而box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。

Js的基本数据类型
JS共有7种数据类型,分别是存储在堆里的引用数据类型(对象、数组和函数)和存储在栈里的原始数据类型(Undefined、Null、Boolean、Number、String)

普通函数和箭头函数的区别?

  1. 写法不同:普通函数要写function,箭头函数不用;
  2. 声明方式不同:普通函数可以是声明式的,也可以是赋值式,而箭头函数只能是赋值式的;
  3. this指向不同:普通函数有原型prototype,this指向不确定,箭头函数本身没有this,因为没有原型,this指向确定,指向他父级作用域;
  4. new不同:普通函数可以new,箭头函数不能new,就是因为没有原型prototype;
  5. 传参方式:普通函数可以获取arguments,箭头函数不能获取可以通过...arg,一般传参需要一一明确

div块垂直水平居中

  1. 弹性布局
    .box{ display: flex; justify-content:center; align-items:center; }

2.已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中
父元素 position:relative,子元素 position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;

3.未知块级元素的宽和高,使用绝对定位+css3样式属性transform
父元素 position:relative,子元素 position:absolute;transform: translate(-50%,-50%);

性能优化
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

ajax请求
ajax作用:可以不用刷新整个页面实现页面的部分更新。
主要有GET请求 POST请求
get和post的区别:
url可见性:get,参数url可见;post,url参数不可见
数据传输上:get,通过拼接url进行传递参数;post,通过body体传输参数
缓存性:get请求是可以缓存的;post请求不可以缓存
后退页面的反应:get请求页面后退时,不产生影响;post请求页面后退时,会重新提交请求
传输数据的大小:post请求传输数据比get大
安全性:post比get安全

js缓存方案
sessionStorage:临时的会话存储,只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面或者在编辑器中更改了代码,存储的会话信息也不会丢失。
localStorage:是一种如果你不主动去清除,会一直将数据存储在客户端的储存方式,即使关闭了浏览器,下次打开的时候仍然可以看到之前存储的未主动清除的数据(即便是
杀毒软件或者浏览器自带的清除功能,也不能将localStorage存储的数据清除掉)
cookie属于较老且最常见用的最多的技术了
cookie兼容所有的浏览器,但存储的数据是有大小限制,一般是4kb;
本地存储的数据会被发送到服务器

ES6的新特性
新增数据类型 const、let声明变量方式 模板字符串 对象解构赋值
延展运算符(...) 对象字面量增强 Class类的支持 Promise异步对象模块
import、export 数组、对象新增方法

在浏览器输入一个url地址,浏览器都干了什么?
域名解析 --> 发起3次握手 --> 建立连接后发起http请求 --> 服务器响应请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户

常见的浏览器内核

浏览器/RunTime 内核(渲染引擎) JavaScript 引擎
Chrome Blink(28~)
Webkit(Chrome 27) V8
FireFox Gecko SpiderMonkey
Safari Webkit JavaScriptCore
Edge EdgeHTML Chakra(for JavaScript)
IE Trident Chakra(for JScript)
PhantomJS Webkit JavaScriptCore
Node.js - V8

注:部分内容来源于网络
未完待续...

前端常见面试题

标签:safari   expr   items   作用   控制   解构   高度   建立   试题   

原文地址:https://www.cnblogs.com/s272/p/14926374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!