我是靠谱客的博主 懵懂小霸王,最近开发中收集的这篇文章主要介绍面试试题1,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

对前端工程师的理解

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

  1. 实现界面交互

  2. 提升用户体验

  3. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

  4. 参与项目,快速高质量完成实现效果图,精确到1px;

  5. 与团队成员,UI设计,产品经理的沟通;

  6. 做好的页面结构,页面重构和用户体验;

  7. 处理hack,兼容、写出优美的代码格式;

  8. 针对服务器的优化、拥抱最新前端技术。

面试官好,我叫xxx,来自xxxxxxx,来应聘贵公司前端工程师的岗位,在大学中主修了HTML,JavaScript,Vue,AxureRP和node等相关的前端课程,在学校开发过基于vue.js实现的xxx和xxx等项目,希望能够通过这次面试向各位学到各种东西。

Doctype作用:

文档最顶部的声明,Doctype不存在或格式错误会导致页面以怪异模式展示

怪异模式是向后兼容,模拟老浏览器模式行为,防止页面无法正常工作

行内元素:

a/img/span/b/strong/input/select/selection

块级元素:

div/p/table/ul/ol/h1-h6

空元素:

br/hr/img/input/link/meta

浏览器内核:

渲染引擎,负责获取页面内容和排版渲染页面

js引擎,解析和执行js来实现页面的动态效果,和交互内容

常见的浏览器内核:

  • Trident内核:ie,the world,360,搜狗浏览器;
  • Geocko内核:Netscape6及以上,FF,MozillaSuite/SeaMonkey等
  • Presto内核:Opera7及以上
  • Webkit内核:Safari,Chrome

浏览器是怎么对HTML5的离线储存资源进行管理和加载的

在线情况下,浏览器发现html标签的头部有manifest属性,它会请求manifest文件

​ 如果第一次访问app,浏览器根据manifest文件的内容下载相应的资源并进行离线存储

​ 如果访问过app且资源已经离线存储,浏览器会对比心的manifest文件和旧的manifest文件,

​ 如果文件没有发生改变,不做任何操作;

​ 如果文件改变,重新下载文件中的资源并进行离线存储

离线情况下,看看去直接使用离线存储的资源

cookie和session的区别

cookie是服务器发送到用户浏览器保存到本地的一块数据,会在浏览器下次向服务器发送请求被携带发送到服务器上

当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当客户端关闭会话,或者 Session 超时失效时会话结束。

cookie保存在客户端,session保存在服务端

cookie只能保存ASCII,session可以保存任意数据类型

cookie可以长时间保存,session失效时间短

cookie安全性较弱,session存储在服务端,安全性好一些

cookie大小不能超过4k,session远高于cookie

用户第一次请求服务器=》服务器根据提交的相关信息,创建相应的session=》把session的唯一标识信息sessionID返回给浏览器=》浏览器将此信息存入cookie=》cookie记录sessionID属于哪个域名

用户第二次访问服务器=》请求判断域名下是否有cookie信息=》

​ 若存在就发送给服务端=》服务端从cookie中获取sessionID=》服务端根据sessionID查找相应的session信息

​ == 》没有找到就说明没有登录或失败 == 》找到session证明可以执行后面操作

token机制

  1. 客户端使用用户名和密码请求登录。
  2. 服务端收到请求,验证用户名和密码。
  3. 验证成功后,服务端会生成一个token,然后把这个token发送给客户端。
  4. 客户端收到token后把它存储起来,可以放在cookie或者Local Storage(本地存储)里。
  5. 客户端每次向服务端发送请求的时候都需要带上服务端发给的token。
  6. 服务端收到请求,然后去验证客户端请求里面带着token,如果验证成功,就向客户端返回请求的数据。

描述cookie/sessionStorage和localStorage的区别

cookie是网站为了表示用户身份而存储在用户本地终端上的数据,cookie的数据始终在同源的http请求中携带,会在浏览器和服务器中来回传递,大小不能超过4k,可以防止xss和csrf攻击浏览器,xss用浏览器的cookies截取用户数据,csrf模拟用户在页面上的操作,完成数据请求,异步策略牵扯到jsonp

