html+javascript面试总结

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:

基本数据类型:

stringnumbernullundefinedbooleansymbol(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()相同。

 bindFunction原型链中的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
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论

打赏作者

大青花鱼の

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值