web前端面试问什么常见问题

1、知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化?

像html5的新的标签header,footer,section等就是语义化

一方面,语义化就是让计算机能够快读的读懂内容,高效的处理信息,可以对搜索引擎更友好

另一方面,便于与他人的协作,他人通过读代码就可以理解你网页标签的意义

去掉或者丢失样式的时候能够让页面呈现出清晰的结构

有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义方式来渲染网页

便于团队开发和维护,语义化更具有可读性,是下一步把网页的重要动向,遵循W3C标准的团队都要遵循这个标准,减少差异化

2、介绍HTML5的新特性

完全支持css3

video和audio

本地存储

语义化表圈

canvas新事件如ondragonresize

3、如果解决ajax无法后退的问题

html5里引入了新的API,即:history.pushState,history.replaceState

可以通过pushState和replaceSate接口浏览器历史,并且改变当前页面的URL

onpopstate监听后退

4、websocket和ajax轮询

websocket是html5中提出的新的协议,可以实现客户端与服务器的通信,实现服务器的推送功能

优点是,只要简历一次连接,就可以连续不断的得到服务器推送消息,节省带宽和服务器端的压力。

缺点就是,每次都要建立HTTP连接,即使需要传输的数据非常少,浪费带宽

5、webworker和websocket

worker主线程

通过worker=newworker(url)加载一个js文件来创建一个worker,同时返回一个worker实例

通过worker.postMessage(data)方法来向worker发送数据。

绑定worker.onmessage方法来接收worder发送过来的数据

可以使用worker.terminate()来终止一个worder的执行。

websocket

6、Doctype作用?严格模式与混杂模式如果区分?意义?

严格模式的排版和js运作模式是以该浏览器支持的最高标准运行

在混杂模式中,页面已宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

7、Doctype多少种文档类型?

HTML4.01规定了三种文档类型:Strict,Transitional以及Frameset

XHTML1.0规定了三种XML文档类型:Strict,Transitional以及Franmeset

Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标签的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页

8.HTML与XHTML,有什么区别?

所有的标签必须要有一个相应的结束标签

所有标签的元素和属性的名字都必须使用小写

所有的XML标记都必须合理嵌套

所有的属性必须引号“”括起来

把所有的

给所有属性赋一个值

不要在注释内容使用'--'

图片必须要有说明文字

CSS

1、content-box和border-box,为什么看起来content-box更合理,但还是经常使用border-box

content-box是W3C的标准盒模型元素宽度+padding+border

border-box是ie的怪异盒模型,他的元素宽度等于内容宽度内容宽度包含了padding和border

比如有时候在元素基础上添加内边距padding或border会将布局撑破但是使用border-box就可以轻松完成

2、实现三个DIV等分排在一行(考察border-box)

1.设置border-boxwidth33.33%

2.flexboxflex:1

3.实现两栏布局有哪些方法

方法一:

它可以通过下一任和一种方式来创建

float的值不为none

position的值不为static或者relative

display的值为table-cell,table-caption,inline-block,flex,或者inline-flex其中一个

overflow的值不为visible

4、flex属性值是多少?

flex属性是flex-grow,flex-shrink和flex-basis的简写

flex-grow属性定义项目的放大比例,默认为0

flex-shrink属性定义了项目的缩小比例,默认为1

flex-basis属性定义了项目的固定空间

5、怎么实现一个DIV左上角到右下角的移动,有哪些方法?怎么实现?

改变left值为window宽度-div宽度top值为window高度=div高度

jquery的animate方法

css3的transition

6、垂直居中

单行行内元素

可以设置padding-top,padding-bottom

将height和line-height设为相等

多行行内元素

可以将元素转为tabel样式,再设置vertical-align:middle;

使用flex布局

块级元素

已知高度绝对定位负边距

未知高度transform:translateY(-50%);

flex布局

em相对于父元素,rem相对于根元素

8、清除浮动

利用clear属性进行清理

父容器结尾插入空标签

BFC能清理浮动主要运用的是它的布局规则:

内部的Box会在垂直方向,一个接一个的放置

box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠

