面试2

  • position static 默认位置 静态流
  • relative 相对之前的位置进行定位 移动后再原来位置仍占据空间
  • absolute 相对于父元素的定位 如果没有父元素 相对于Body 在标准流中不占位置
  • fixed 固定定位 在标准流中不占位置
  • px em rem 区别
  • px 像素 绝对单位 px相对于显示器屏幕分辩率而言
  • em是相对长度单位 相对于当前对象内文本的字体尺寸 会继承父级元素的字体大小 不是一个固定的值
  • rem相对于HTML根元素
  • 区别:px无法调整大小 em与rem可以缩放
  • 什么是BFC?
  • 块级格式化上下文,一个独立的渲染区域
  • 内部的BOX会在垂直方向一个接一个的放置
  • BOX垂直方向的距离由margin决定 属于同一个BFC的两个相邻的BOX的margin会发生重叠
  • BFC是一个隔离的独立容器 容器里面的子元素不会影响到外面的元素
  • 计算BFC高度时,浮动元素也参与计算
  • box-sizing:U盘mh;规定盒模型的大小的计算方式 border-box从外边框固定盒子大小 content-box从内容固定盒子大小
  • 选择器优先级
  • !import>行内样式>id选择器>类选择器>标签选择器>通配符>继承
  • Iframe的作用
  • 优点:便于修改,模块分离
  • 缺点:iframe的创建比一般DOM元素慢
  •  iframe标签会阻塞页面的加载
    
  • 对于seo不友好
    
  • CSS3新特性
  • 颜色 新增rgba hsla模式
  • 文字阴影,背景 background-sizing background-origin设置背景图片的远点
  • 盒子模型,边框圆角、阴影,渐变,过度,自定义动画,媒体查询,多栏布局,
  • border-image,2D转换,3D转换
  • CSS引入的方式有哪些?link和@import的区别是?
  • 内联,内嵌,外链,导入。
  • 区别:同时加载。link无兼容性 @import在CSS2.1一下浏览器不支持
  • link支持使用javascript改变样式,后者不可
  • 标签上title为属性提供信息 alt属性不显示时 用文字代表
  • CSS reset 用来重置浏览器的CSS默认属性
  • CSS sprites 雪碧图 用来减轻服务器对图片的请求数量
  • 清除浮动的方式
  • .clearfix{
  • content:'';
    
  • display:block;
    
  • height:0;
    
  • line-height:0;
    
  • visibility:hidden;
    
  • clear:both;
    
  • }
  • .clearfix{
  • zoom : 1
    
  • }
  • 设计一套方案 适应不同的分辨路
  • rem流式布局
  • Bootstrap响应式开发 CSS3媒体查询
  • 超小屏幕 0-768 小屏幕 768-992 中屏幕992-1200 特大1200+
  • 移动端和pc端分开的两个页面:针对性强,代码简洁,加载快,开发效率高,ipad体验较差
  • Bootstrap响应式:兼容各种终端,代码复杂,加载慢,
  • 渐进增强,优雅降级 : 渐进增强是CSS3兼容思想从低版本开始往上版本考虑 。 优雅降级是先从高版本考虑再考虑低版本兼容问题
  • 改变元素外边距用margin 改变元素内填充用padding
  • 在新窗口打开链接的方法是:target:_blank;
  • DOCTYPE 是用来声明文档类型的
  • display:none 与 visibility:hidden的区别是 display:none高度和宽度属性消失不占位置 visibility:hidden 元素消失仍然在页面占据位置
  • AJAX请求步骤没写
  • 怎么实现跨域问题
  • 可以用jsonp jsonp的原理是动态创建script标签 利用script标签没有跨域限制的“漏洞”,通过src来进行跨域
  • iframe 缺点 iframe标签比普通DOM标签要慢 2. iframe会造成页面阻塞 3.iframe不利于seo优化
  • ES6里面新出的fetch 语法糖 method : '' , .then(resopnse)转化成JSON.parse 格式 然后进行数据渲染
  • JS作用域 一个函数声明就会产生一个作用域
  • 闭包就相对于一个封闭起来的空间 外界无法访问到闭包内部的数据 Js垃圾回收机制 当一个函数执行完后 他的作用域会被收回 闭包里面的不会
  • 通过在内部声明新函数 然后return 返回值
  • 原型链 一个构造函数会产生一个原型对象 通过prototype来访问 同时new出来的实例化对象可以通过proto来访问原型对象
  • 一直向上找 直到大写的Object.prototypt 再往上找是 null
  • 实现继承的方法有 原型链继承 还有 经典继承
  • 经典继承
