html+javascript面试总结

最新推荐文章于 2023-06-09 23:15:10 发布

大青花鱼の

最新推荐文章于 2023-06-09 23:15:10 发布

阅读量631

点赞数 3

文章标签： html css 前端面试

本文链接：https://blog.csdn.net/halations/article/details/81805220

版权

html+css：

<1>布局(自适应布局，垂直居中，三列布局)

一般自适应会采用：flex、百分比垂直居中的方法：可采用flex、fixed定位、display:table-cell

未知宽高的元素怎么实现水平垂直居中？

1) 父元素设置table,子元素设置cell-table, vertical-algin:center

2）子元素绝对定位，top:50% left:50% transform:translate(-50%; -50%)

3) display: flex;justify-content: center;align-items: center;

溢出隐藏显示省略号？

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

<2>h5新增的一些内容，css3新增的一些东西

h5新增：header nav footer 绘画 canvas; 用于媒介回放的 video 和 audio 元素;

css3新增：https://blog.csdn.net/halations/article/details/84579305

表单控件，calendar、date、time、email、url、search;

新的技术webworker, websocket, Geolocation;

<3>本地离线存储

localStorage 长期存储数据，浏览器关闭后数据不丢失;

sessionStorage 的数据在浏览器关闭后自动删除;

window.localStorage.setItem('data',data) // 存数据
window.localStorage.getItem('data') // 取数据

<4>link和inport的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

<5>cookie，sessionstorage,localstorage的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

如何清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
1.clear清楚浮动（添加空div），在浮动元素下方添加空div,并给该元素写css样式。（clear：both;height:0;overflow：hidden）
2.给浮动元素父级设置高度
3.父级同时浮动
4.父级设置成inline-block,其margin:0 auto居中方式失效
5.给父级添加overflow:hidden 清除浮动方法
6.万能清除法 after伪类清浮动（现在主流方法，推荐使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

常见的浏览器内核有哪些？

Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

浏览器的缓存机制

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存。

对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。

对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存。

协商缓存方案：

Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。
Cache-control：max-age，表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，
If-None-Match/ETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。
Last-modified/If-Modified-Since：第一次请求的时候服务端返回Last-modified表明请求的资源上次的修改时间，第二次请求的时候客户端带上请求头If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比。

CSS和JS的位置会影响页面效率

css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。

js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

javascript：

基本数据类型：

string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中

JavaScript 中有两种底层类型：null 和 undefined。它们代表了不同的含义：

尚未初始化的东西：undefined；
目前不可用的东西：null。

引用类型：

Object Function RegExp Math Date 值为对象，存放在堆内存中
在栈内存中变量保存的是一个指针，指向对应在堆内存中的地址。

数据结构

原文链接：http://caibaojian.com/learn-javascript.html

栈：一种遵从先进后出 (LIFO) 原则的有序集合；新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端为栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。
队列：与上相反，一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项；队列在尾部添加新元素，并从头部移除元素。最新添加的元素必须排在队列的末尾。
链表：存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的；每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（指针/链接）组成。
集合：由一组无序且唯一（即不能重复）的项组成；这个数据结构使用了与有限集合相同的数学概念，但应用在计算机科学的数据结构中。
字典：以 [键，值] 对为数据形态的数据结构，其中键名用来查询特定元素，类似于 Javascript 中的Object。
散列：根据关键码值（Key value）直接进行访问的数据结构；它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度；这个映射函数叫做散列函数，存放记录的数组叫做散列表。
树：由 n（n>=1）个有限节点组成一个具有层次关系的集合；把它叫做“树”是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的，基本呈一对多关系，树也可以看做是图的特殊形式。
图：图是网络结构的抽象模型；图是一组由边连接的节点（顶点）；任何二元关系都可以用图来表示，常见的比如：道路图、关系图，呈多对多关系。

算法

排序算法·

冒泡排序：比较任何两个相邻的项，如果第一个比第二个大，则交换它们；元素项向上移动至正确的顺序，好似气泡上升至表面一般，因此得名。
选择排序：每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，以此循环，直至排序完毕。
插入排序：将一个数据插入到已经排好序的有序数据中，从而得到一个新的、个数加一的有序数据，此算法适用于少量数据的排序，时间复杂度为 O(n^2)。
归并排序：将原始序列切分成较小的序列，只到每个小序列无法再切分，然后执行合并，即将小序列归并成大的序列，合并过程进行比较排序，只到最后只有一个排序完毕的大序列，时间复杂度为 O(n log n)。
快速排序：通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行上述递归排序，以此达到整个数据变成有序序列，时间复杂度为 O(n log n)。

搜索算法