sessionStorage和localStorage数据都是在本地存储,不会把数据发给服务器,

sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面,localStorage是关闭浏览器数据还在不丢失,sessionStorage离开浏览器数据自动删除,

HTML5新增
  • 绘图:加入了canvas绘图
  • 媒体:加入了video和audio标签
  • 语义化标签:header,nav,footer,section,article
  • 本地离线存储:localStorage和sessionStorage
  • 表单控件:canlendar,date,time,email,url,search
  • 新的技术:webwoker,websocket,gelolcation

怎么区分HTML和HTML5,

通过Doctype声明/新增的结构元素/功能

HTML5新增新的语义标签,视频音频API,画布API,地理API,localStorage,sessionStorage,表单控件,

HTML语义化

用正确的标签做正确的事情,从标签上直观的知道标签的作用而不是滥用div,代码结构清晰易于阅读维护

页面导入样式,link和@import区别

link属于XHTML标签,除了加载CSS之外还能用于定义RSS,@import是CSS提供,只能用于加载CSS,link加载的文件,在页面加载的时候,link文件会同时加载,而u@import引入的CSS文件,是页面在加载完成后再加载的,

@import在IE5以下的浏览器是无法识别,link无兼容性问题

Iframe优缺点:

可以加载缓慢的第三方内容,并行加载脚本

  1. iframe会阻碍页面的onload事件,
  2. 浏览器的搜索引擎无法就iframe界面,不利于SEO的搜索,
  3. Iframe和主页面共享连接池,会影响页面的并行加载,
  4. 没有语意

使用js动态添加iframe src属性,可避免1和3的问题

Label的作用

label标签定义表单控制间的关系,当用户点击label里面的文字时浏览器会自动吧光标转载表单控件上

HTML的form如何关闭自动完成功能

给不想要提示的form或某个input设置autocomplete = off

如何实现浏览器内多个标签之间的通信

websocket可以将不同线程共享为一个线程,他们的数据也是共享的

localStorage也可以实现浏览器多个标签页之间的通信,在另一个浏览器被添加删除修改时会触发一个事件,我们可以通过对localStorage监听事件控制他的值来进行信息交流

页面可见性用途:

可以通过visibilityState检测当前页是否可见,打开网页的时间,可以控制页面在被切换后,停止视频和音频的播放

区别:

title和h1的区别:

title属性没有明确的标题,只有HTML语义化的一个标签,而h1则是层次明确的标题,h1标签里的文字,字体较大, 加粗;

b和strong的区别:

b和strong都有加粗字体的作用,strong只是语义化加重语气的意思,

i和em的区别:

em是强化文本的内容,而所有浏览器的重要内容都是以斜体信息显示,i则表示标签内文本为斜体

的title和alt区别

title是鼠标滑到图片显示图片描述

alt是img特有属性,是图片内容的等价描述,用于图片无法加载时显示读屏器阅读图片,可以提高图片可访问性,搜索引擎可以重点分析

WEB标准和W3C标准

标签闭合,标签小写,不乱嵌套,使用外链css和js,结构行为表现的分离

xhtml和html区别

功能:xhtml兼各大浏览器手机和PDA,浏览器可快速正确编译网页

书写习惯:xhtml元素必须被正确嵌套,闭合,区分大小写,文档必须有根元素

Canvas和Svg的区别

svg有了十多年的历史,canvas是h5提出的心的绘图方法;

svg在html绘制,而canvas需要在js中绘制

svg可以回去到标签进行操作,canvas无法对已经绘制的图像进行修改

svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改,canvas输出的是一副画布

svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿,canvas输出标量画布,像一张图片一样,放大会失真或锯齿

Canvas跨域问题:

无法使用画布toBlod(),toDataURL(),getImageData()等方法

解决方法:

  • img标签上新增了crossorgin属性,该属性决定了图片获取过程中是否开启CROS功能,image.setAttribute(‘crossorgin’,‘anonymous’)
  • 将文件读入到blob对象,然后使用URL.createObjectURL转换成src可用地址