每个元素marginbox的左边,与包含快borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

BFC的区域不会与floatbox重叠

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此

计算BFC的高度时,浮动元素也参与计算

触发BFC有哪种方法?

根元素

float属性不为none

position为absolute或fixed

display为inline-block,table-cell,table-caption,flex,inline-flex

overflow不为visible

9、position的值,relative和absolute分别是相对于谁进行定位的?

relative:相对定位,相对于自己本身在正常文档流中的位置进行定位。

absolute:生成绝对定位,相对于最近一级定位不为static的父元素进行定位。

fixed:(老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。

static:默认值,没有定位,元素出现在正常的文档流中。

sticky:生成粘性定位的元素,容器的位置根据正常文档流计算得出。

10、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有那些?

选择符:

id选择器(#myId)

类选择器(.myClassName)

标签选择器(div,p,h1)

相邻选择器(h1+p)

子选择器(ul>li)

后代选择器(lia)

通配符选择器(*)

属性选择器(button[disabled="true"])

伪类选择器(a:hover,li:nth-child)

优先级

!important>行内样式(比重1000)>id(比重100)>class/属性(比重10)>tag/伪类(比重1);

11、介绍sass

定义变量css嵌套,允许在代码中使用算式,支持if判断for循环

12、transition和margin的百分比根据什么计算?

transition是相对于自身;margin相对于参照物

13、display:none和visibility:hidden的区别?

display:none隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

visibility:hidden隐藏对应的元素,但是在文档布局中仍保留原来的空间。

15、CSS中link和@import的区别是?

link属于HTML标签,而@import是CSS提供的;

页面被加载的时,link会同时被加载,而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

link方式的样式的权重高于@import的权重.

JS

1、介绍一下闭包和闭包常用场景?

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

闭包有三个特性:

函数嵌套函数

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

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

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

应用场景,设置私有变量的方法

不适用场景:返回闭包的函数是个非常大的函数

闭包的缺点就是常驻内存,会增大内存使用量,使用不当会造成内存泄漏

2、为什么会出现闭包这种东西?解决了什么问题?

受javascript链式作用域链的影响,父级变量中无法访问到子级的变量值

3、介绍一下你所了解的作用域链,作用域链的尽头是什么?为什么?

每一个函数都有一个作用域,比如创建了一个函数,函数里面又包含了一个函数,那么现在又三个作用域,这样就形成了一个作用域链

作用域的特点就是,先在自己的变量范围中查找,如果找不到,就会沿着作用域链网上找

4、ajax创建的过程是怎样的,主要用到哪些状态码?

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

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

设置响应HTTP请求状态变化函数

发送HTTP请求

获取异步调用返回的数据

使用javascript和DOM实现局部刷新

可以大量节省内存占用,减少事件注册

12、webpack常用到哪些功能?

设置入口

设置输出目录

设置loader

extract-text-webpack-plugin将css从js代码中抽出并合并

处理图片文字等功能

解析jsx解析bable

13、函数组合继承

原型继承,构造函数继承,callapply继承

作用域链的作用是保证执行环境里有权访问的变量和函数是有序耳朵,作用域链额变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的

15、js垃圾回收方法

标记清除(markandsweep)

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

引用计数(referencecounting)

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的,也就是说只要涉及BOM及DOM就会出现循环引用问题。

16、js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数

借用构造函数(类试继承)

借用构造函数虽然解决了刚才两种问题,但是没有原型,则复用无从谈起,需要原型链+借用构造函数的模式,这种模式成为组合继承

组合式继承

组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承,这样,即通过在原型上定义方法实现了函数复用,有保证每个实例都有它自己的属性

ES6

1、let和const的区别?

2、平时用了es6的哪些内容,和es5有什么不同?

let,const,箭头函数,字符串模板,class类,模块化,promise

ES5reuqire,react,createclass

3、介绍promise

就是一个对象,用来传递异步操作的消息。有三种状态:pending(进行中),resolved(已完成)和rejected(失败)

有了promise对象,就可以将异步操作以同步操作的流程表示出来,避免了层层嵌套的回调函数

前端框架

模块化

1、使用模块化加载时,模块记载的顺序是怎么样的,如果不知道,根据已有的知识,加载顺序是怎么样的

commonjs同步循序执行

AMD提前加载,不管是否调用模块,先解析所有模块require速度快有可能浪费资源

CMD提前加载,在正真需要使用(依赖)模块时才解析该模块

seajs按需解析,性能比AMD差

框架问题

1、什么是MVVM,和MVC有什么区别,原理是什么?

mvc的界面和逻辑关联紧密,数据直接从数据库读取,必须通过controller来承上启下,通信都是单向的

mvvm的view和viewModel可以互相通信,界面数据从viewmodel中获取

2、父子组件通信

vue:父组件是通过props属性给子组件通信,在子组件里面emit,在父组件监听

react:props传递父给子穿一个回调函数,将数据传给父亲处理

3、兄弟组件怎么通信的?

redux子A->父->子B

4、生命周期有哪些,怎么用?

beforecreated:el和data并未初始化

created:完成了data数据的舒适化,el没有

beforeMount:完成了el和data初始化

mounted:完成挂载,updated,destroyed

浏览器

1、跨域通信有哪些解决方案?

(1)JSONP

由于同源策略的限制,XMLHttpRequest只允许请求当前资源(域名、协议、端口)的资源,script标签没有同源限制,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

通过动态

优点:兼容性好,简单易用,支持浏览器与服务器双向通信

缺点:只支持GET请求

服务器端对于CORS的支持,只要就是通过设置Access-Control-Allow-Orgin来进行的。如果浏览器检测到响应的设置,就可以允许ajax进行跨域访问。

通过设置Access-Control-Allow-Orgin来允许跨域,cors可以用ajax发请求获取数据,但是兼容性没有jsonp好

(3)通过修改document.domain来跨子域

将子域和主域的doucment.domain设为同一个主域,前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致

主域相同的使用document.domain

(4)使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name。每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

(5)使用HTML5中心引进的window.postMessage方法来跨域传送数据

(6)还有flash,在服务器上设置代理页面等跨域方式。

2、移动端兼容问题

3、XML和JSON的区别?

数据体积方面:JSON相对于XML来讲,数据的体积小,传递的速度更快些

数据交互方面:JSON与js的交互更加方便,更容易解析处理,更好的数据交互

数据描述方面:JSON对数据的描述性比XML较差

传输速度方面:JSON的速度远远要快于XML

4、渐进增强和优雅降级

渐进增强:针对低版本的浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果

优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

构建工具

1、webpack的理解,和gulp有什么不同?

webpack是模块打包工具,会分析模块间的依赖关系,然后使用Loaders处理他们,最后生成一个优化并且合并后的静态资源

gulp是前端自动化工具,能够优化前端工作流程,比如文件合并压缩

2、webpack打包速度很慢,为什么?怎么解决?

模块太多

webpck可以配置externals来将依赖的库指向全局变量,从而不再打包这个库

网络&存储

请求中的消息主题是用何种方式解码

application/x-www-form-urlencoded

这是最常见的post提交数据的方式,按照key1=val1&key2=val2的方式进行编码

application/json

告诉服务器端消息主体是序列化后json字符串

2、get和post有什么不同?

get是从服务器上获取数据,post是像服务器传送数据

get请求可以将查询字符串参数追加到url的末尾;post请求英国把数据作为请求的主体提交

get请求数据有大小限制;

post没有post比get安全性更高

3、cookie和session有什么联系和区别?

cookie数据存放在客户的浏览器上,session数据放在服务器上

session比cookie更安全

单个cookie保存的数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie

一般用cookie来存储sessionid

4、多页面通信有哪些方案,各有什么不同?

localstroge在一个标签页里呗添加、修改、删除时,都会触发一个storage事件,通过另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信

settimeout+cookie

5、输入网站后到页面展现是过程?

通过dns解析获取ip

tcp链接

tcp传输报文

6、客户端解析渲染页面

构建DOM树->构建渲染树->布局渲染树:计算盒模型位置和大小->绘制渲染树

7、前端性能优化

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器

缓存利用:缓存ajax,使用CDN,使用外部js和css文件以便缓存

添加expires头,服务器配置Etag,减少DNS查找

请数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载

请求带宽:压缩文件,开始GZIP

样式放在顶部,脚本放在底部

8、移动端性能优化

尽量使用css3动画,开启硬件加速

避免使用css3渐变阴影效果

可以用transform:translateZ(0)来开启硬件加速

不滥用float。float在渲染时计算量比较大,尽量减少使用

不滥用web字体。web字体需要下载,解析,重绘当前页面

合理使用requestAnimationFrame动画代替setTimeout

css中的属性(css3transitions、css33Dtransforms、opacity、webGL、video)会触发GUP渲染,耗电

9、HTTP和HTTPS

HTTP协议通常承载与TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS

默认HTTP的端口号为80,HTTPS的端口号为443

10、为什么HTTPS安全

11、defer和async

defer并行加载js文件,会按照页面上script标签的顺序执行

async并行加载js文件,下载完成立即执行,不会按照页面上script标签的顺序执行

IE6浏览器常见的BUG

1、IE6不支持min-height,解决办法使用csshack

为li设置样式display:list-item

3、未定位父元素overflow:auto;,包含position:relative;子元素,子元素高于父元素时会溢出

子元素去掉position:relative

不能为子元素取消定位时,父元素position:relative

4、IE6只支持a标签的:hover伪类

使用js为元素监听mouseenter,mouseleave事件,添加类实现效果

5、IE5-8不支持opacity

font-size:0;

7、IE6不支持PNG透明背景

IE6下使用gif图片

8、IE6-7不支持display:inline-block

设置inline并处罚hasLayout

使用padding控制边距

浮动元素display:inline;

10、通过块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中

THE END
1.意义和作用一样吗两者是什么意思意义和作用不一样,作用是因,影响是果,意义是“果”的反思。意义、作用的区别为:意思不同、出处不同、侧重点不同。作用:对事物产生影响。意义:语言文字或其他信号所表示的内容。出处不同:作用出自孙犁《秀露集·文学和生活的路》;意义出自鲁迅《花边文学·“此生或彼生”》 http://www.chusan.com/zhongkao/237708.html
2.怎么区分作用和意义(意义区分)什么是作用和意义 作用和意义是两个相关但不同的概念。作用通常用于描述某个事物的影响、效果或功能,而意义则更多地关注该事物的价值、意义及意义。因此,区分作用和意义在许多情况下都是至关重要的。 如何区分作用和意义 在区分作用和意义时,有几个因素需要考虑。首先,考虑该事物的作用是什么?它对与它相关的人、https://www.uslshop.com/jiankangzhishi/45947.html
3.Alibaba最新1000多道Java面试题汇总详解,收藏起来慢慢刷!5、Object 类常用方法有那些? 6、java 中是值传递引用传递? 7、形参与实参区别 8、构造方法能不能重写?能不能重载? 9、内部类与静态内部类的区别? 10、Static 关键字有什么作用? 11、final 在 java 中的作用,有哪些用法? 12、String str=”aaa”,与 String str=new String(“aaa”)一样吗? https://maimai.cn/article/detail?fid=1728969401&efid=esjJLvGGL4fAr1LArgq_cQ
4.Java经典面试题带答案(三)系统类库中使用过的有特殊意义的单词或单词的组合都被视为保留字) 7、int 和 Integer 有什么区别? 答:Java 是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据 类型,但是为了能够将这些基本数据类型当成对象操作,Java 为每一个基本数据类型都引 https://blog.csdn.net/weixin_43474701/article/details/119144701
5.经典Java面试题收集(一)7、int和Integer有什么区别? 答:Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper class),int的包装类就是Integer,从Java 5开始引入了自动装箱/拆箱机制,使得二者可以相互转换。 https://www.jianshu.com/p/c01eb6e46226
6.Java高级工程师常见面试题(答案)[通俗易懂]5. Java中的队列都有哪些,有什么区别。 Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List、Set同一级别,都是继承了Collection接口。LinkedList实现了Deque接 口。 Queue的实现 1、没有实现的阻塞接口的LinkedList: 实现了java.util.Queue接口和java.util.AbstractQueue接口 内置的不阻塞队https://cloud.tencent.com/developer/article/2037272
7.碳达峰碳中和科普知识32问碳储量与碳汇量有什么区别? 碳汇量与碳储量都可以用来描述碳汇的性质,但表达的意义不同,碳储量是存量,碳汇量是流量。以森林碳汇为例:森林有5大碳储库,分别是地上和地下生物量、凋落物和枯死木等死有机质、土壤有机碳库;而森林碳汇是指森林通过植物光合作用吸收大气中的CO2,并将其固定在生物体和土壤中的活动、https://weibo.com/ttarticle/p/show?id=2309404774873594724655
8.生物知识点4.无机盐多以离子状态存在于细胞内。无机盐对生物体有什么作用?当生物体缺少了Mg2+、Fe2+、Ca2+会出现什么样的症状? 5.糖类的作用?组成元素有哪些?糖类可分为单糖、二糖和多糖,分类的依据是什么? 6.13页的表格熟记,区分哪些糖是植物所有的,哪些糖是动物具有的 https://m.pincai.com/article/2471978.htm
9.党的最高理想与共同理想3、什么是信念?信念是人们在一定的认识基础上形成的对某种思想或事物坚信不疑并身体力行的心理态度和精神状态,它是认识、情感和意志的有机统一。信念的特点:(1)后天性;(2)稳定性;(3)多样性。 4、理想、信仰、信念的区别与联系 理想往往是指某种奋斗目标。信仰是指信服或敬畏某种主张、现象。信念是指人有了某http://xcb.hust.edu.cn/info/1025/2542.htm
10.高中语文基础知识点2、分析说明文语言的基本要求:首先是其对说明事物特征、性质的作用,其次是说明的严密性、科学性,第三是形象性、生动性 6、说明文的结构 1、说明文的结构有:总分式、并列式、层进式、对照式。一篇完整的说明文常常是几种结构综合运用的。 2、把握结构的意义。 https://www.yjbys.com/xuexi/zongjie/1347346.html
11.一件事或一段话的"意义"和"作用"有什么区别答案解析 查看更多优质解析 解答一 举报 我是这样认为的,一段话的意义 是就这段话而言的 本身的内涵;而它的作用,可以是就一篇文章而言,它对于文章有着怎样的作用,是结构上的作用还是内容上的作用.我是这么认为的 ,不知道能不能帮助你. 解析看不懂?免费查看同类题视频解析查看解答 更多答案(1) https://qb.zuoyebang.com/xfe-question/question/cb84a8e6477fe90624f94307a3b5a0cb.html
12.汕头港引航站什么是品牌? 品牌本意是“烙印”,源于古代北欧 ,初期作标识动物的记号。后来演变成区分不同制造商生产产品的标识。在《牛津大辞典》中,解释为“用来证明所有权,并作为质量的标志,起到区别和证明的作用”。 随着时间的推移,人民赋予它越来越丰富的价值和内涵。如: http://www.stpilot.com/view/207.html
13.基础心理学知识(1)情绪与认知的联系 ① 认知是产生情绪的前提和基础;② 情绪对认知有动力作用。 (2)情绪与认知的区别 ① 认知反映客观事物本身的属性,情绪则反映主体与客体之间的需求关系;②认知活动随意性强,情绪活动随意性弱;③ 情绪比认知活动有更强和鲜明的机体表现。 https://www.wenshubang.com/xuexijihua/420707.html
14.定金和订金有什么法律意义,两者有什么区别定金和订金有什么法律意义,两者有什么区别 在法律领域里,定金作为一种担保,而订金却是生活中的交易习惯。 定金是指为担保合同债权的实现,双方当事人通过书面约定,由一方当事人向对方预先支付一定数额的金钱作为担保的方式。从担保的角度看,定金主要有以下法律特征: 1、定金担保是有惩罚性的。《担保法》第89条规定https://www.66law.cn/laws/506934.aspx