顺序搜索：让目标元素与列表中的每一个元素逐个比较，直到找出与给定元素相同的元素为止，缺点是效率低下。
二分搜索：在一个有序列表，以中间值为基准拆分为两个子列表，拿目标元素与中间值作比较从而再在目标的子列表中递归此方法，直至找到目标元素。

其他

贪心算法：在对问题求解时，不考虑全局，总是做出局部最优解的方法。

动态规划：在对问题求解时，由以求出的局部最优解来推导全局最优解。

复杂度概念：一个方法在执行的整个生命周期，所需要占用的资源，主要包括：时间资源、空间资源。

面向对象的四个基本特征：

抽象，继承，封装，多态性。

枚举与不可枚举

var obj = {};

Object.defineProperty(obj, "name", {
    value: 'xiao ming',
    enumerable: true,
});
Object.defineProperty(obj, "age", {
    value: '11',
});
Object.defineProperty(obj, "value", {
    value: '100',
    enumerable: false,
});

enumerable的值是true就是可枚举 defineProperty定义的默认是false不可枚举字面量定义的就是enumerable默认是true

五种创建对象方式

字面量工厂模式构造函数原型模式混合

// 对象字面量创建对象
person={
　　name:"小米",
　　age:23
};

// 工厂模式:虽然解决了创建相似对象的问题，但是却没有解决对象识别问题（即怎样知道一个对象的类型）。
function createPerson(name){
    var obj=new Object();
    obj.name=name;
    obj.showName=function(){
       alert(this.name);
    }     
     return obj; 
} 
var p1=createPerson('小米');
p1.showName();

// 构造函数创建对象
优点：创建自定义函数意味着将来可以将它的实例标识为一种特定的类型，这是构造函数胜过工厂模式的地方
缺点：每个方法都要在每个实例上重新创建一遍
function CreatePerson(name){
  this.name=name;
  this.showName=function(){
    alert(this.name);
  }
}
var p1=new CreatePerson('小米');

// 原型创建
function Person(){}
    Person.prototype.name="小米";
    Person.prototype.showName=function(){
    alert(this.name);
}
var p1=new Person();
p1.showName();
优点：可以让所有的对象实例共享它所包含的属性和方法
缺点：原型中是所有属性都是共享的，但是实例一般都是要有自己的单独属性的。所以一般很少单独使用原型模式。

// 混合创建 构造函数模式定义实例属性，而原型模式用于定义方法和共享的属性
function CreatePerson(name){
  this.name=name;
}
CreatePerson.prototype.showName=function(){
    alert(this.name);
}
var p1=new CreatePerson('小米');
p1.showName();

var p2=new CreatePerson('小米');
    p2.showName();
　　alert(p1.showName==p2.showName);//true;原因：都是在原型下面，在内存中只存在一份，地址相同

五种继承方式

改变父类的执行环境 call apply 原型继承混合继承

1.构造继承
// 父类
function Super(){
  this.name = 'xiaoming'
}
Super.prototype.doing = function(){
  return 'playing'
}
// 子类
function Sub(){
  Super.call(this)
  this.age = '11'
}
console.log((new Sub).name) // xiaoming

2.原型链继承
function Animal (name) {
  this.name = 'Animal';
  this.age = '1'
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};


function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

var cat = new Cat();
console.log(cat.name); // cat
console.log(cat.age); // 1
console.log(cat.eat('fish')); // undefined
console.log(cat.sleep()); // undefined
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
优点
简单明了，容易实现
实例是子类的实例，实际上也是父类的一个实例
父类新增原型方法/原型属性，子类都能访问到
缺点
所有子类的实例的原型都共享同一个超类实例的属性和方法
无法实现多继承