CSS

盒模型

IE盒模型:宽度=内容宽度+padding+border

W3C盒模型:宽度=内容宽度,padding,border,margin都是单独分开的

浮动引起的问题

  • 父元素的高度无法被撑开,影响父级同级元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 不是第一个元素浮动,前面的元素也需要浮动, 会影响页面显示结构

清除浮动的方式

  • 在子元素并级后面添加一个新元素,添加clear: both属性

    优点:通俗易懂

    缺点:添加无意义空标签,不方便后期维护

  • 给父元素添加overflow: hidden

    优点:代码少,简单方便

    缺点:不能配合定位使用

  • 使用伪类选择器清除浮动 : after方法,作用于浮动元素的父级元素

    优点:结构和语义化完全正确

    缺点:复用方式不当,代码量增加

CSS选择器有哪些

ID选择器 #ID

Class选择器 .class名

标签选择器 标签

通配符 *

相邻选择器 div+p

子选择器 div>p

后代选择器 div p

多个选择器 div,p,a,ul

伪类选择器 a: hover

伪类选择器和伪元素的区别

伪类用于向某些选择器添加特殊效果,单冒号

伪元素用于将某个特殊东西添加到某些元素前后,双冒号

伪类:

伪类作用
: active将样式添加到被激活的元素
: focus将样式添加到被选中的元素
: hover当鼠标悬浮在元素上方时,向元素添加样式
: link将特殊的样式添加到未被访问过的链接
: visited将特殊的样式添加到被访问过的链接
: first-child将特殊的样式添加到元素的第一个子元素
: lang允许创作者来定义指定的元素中使用的语言

伪元素:

伪元素作用
: first-letter将特殊的样式添加到文本的首字母
: first-line将特殊的样式添加到文本的首行
: before在某元素之前插入某些内容
:after在莫元素之后插入某些内容
:: after和: after 的区别和:: before和: before的区别

before 在元素之前添加效果

after 在元素之后添加效果

:: after 和:: before 是css3为了区分伪类和伪元素的做出的差别,习惯性的还是写: after和: before

可继承样式:

font-size/font-family/color [ul/li/ol/dl/dd/dt]

不可继承样式:

width/height/margin/padding/border

CSS 样式优先级计算法:

三条标准:

就近原则

内嵌样式>内联样式>外联样式

!import 大于一切样式

权重计算规则权值
内联样式1000
ID选择器100
类,伪类,属性选择器10
类型选择器和伪元素 div/p1
继承的样式没有权值0

CSS3 新特性和伪类

  • 新特性:

    border-radius 圆角

    box-shadow 阴影

    text-shadow 文字阴影

    line-gradient 线性渐变

    transform 各种样式

    背景颜色增加了rgba

    border-images,媒体查询,多栏布局

  • 新增伪类:

    p: first-of-type 选择属于父元素中的同类型的第一个p元素

    p: last-of-type 选择属于父元素中的同类型的最后一个p元素

    :: after/:: before在元素之前或之后添加内容

    :: disabled 控制表单控件禁用

    :: checked 单选或多选框被选中

less的优势

结构清晰,便于扩展,方便屏蔽浏览器私有语法差异,可轻松实现多重继承, 完全兼容

缺点:必须要编译,无论在客户端还是服务端,都要一种额外的花销

使用display: inline-block会产生什么问题?

两个display: inline-block元素放到一起会产生一段空白

产生空白的原因,元素被当成行内元素排版的时候元素之间的空白符会被处理

解决方法:

  • 父元素中设置font-size: 0子元素上写正确的font-size
  • 给子元素设置float: left
  • 将子元素标签的结束符和下一个标签的开始符写在同一行