function hzf()
function sss () {
    hzf.call(this);
}
  • 原型链继承
function hzf () {}
var o = {}
hzf.prototype = o;
  • 什么是事件捕获/冒泡?
  • 事件捕获是从上级往下级寻找目标 冒泡是从下往上进行
  • 开启事件冒泡 element.addEventListener(eventName,handler,false);
  • 关闭事件冒泡 e.stopPropagation e.stopPropagation关闭冒泡
  • 开启事件捕获 element addEventListener( eventName, handler , true );
  • 事件委托机制:就是本来交给你做的事 你不做 交给了别人来做就叫事件委托。
  • 事件委托的好处是 : 本来要给每一个li添加事件 但是现在直接给父元素直接添加事件 这样做的好处是 提高性能,
  • 动态添加进来的元素 也可以有之前的事件
  • 字符串操作的方法
  • slice方法返回字符串片段 slice[star,end)
  • substring返回新字符串,参数不接受负值 substring[star,stop) 如果star与stop相等则返回一个空字符串,
  • 如果star比stop大,那么该方法提取字符串之前先交换这两个参数
  • substr返回的是新字符串 [star,length) 传入两个参数
  • 第一个是开始的位置 第二个参数为从截取的长度(以第一个参数处为标准截取长度)
  • 如果只有一个参数则一直截取到最后
  • indexOf 返回字符串最后出现的位置 如果没有匹配的字符串则返回-1
  • concat() 方法用于连接两个或多个字符串。
  • 例如 var arr = '1' , arr1 = '3'
  • arr.concat( arr1 ) 返回的是 '13'
  • split将一个字符串分割 将结果字符串数组返回
  • ==与===的区别 ==只判断内容 不判断类型 ===既判断内容又判断类型
  • Js是面向对象语言么 不是:因为跟传统的语言有区别 是:它里面也有函数 对象 等等
  • 面向对象 抽象性,封装性,继承性
  • 类的概念 对象是类的实例化
  • js引擎只有一个线程 强迫异步事件排队等待执行
  • 计时期是单线程的 需要等待上一个执行完,
  • js中一共有哪几种数据类型 基本型 undefined,null,String,Number,Boolean
  • 复杂类型 Object
  • call apply 的区别 功能都是一样的 参数不一样 第一个参数都是绑定this的那个对象 第二个参数apply为数组
  • call为一个又一个的数字
  • this.
  • 纯粹的函数调用 this指向window
  • 作为对象的方法调用 this指向对象
  • 构造函数的调用 this指向new出来的新对象
  • apply,call this指向传入的对象参数
  • .bind直接this指向传入的对象参数
  • 箭头函数直接this指向对象 内部无法改变this方向
  • 递归求5!
  • function hzf( num ){
  • return num <=1 ? 1 : num * hzf( num - 1 )
    
  • }
  • js异步加载
  • 通过script标签中的 async='async' H5中新增的属性 IE8一下不支持
  • 通过script标签中的 defer = 'defer';
  • AJAX也是异步加载
  • iframe异步加载
  • 例句BOM里至少4个对象 window方法5个
  • window里对象: docuemnt,window,history,location,screen
  • 方法 Alert() prompt() config() open() close()
  • for in 用来循环数组或者对象OBJ
  • 数组
  • join 返回一个字符串 将字符串连接起来
  • reverse 将数组各元素颠倒
  • shift 删除数组中第一个元素 返回删除的值 length - 1
  • pop 删除数组最后一个元素 返回删除的值 length - 1
  • unshift 在数组前面添加一个或多个数组元素 长度改变
  • push 往数组后边添加一个或多个元素 长度改变
  • concat连接数组
  • sort 对数组进行排序
  • splice 插入 删除或者替换数组元素
  • 日期时间
  • var data = new Date();
  • 强制转换 转化成字符串 toString String
  •     转化成Number Number() parseInt parseFloat
    
  •     转化成布尔值 Boolean()
    
  • 隐式 拼接字符串 加减乘除 == ====
  • H5中的新表单元素
  • tel,email,url,number,search,range,color,time,date,
  • HTML5中本地存储概念
  • cookie兼容所有浏览器 sessionStorage localStorage是H5新标签 IE8一下不支持 cookie为doucment.cookie
  • sessionStorage,localStorage为window
  • cookie存储 存储大小4k
  • sessionStorage 存储5M 生命周期为关闭浏览器窗口 同一窗口数据共享
  • localStorage约20M 生命周期 永久有效 除非手动删除 多窗口共享
  • getItem setItem removeItem
  • 只能存储字符串 用JSON.stringify
  • post 与 get区别
  • get效率较高比较快,但是数据会暴露在浏览器url上 不安全
  • post效率没有get 但是比较安全
  • 文件上传只能用post
  • 自定义属性 data H5新属性 通过dataset属性获取
  • 事件执行三个阶段 事件捕获 事件处于目标阶段 事件冒泡
  • 性能优化
  • 减少HTTP请求次数 通过简化页面设计
  • CSS JS 文件压缩 尽量使用精灵图 和字体图标
  • 图片加载可以通过懒加载方式 减少请求次数
  • 代码性能 CSS 减少查询层级 删除重复的CSS
  • HTML 减少DOM节点 加速页面渲染,减少页面重绘
  • JS 避免使用全局变量 避免频繁操作DOM节点 减少对象查找
  • 避免XSS攻击
  • 模块化的理解: 模块化提高性能,让开发者便于维护,逻辑相同的部分复用,
  • 针对HTML CSS JS组织不同的单元进行组织代码
  • AMD requierjs 提前执行 不过require从2.0开始也是延迟执行
  • CMD seajs 延迟执行
  • 平时用什么第三方插件 fullpage.js jq,zepto,swiper,jqueryUI ,animate.css
  • 预加载的理解
  • 在网页全加载完之前 在页面优先显示一些主要内容 可以让js预先从服务器加载图片等资源设置src属性缓存到本地提高访问速度
  • 图片压缩 gulp Sass
  • 响应式布局的时候轮播图用两张不同的图片适配大屏幕和超小屏幕 可以减少超小屏幕流量消耗 加快响应速度
  • 同时保持图片在大屏幕分辨率下失真
  • 浏览器的内核 Trident IE、360、腾讯
  •         Gecko 火狐
    
  •         webkit 之前的谷歌
    
  •         presto 代表 欧鹏
    
  •         现在谷歌和欧鹏同用一个浏览器内核 Blink
    
  • angular的双向绑定原理:触发$digest流程,从rootscope开始遍历 检查所有watcher 进行数据更新
  • angular里面并不存在定时的脏检查 只有ng在指定事件触发时才进行$digest流程
  • 例如ng-click , $http,$location,$timeout,$interval 然后才执行$digest
  • angular与 Vue 的区别:angular用的是脏检查 Vue用的是双重绑定 getter,setter;
  • img为行业替换元素 所以能设置宽高
  • input框谁知disabled之后如何获得value值 : 可以将 disabled='disabled'改换成 readonly='readonly'
  • Less特点:变量,混合,嵌套规则,函数,运算,作用域
  • less原理:为CSS预解析,为CSS样式生成工具
  • gulp作用:Sass,less编译,CSS JS 图片压缩 代码压缩,自动刷新,雪碧图制作,ESLint代码规范检查
  • 200请求成功,302请求的资源临时从不同URL响应请求,400错误请求
  • 500服务器端错误,502网关或者代理无效,网络错误
  • 了解Vue2.0与Vue1.0的区别
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容