3.混合继承 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
function Animal (name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

特点：
可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点：
调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

原型链(待补充)

构造函数不需要显示的返回值。使用new来创建对象(调用构造函数)时，如果return的是非对象(数字、字符串、布尔类型等)会忽而略返回值;如果return的是对象，则返回该对象(注：若return null也会忽略返回值）。

闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，

通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包的特性：

1.函数内再嵌套函数

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

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

垃圾回收机制

是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。JS中最常见的垃圾回收方式是标记清除。

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

1.在函数里面定义了全局变量

2.闭包延迟生命周期

数组的方法

https://blog.csdn.net/halations/article/details/84134750

阻止事件传播和默认行为（js常用）

事件流分为两种，捕获事件流和冒泡事件流。

捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点。

事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段。

阻止事件传播：

在W3c中，使用 e.stopPropagation() 方法
在IE下设置cancelBubble = true；
封装阻止事件冒泡函数：

取消默认行为：

在W3c中，使用preventDefault（）方法；
在IE下设置window.event.returnValue = false;

es6

http://es6.ruanyifeng.com/

原理

<1>对原生ajax的理解

ajax的全称：Asynchronous Javascript And XML。

异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时

做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷

新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

简言之：

1.创建XML对象

2.open(方法，文件名，异步传输)

3.send()

4.接收返回处理回调

<2>gets和post的区别

简单说：

1. 最直观的就是语义上的区别，get用于获取数据，post用于提交数据。

2. get参数有长度限制（受限于url长度，具体的数值取决于浏览器和服务器的限制），而post无限制

复杂来说：

GET的语义是请求获取指定的资源。GET方法是安全、幂等、可缓存的（除非有 Cache-ControlHeader的约束）,GET方法的报文主体没有任何语义。POST的语义是根据请求负荷（报文主体）对指定的资源做出处理，具体的处理方式视资源类型而不同。POST不安全，不幂等，（大部分实现）不可缓存。

call，apply，bind的区别

bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同。

bind是Function原型链中的Function.prototype的一个属性，它是一个函数，修改this指向，合并参数传递给原函数，返回值是一个新的函数。

bind返回的函数可以通过new调用，这时提供的this的参数被忽略，指向了new生成的全新对象。内部模拟实现了new操作符。

<3>对设计模式了解吗？

说出几种设计模式即可（发布订阅模式、单例模式、观察者模式等）

<4>性能优化&网络请求

web网络请求的过程 !!!

发起HTTP请求 HTTP解析工具内核浏览器缓存机制 DNS解析（10个步骤） CDN工作机制（主要缓存网站中的静态资源）

------

1. DNS域名解析域名解析成ip地址

2. 寻找目标服务器

3. 建立TCP连接（TCP的三次握手）

4. 发起http请求来请求入口文件

5. 浏览器进行解析（如果还有外部资源继续发生请求）

6. 请求之后还有进行TCP的第四次挥手

浏览器解析过程：

流程：解析html以构建dom树->构建render树->布局render树->绘制render树

性能优化？

1.使用 CDN

资源放到现成的CDN服务器上会比公司服务器响应速度快（多了一套域名解析...）

bootstrap.css jquery.js

图片cdn服务器青牛...

2.图片懒加载

3.使用外部 JavaScript 和 CSS

4.压缩 JavaScript 、 CSS 、字体、图片等

5.优化 CSS Sprite

6.减少 HTTP 请求数

7.减少 DNS 查询

8减少 DOM 元素数量

9.减少 DOM 操作

10.把脚本放在页面底部

11. 请求阻塞代码运行！

浏览器针对不同情况的资源，它的并行下载量不一样

提高并行下载量，有助于页面加载速度，可以资源分流，放入到不同的服务器中 2-4个服务器最好

模块化进行按需加载 requireJs，在script标签上设置defer、async属性

<5>前后端分离

前后端分离的主要概念就是：
后台只需提供API接口，前端调用AJAX实现数据呈现。
1.彻底解放前端
前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码
2.提高工作效率，分工更加明确
前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，
两者开发可以同时进行，在后台还没有时间提供接口的时候，
前端可以先将数据写死或者调用本地的json文件即可，
页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。
3.局部性能提升
通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，
服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。
4.降低维护成本
通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，
客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

前端的工作：实现整一个前端页面以及交互逻辑，以及利用ajax与nodejs服务器（中间层)交互
后端的工作：提供API接口，利用redis来管理session,与数据库交互

<6>js异步原理；

JS的特色之一是单线程
① JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

② JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化。

解决异步的方法

async fn(data){
        try{
            await function()
        }catch (e) {

        }
    }

webpack的结构，并且简述里面常用的插件，优化方案

1.总结需要抽离的公共依赖。

这些依赖需要满足一定的条件：

1.体积较大；2.不常更新；3.依赖较多；4.是前置依赖；

常见的满足这类条件的包有：

react react-dom redux react-redux jquery

2.使用CDN引入资源（script src）

我需要抽离出的文件有 react，react-dom，react-router，redux，react-redux，history。

将这些文件放到cnd上，注意，这些文件要是压缩版本，并且是用ES5编写的，否则浏览器报错。

然后在webpack.conf.js配置webpack，使其在打包的时候不在将这些资源打包。

大青花鱼の

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+javascript面试总结

html+css：<1>布局(自适应布局，垂直居中，三列布局)一般自适应会采用：flex、百分比垂直居中的方法：可采用flex、fixed定位、display:table-cell未知宽高的元素怎么实现水平垂直居中？1) 父元素设置table,子元素设置cell-table, vertical-algin:center...
复制链接

扫一扫