如何居中div

  • 水平居中

    • margin(0 auto)

    • 绝对定位和margin-left: -width/2, 前提是父元素position: relative

    • display: inline-block;

    • text-align: center;

    • flex布局使用justify-content: center

  • 垂直居中

    • position: absolute;

    ​ top: 50%;

    ​ left: 50%;

    • transform: translate(-50%,-50%)

    • 弹性布局flex:父级设置

      display: flex;

      子级设置margin为auto实现自适应

    • table布局,父级转换为表格形式

      display: table-cell;

    ​ vertical-align: middle(内联元素)

display价值

block 元素转化为块级元素

inline 元素转化为行内元素

inline_block 元素转化为行内块元素

none 此元素不会显示,脱里文档流

list-item 元素转化为行内样式并添加列表样式

table 元素会以块级表格显示

inherit 继承父元素display属性

position的值

relative 相对定位

absolute 绝对定位

fixed 窗口定位

static 默认值

inherit 继承父元素的position属性

flex布局常用属性

flex-directionrow,row-reverse,column,column-reverse主轴的方向,从左往右,从右往左,从上往下,从下往上
flex-wrapwrap,nowrap,wrap-reverse第一行在上面,不换行,第一行在下面
flex-flow|,默认值为row和nowrapflex-direction和flex-wrap的简写
justify-contentflex-start,flex-end,center,space-between,space-around项目在主轴上的对齐方式:左对齐,右对齐,居中,两端对齐且项目中间间隔相等,项目两侧的间隔相等即项目直接的间隔比项目与边框的间隔大一倍
align-itemsflex-start,flex-end,center,baseline,stretch交叉轴的起点对齐,交叉轴的终点对齐,交叉轴的中点对齐,项目的第一行文字基线对齐,默认值,若未设置高度或设为auto则沾满整个容器高度
align-contentflex-start,flex-end,center,space-between,space-around,stretch多根轴线的对齐方式(一根轴线没用),交叉轴七点对齐,交叉轴终点对齐,交叉轴中点对齐,交叉轴两端对齐且轴线之前间隔平均分布,每根轴线两侧间隔相等,默认轴线沾满整个交叉轴
order0定义项目的排列顺序,数值越小排列越靠前默认为0
flex-grow0项目的放大比例,默认为0
flex-shrink0项目的缩小比例,默认为0
flex-basisauto,数值在分配多余空间之前,项目占据的主轴空间
flex0 1 auto,auto(1 1 auto),none(0 0 auto)flex-grow,flex-shrink,flex-basis的简写
align-selfauto , flex-start ,flex-end ,center , baseline ,stretch;允许单个项目和其他项目不一样的对齐方式,可覆盖align-items属性,默认auto继承align-items属性,没有父元素则同于stretch

CSS3的flexbox及其适用场景

用于页面布局的新CSS功能,规定框内的子元素是否可以伸缩尺寸

设为 flex 属性之后,子元素的哪些属性会失效

float、clear 和 vertical-align

CSS打造三角形

	#item{
width:0;
height:0;
border-left:50px soild transparent;
border-right:50px soild transparent;
border-top:50px soild transparent;
border-bottom:50px soild blue;
background:white;
}

li元素和li元素之间看不见的空白间隙怎么解决

方法一:为

  • 设置float: left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。
  • 方法二:将所有

  • 写在同一行。不足:代码不美观。
  • 方法三:将

    • 内的字符尺寸直接设为0,即font-size: 0。不足:
      • 中的其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且在Safari浏览器依然会出现空白间隔。

    方法四:消除

    • 的字符间隔letter-spacing: -8px,而这也设置了
    • 内的字符间隔,因此需要将
    • 内的字符间隔设为默认letter-spacing: normal。

    为什么初始化css样式

    浏览器的兼容性问题

    *{padding:0;margin:0}

    CSS 中的 visibility 属性的 collapse

    一般情况和visibility: hidden一样,不脱离文档流

    在table的tr元素中,脱离文档流

    在table的td元素中,脱离文档流

    外边距合并以margin高度最大的值为准

    响应式页面:

    配合各种用户设备的窗口宽度,主要是得到媒体查询,一个是bootstrap一个是rem单位,rem单位根据页面字体大小等比缩放,可以用vm/vh+rem,vm/vh是将窗口大小平分为100份

    CSS媒体查询原理:

    窗口的onresize事件,得到窗口大小匹配的样式修改

    CSS优化/提高性能的方法

    使用预处理器less和sass增加代码可复用性,方便项目的协作开发可维护性

    浏览器怎么解析CSS选择器

    优先从关键选择器开吃匹配,通过权重寻找祖父元素,再一级一级查下去,若匹配则使用样式,若不匹配则放弃

    Margin和padding区别

    Margin是元素与元素之间的距离,padding是分元素和内容直接的距离

    css如何实现横向和竖向滚动

    横向:父元素:overflow-x:auto;overflow-y:hidden

    纵向:父元素:overflow-y:auto;overflow-x:hidden

    滚动条样式

    • 滚动条轨道

    :: -webkit-scrollbar-track{

    ​ border-radius:4px;

    ​ background-color: rgba(0,0,0,0.3)

    }

    • 滑块

    ::-webkit-scrollbar-thumb {

    border-radius: 5px;

    background-color: rgba(255, 255, 255, 0.7);

    }

    视觉差效果

    给图片添加background-attachment: fixed属性,将背景固定在窗口,使用background-position: top center或0% 0%

    后续通过js修改background-position的top值,实现背景图跟随页面上下移动效果

    line-height

    行高,增加文本行与行之间的上下间距,也可实现文本在div中的垂直居中

    元素浮动后display的值

    元素的display值自动变为display: block

    chrome最小支持12px的文字

    使用图片可支持更小文字,如果字太小,用户会产生视觉疲劳感,

    如何设置字体斜体

    i标签,em标签,font-style: oblique

    手写动画最小时间间隔

    显示器默认60hz

    一个高度自适应的div里面有两个div,一个高度100px,一个如何自适应高度

    父元素

    ​ box-sizing: border-box;

    ​ padding-top:100px;

    ​ position: relative;

    第一个div

    ​ position: absolute

    第二个div

    ​ height:100%

    如何隐藏内容

    • visibility: hidden

    元素仍在文档流中,但占用空间

    • display: none

    元素脱离文档流,不占用空间

    • position: left:-999999px

    将内容至于屏幕之外

    • text-index: -9999

    适用于block元素中的文本

    • opacity: 0

    空间仍然保留

    消除transition闪屏

    .css{

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective:1000;

    }

    CSS3新特性

    SS3实现圆角(border-radius),阴影(box-shadow),

    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

    transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

    增加了更多的CSS选择器 多背景 rgba

    在CSS3中唯一引入的伪类是 ::selection.

    媒体查询,多栏布局

    border-image

    启动硬件加速

    .css{

    ​ -webkit-transform:translate3d(0,0,0);

    ​ -moz-transform:translate3d(0,0,0);

    ​ -ms-transform:translate3d(0,0,0);

    ​ transform:translate3d(0,0,0);

    }

    启动硬件加速最常用的方式:translate3d,translateZ,transform

    opacity属性/过渡动画,

    浏览器渲染机制,重绘和重排

    网页生成过程:

    HTML被HTML解析器解析成DOM树

    css被css解析器解析成CSSOM树

    DOM树和CSSOM树生成渲染树

    生成布局,将所有渲染树的所有节点进行平面合成,将布局绘制在屏幕上

    重排,即回流,当DOM的变化影响了元素的位置尺寸大小,浏览器重新计算元素的几何属性,将其安放在界面的正确位置,

    ​ 触发:添加删除可见的DOM元素,元素尺寸改变——边距填充边框宽度和高度

    重绘:元素的外观发生改变但没有改变布局重新吧元素外观绘制出的过程叫做重绘,

    ​ 触发:改变元素的color,background和box-shadow等属性

    重排建议:分离读写操作,样式集中修改,缓存需要修改的DOM元素,尽量只修改position的absolute或fixed元素对其他元素影响不大,动画开始GPU加速,translate使用3D变化

    transform不重绘不回流,transform属于合成属性,对合成属性进行transition/animate动画时,将会创建一个合成层,使得动画元素在独立的一个层中进行渲染,元素内容没有发生改变,没有必要进行重绘,浏览器通过重新复合来创建动画帧

    优化

    浏览器自己的优化:浏览器会维护一个队列,把所有引起回流重绘的操作放入蒸锅队列,队列的操作到了一定的数量或是一定的时间间隔,浏览器会flush队列,进行批处理,让多次回流重绘变成一次回流重绘

    合并多次的DOM和样式的修改,减少对style的请求

    • 直接改变元素的className
    • 先设置display: none,然后进行页面布局等操作,然后将元素设置成display: block,只引发两次重绘和重排
    • 使用cloneNode(true or false)和replaceChild技术,引发一次回流重绘
    • 将需要多次重排的元素的position属性设置为absolute或fixed,脱里文档流,变化不会影响其他元素
    • 需要创建多个DOM节点, 使用DocumentFragment创建完成一次性的加入document

    验证码

    前端点击发送验证码,提交到后台,后台拿到前端发来的手机,调用购买的短信接口就可发送验证码到手机上,前端只需引入js文件,按照文档写上即可

    Class语法

    //构造函数
    function(){
    this.name = 'name'
    this.age = 18
    this.say = function(){
    console.log('person 的say')
    }
    }
    let p1= new Person()
    console.log(p1.name)
    //ES6的写法
    p1.say()
    class Person{
    constructor(){
    this.name = 'name'
    this.age = 18
    }
    say(){
    console.log('person 的say')
    }
    }
    class Teacher extends Person{
    /*
    //复杂写法
    constructor(){
    super()//
    this.name = 'bbb'
    this.score = 2000
    }
    */
    //简单的写法,this,constructor和super都可省略
    name = 'bbb'
    score = 10000
    hello(){
    console.log('hello')
    }
    abc(){
    console.log('abc')
    }
    }
    let t1= new teacher()
    console.log(t1.name)
    

    装饰器函数

    可以给类或者属性方法加上一些其他的东西,实现代码的复用

    	function testable(target){
    target.isok = true
    console.log('aaa')
    }
    @testable
    class MyTestableClass{
    }
    

    BFC

    BFC,块级格式化上下文

    主要形成一块独立的渲染区域,内部元素的渲染不会影响外界

    形成BFC常见的条件

    ​ 浮动元素 float不是none

    ​ 绝对定位元素 position 是absolute或fixed

    ​ 块级元素 overflow不是visible

    ​ flex元素

    ​ 表格单元格

    ​ 网格元素

    ​ inline-block元素

    应用场景 清除浮动等

    BFC渲染规则

    BFC垂直方向边距重叠

    BFC的区域不会和浮动元素的box重叠

    BFC是一个独立的容器,外面的元素不会影响里面的元素

    计算BFC高度,浮动元素也会算进去

    HTML和XHTML区别

    XHTML元素必须正确地嵌套,必须被关闭,标签名必须要小写字母,XHTML文档必须拥有根元素

    document.write和innerHTML区别

    document.write只能重绘整个页面,innerHTML重绘页面一部分

    304缓存原理

    服务器首先产生Etag,在稍后使用他来判断页面是否已经被修改,通过该记号传回服务器要求服务器验证其缓存
    304是HTTP状态码,服务器用来标识这个文件没修改,不返回内容,浏览器再接受这个状态码之后,使用浏览器已缓存的文件
    客户端请求一个页面,服务器返回页面,并在给页面加上一个Etag,客户端展现该页面,并将该页面和Etag一起缓存,客户再次请求这个页面,并将上次请求时服务器返回的Etag传递给服务器,服务器检查Etag判断该页面从上次客户端请求后还未删改直接返回304,和一个空响应体

    MongoDB和MySQL的区别

    MySQL是传统关系型数据库,MongoDB是非关系型数据库,MongoDB以BSON结构进行存储,对海量数据存储有优势,对比传统数据库,NoSQL有明显性能和扩展性优势,弱一致性,保证用户访问速度,文档结构的存储方式,能够更便捷的获取数据

    网络分层2七层模型

    应用层——应用层,表示层,会话层,(HTTP,FTP,SMTP,DNS)

    传输层

    (TCP和UDP)

    网络层

    (IP)

    物理和数据链路层

    (以太网)

    **物理层:**通过媒介传输比特, 确定机械及电气规范——比特

    **数据链路层:**将比特组装成帧和点到点的传递——帧

    **网络层:**负责数据包从源到宿的传递和网络互连——包

    **传输层:**提供端到端的可靠报文传递和错误的恢复——段

    **会话层:**建立管理和终止会话——会话协议数据单元

    **表示层:**对数据进行翻译加密和压缩——表示协议数据单元

    **应用层:**允许访问OSI环境的手段——应用协议数据单元

    1.如何解决浏览器默认样式不一致的问题?

    重置浏览器默认样式,通过设置reset.css来实现

    如何减少页面请求时间

    解决方法分为前端和后端。

    前端优化主要是包括减少http请求,使用CDN托管,添加expire过期头,压缩组件,样式表放顶部,脚本文件放底部,减少dns查找,使ajax可以进行缓存,等等,还可以使用big pipe技术来加载页面。

    后端其实主要耗时是在IO操作方面。主要是页面的缓存技术,数据库的优化,服务器的部署方面了。总的来说,前端开发可以优化网站加载时间大概占70%~80%。

    快速的 DNS 服务器、gzip 压缩静态内容、合并文件以减少请求数、减少不必要的 cookie、缓存静态文件、使用 CDN、压缩 CSS 和 JavaScript 等。

    webStorage和cookie的区别

    Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

    全局属性

    class,id,lang,style,title

    html常见的兼容性问题

    • 浏览器的默认的margin和padding不同,

      • 加个全局的*{margin: 0;padding: 0}来统一
    • ie6下,双边距bug,设置了float又设置了margin-left和margin-right,margin值会加倍

      • 加入_display: inline将其转化为行内属性, _ 符号只有ie6会识别
    • 渐进识别

    • ie下使用获取常规属性的方法来获取自定义属性,也可使用getAttribute();火狐浏览器下只能用getAttribute()

    • ie下event对象有x,y属性

    • Chrome中文界面下默认小于12px的文字强制按照12px显示

    • 超链接访问过后hover样式不出现,被点击访问过的超链接样式不具有hover和active

      • 解决方法:改变css属性排列顺序,link,visited,hover,active
    • 怪异模式问题,漏写DTD,ie会触发,火狐不会

    • 上下margin重合问题,ie火狐都有问题,

      • 同时采用margin-top或同时采用margin-bottom

    CSS动画

    • animation
      • 用于设置动画属性,包含六个属性
    • transition
      • 用于设置元素样式过渡,
    • transform
      • 用于元素旋转缩放移动等,
    • translate
      • 是transform的属性值,移动,,还有scale等

    线程和进程的区别

    一个程序至少有一个进程,

    一个进程至少有一个线程,

    多线程并发性高,进程在执行过程中有独立的内存单元,多个线程共享内存,

    每个独立线程有一个程序运行入口、顺序执行序列和程序出口,线程不能独立运行,必须存在应用程序中,由应用程序提供多个线程执行控制

    多线程意义在于一个应用程序中,有多个执行部分同时执行,但操作系统不会将多个线程看成多个独立应用来实现进度的调度和管理以及资源分配

    什么是FOUC,如何避免FOUC

    FOUC,即文档样式闪烁,

    引用@import的原因,会先假装整个HTML文档的DOM,再导入外部的CSS,跟网速和电脑速度有关,在标签中加入或

    状态码

    100-199,客户端应相应的某些动作

    200-299,请求成功

    300-399,已经移动的文件被包含在定位头信息中指定新的地址信息

    400,客户端的错误

    401,请求需要用户验证

    403,服务器理解请求但是拒绝执行

    500-599,服务器错误

    503,服务不可用

最后

以上就是懵懂小霸王为你收集整理的面试试题1的全部内容,希望文章能够帮你解决面试试题1所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部