笔记

倚栏听风
198 阅读33分钟

HTML

html5为什么只需要写

  • 这是w3c制定的规则,是文档类型声明,语义化说是告诉浏览器和其他开发者,这个文档使用的是html5标准。

< img > 的 title 和 alt 有什么区别？

  • alt 是图片加载失败时，显示在网页上的替代文字；

  • title 是鼠标放上面时显示的文字。

  • 这些都是表面上的区别，alt是img必要的属性，而title不是。

XHTML和HTML有什么区别

答:XHTML:

1)所有的标记都必须有一个相应的结束标记;

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

3)所有的XHTML标记都必须合理嵌套;

4)所有的属性都必须用引号""括起来;

5)XHTML文档必须拥有根元素。

如何在 html 页面上展示 < div> < /div> 这几个字符

  • 使用忽略HTML标记< xmp>

    如：

    <div></div>

什么是渐进式渲染

  • 指打开页面先加载首屏显示内容;,之后再随着时间或者滚动页面进行后面的加载。

浏览器的内核有哪些

  • Trident(IE内核):IE、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等;

  • Gecko(firefox):火狐浏览器

  • webkit(Safari):Apple

  • Blink:谷歌浏览器

实体字符

img

CSS

块级元素

  • 特点:块级独占一行;可以设置宽高;如果没设置宽度,那么其宽度等于父元素的宽度。

  • 比如:div,p,ul,ol,dl,li,dd,h1-h6

行内元素

  • 特点:都在一行显示,不能设置宽度和高度。

  • 比如:a b em font i img input br label span small select textarea

行内块元素

  • 特点:都在一行上显示,可以设置宽度和高度。

选择器优先级

  • !important>行内样式>id选择器(#)>类选择器(class)>标签选择器>通配符选择器>继承性选择器>浏览器默认属性

display：经常用的

  • display：none；此元素不会被显示

  • display：block；此元素转换成块级元素，可以独占一行

  • display：inine；此元素转成行内元素，在一行显示

  • display：inline-block;此元素转为不独占一行的块级元素，可以设置宽高

详细的描述一下position

  • position:absolute--绝对定位的元素,相对于其父元素进行定位。

  • position:relative--生成相对定位的元素,相对于其正常位置进行定位。

  • position:fixed--固定定位,相对于浏览器窗口进行定位。

  • position:static--默认值,没有定位,元素在正常的文档流

link和@import有什么区别

  • @import引用的css会等到页面被加载完毕后再加载，link在页面加载时会同时被加载。

  • link是html标签，无兼容问题。link方式的样式权重高于@import

meta viewport标签相关

 <!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′>    声明文档使用的字符编码,防乱码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/>       页面描述 <meta name=”keywords” content=””/>      页面关键词 <meta name=”author” content=”name, email@gmail.com”/>    网页作者 <meta name=”robots” content=”index,follow”/>      搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码 <meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″>   微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”>   uc强制竖屏 <meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏 <meta name=”full-screen” content=”yes”>              UC强制全屏 <meta name=”x5-fullscreen” content=”true”>       QQ强制全屏 <meta name=”browsermode” content=”application”>   UC应用模式 <meta name=”x5-page-mode” content=”app”>    QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

三列布局

  • 绝对定位 + 中间版块不给宽度

  • 两侧浮动 + 中间自动撑开（使用 calc 动态计算宽度，设置对应宽度的 margin）

  • flex，左右设置 flex-basis，中间设置 flex-grow

H5C3

一. H5新增了以下的几大类元素:

  • 内容元素: header , nav , footer , section

  • 表单控件: calender , date , time , email , url , search

  • 本地存储: localStorage 长期存储数据,浏览器关闭后数据不会丢失, SessionStorage 数据在浏览器关闭之后自动删除

  • 媒介播放: video , audio

  • 绘画使用: canvas

二. 语义化的理解:

  • HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;

  • 在没有css样式的情况下也能以一种文档显示,并且是容易阅读的

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

  • 便于团队开发和维护,语义化更具可读性,便于阅读,维护和理解

三. XHTML和HTML有什么区别?

  • XHTML文档必须拥有根元素

  • XHTML元素必须被正确的嵌套

  • XHTML元素必须被关闭

  • 标签名必须用小写字母

四. C3新特性有哪些?

  • 动画: animation

  • 2D,3D转换: transform

  • 过度: transition

  • 边框圆角:border-radius, 阴影:box-shadow

  • 盒子模型: box-sizing

  • 文字阴影: text-shadow

  • 背景尺寸: background-size, background-origin背景图片原点

  • 渐变: linear-gradient

  • 伸缩布局: flex

  • 颜色: rgba()

  • 媒体查询、多栏布局、伸缩布局

五. 清除浮动有几种方式?

  • 父级元素设置height

  • 结尾处加空div标签clear:both

  • 父级元素设置overflow: hidden / auto

  • 使用伪类:after 必须设置content: ''

六. 媒体查询的原理是什么?

  • H5的新特性,使用@media查询,你可以针对不同的媒体类型定义不同的样式

七. 流式布局

  • 按照页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变,使用%百分比定义宽度,高度大都 是用px来固定,可根据可视区域和父元素的实时尺寸来调整,尽可能适应各种分辨率

八. 响应式布局

  • 主要实现不同屏幕分辨率的终端上浏览网页的不同展示方式,通过响应式设计能使网站在手机和平板上有更好的浏览阅读体验

九. 性能优化

  • 网络通信方法:(降低请求次数,降低传输量)

    • 文件合并

    • 精灵图

    • 代码压缩

    • 图片的压缩

    • 启用CDN托管服务

    • 启用gzip压缩(网络传输的压缩),二进制压缩,大概可以压缩为原来的1/3

  • 代码层: (节省内存)

    • 尽量不使用闭包

    • 杜绝无效的循环

    • 递归过程优化(添加缓存)

    • 业务相关的业务逻辑优化

十. 如何居中一个元素

  • 水平居中

    • 行内元素水平居中

      • 父容器使用text-align: center设置

    • 块级元素水平居中

      • 将左右外边距设置为auto: margin: 0 auto

      • 将父元素设置为相对定位,子元素绝对定位,向右移动子元素,距离为父容器的一半,然后在向左移动自身的一半

        .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } 复制代码

      • 父元素设置为flex布局,使用justify-content: center

      • 父元素设置为flex布局,子元素使用margin: 0 auto

    • 浮动元素水平居中

      • 利用flex布局,使用justify-content: center实现水平居中

    • 绝对定位元素水平居中

      • 通过子元素绝对定位,外加margin: 0 auto实现

        .parent { position: relative; } .child { position: absolute; margin: 0 auto; /*水平居中*/ left: 0; /*不能省略,且为0*/ right: 0; /*不能省略,且为0*/ } 复制代码

  • 垂直居中

    • 单行行内元素垂直居中 使用行高=高line-height

    • 多行行内元素垂直居中

      • 使用flex布局,调整主轴方向为纵向flex-direction: column,在使用justify-content: center

    • 块级元素垂直居中

      • 使用绝对定位距离顶部50%,并设置margin-top向上偏移元素高度的一半(已知高度)

        固定高度的块级元素垂直居中
        .parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50%; } 复制代码

      • 使用绝对定位+transform(未知高度)

        未知高度的块级元素垂直居中
        .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } 复制代码

      • 使用flex布局中align-items: center属性,使子元素垂直居中

  • 水平垂直居中

    • 绝对定位与负边距实现(已知宽高,兼容所有浏览器)

       <div class= "parent">         <div class= "child" style="width: 100px; height= 100px;"></div>     </div>     <style>         .parent {             position: relative;         }         .child {             position: absolute;             top: 50%;             left: 50%;             margin: -50px 0 0 -50px;         }     </style> 复制代码

    • 绝对定位+margin: auto(不需要知道宽高,不兼容低版本IE)

       <div class= "parent">         <div class= "child" style="width: 100px; height= 100px;"></div>     </div>     <style>         .parent {             position: relative;             height: 200px;   /*父容器必须有高度*/         }         .child {             position: absolute;             top: 0;             left: 0;             right: 0;             bottom: 0;             margin: auto;         }     </style> 复制代码

    • 绝对定位+translate

       .parent {     position: relative;     height: 200px;   /*父容器必须有高度*/ } .child {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); } 复制代码

    • flex布局 主轴对齐,侧轴对齐(不兼容低版本IE)

       .parent {     height: 100px;     display: flex;     justify-content: center;     align-items: center; } 复制代码

    • 父元素flex布局,子元素直接

       margin: auto

      即可(最简单的,也不兼容低版本IE)

       .parent {     height: 100px;     display: flex; } .child {     margin: auto; } 复制代码

十一 . meta标签有哪些特性? viewport的原理是什么

  • meta标签可以用来做SEO优化,指定移动端viewport的展现形式,设置http请求,告诉浏览器缓存静态资源的模式等等

    • meta标签的作用取决于定义的属性和属性值

      • charset: 定义文档的字符编码

      • name: 把content属性连接到某个名称

      • content: 定义与http-equiv或name属性相关的信息

      • http-equiv: 把content属性关联到http头部

  • viewport原理:

    • 手机浏览器把页面放在一个虚拟的窗口中,通常这个虚拟的窗口比屏幕宽,这样就不用把每个网页挤到很小的窗口中,用户可以通过平移和缩放在看网页的不同部分.

十二. 浏览器兼容问题

  • 不同的浏览器的默认初始值不同 --->引入全局控制样式

  • 块级标签float后,又有横行的margin的情况下,在IE6显示margin比设置的大 --->在float的标签样式控制中加入display:inline,将其转化为行内属性

  • 设置小于10px高度标签,在IE6,7中无法正常显示设置高度 ---> 给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度

  • 图片之间默认有间距 --->使用float属性为img布局

  • 行内元素设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug ---> 在display:block后面加入display:inline;display:table

十三. 盒子模型

  • margin(外边距)+padding(内边距)+border(边框)+content(内容)

十四. 浮动元素引起的问题和解决办法?

  • 浮动会引起一下问题:

    • 由于浮动元素已脱离文档流,所以父元素无法被撑开,影响与父级元素同级的元素

    • 与浮动元素同级的非浮动元素(内联元素)会跟随其后,也是由于浮动元素脱离文档流,不占 据文档流中的位置

    • 如果该浮动元素不是同级第一个浮动的元素,则他之前的浮动也会应该浮动,否则容易影响页面结构

  • 清除浮动的常用方法:

    • 父级元素设置height

    • 结尾处加空div标签clear:both

    • 父级元素设置overflow: hidden / auto

    • 使用伪类:after 必须设置content: '';

十五. flexbox的使用场景

  • flex布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可以控件的能力,flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局.

十六. inline和inline-block的区别?

  • inline元素设置宽高属性无效

  • inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会换行,其宽度随元素的内容而变化

  • inline元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都会产生边距效果,垂直方向的padding-top,padding-bottom,magin-top,margin-bottom不会产生边距效果

十七. transition和animation 的区别

  • transition需要事件触发,所有没法再网页加载时自动发生

  • transition不会重复发生,除非再次触发

  • transition只能定义开始状态和结束状态,不能定义中间状态

  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性

  • animation是调用关键帧声明的动画.@keyframes就是关键帧

  • 他们都是随时间改变元素的属性值，主要区别是transition需要触发一个事件才能改变属性，而animation不需触发任何事件就会随时间改变属性值。

JavaScript

JavaScript的组成

1)ECMAScript:是JS的核心,描述了语言的基本语法和数据类型,是JS的语法规范

2)BOM:浏览器对象模型,通过BOM可以操作浏览器窗口,如:弹出框

3)DOM:文档对象模型,一套操作页面元素的API

JavaScript的输入、输出方式

输出:

1)alert() --弹出一个提示框(提示/警告文字)

2)document.write() --会将输入的内容放置到body标签内部,作为html内容

3)console.log() --代码后台

输入:

prompt('提示文字', 默认值);

对象的创建方式

1)对象字面量{}

 var o = {   name: 'jay',   age: 18,   sex: true,   sayHi: function () {     console.log(this.name);   } };

2)构造函数创建方式new Object()

 var person = new Object(); person.name = 'Jolin'; person.age = 16; person.job = 'actor'; person.sayHi = function() {   console.log('Hello,everyBody'); }

3)工厂函数创建对象

 function createPerson(name, age, job) {   var person = new Object();   person.name = name;   person.age = age;   person.job = job;   person.sayHi = function(){     console.log('Hello,everybody');   }   return person; } var p1 = createPerson('Jay', 18, 'actor');

4)自定义构造函数

 function Person(name, age, job){   this.name = name;     //this是关键字，这里代表“自己”，“当前对象”   this.age = age;   this.job = job;   this.sayHi = function(){     console.log('Hello,everybody');   } } var p1 = new Person('Jay', 18, 'actor');

new关键字运行机制

  • 创建一个新的空对象

  • 将构造函数的this指向该空对象的方法

  • 将该空对象原型指向构造函数原型

  • 返回新对象

一. this的使用场景?

  • 普通函数中的this指向全局window

  • 构造函数中的this指向实例对象

  • 对象方法中调用this,this指向该方法的对象

  • 当函数用call,apply或者bind调用时,this指向传入的对象

  • 箭头函数中没有this,this指向外部作用域中的this

  • 通过事件绑定方法时,this指向事件源

作用域/预解析/作用域链

  • 作用域:变量和函数可访问的一个范围,分为全局变量,全局作用域.局部变量,局部作用域

  • JS代码读取时,首先进行预解析,寻找作用域中的变量和函数,然后对其进行提前声明,代码从上往下执行,函数内的变量么有var声明就是全局变量

  • 作用域链:执行函数时,先从函数内部寻找局部变量,如果没找到,就会向声明函数的作用域依次向上寻找

== 和 ===有什么区别

  • =是赋值

  • ==（相等）返回一个布尔值，相等返回true，不相等返回false，允许不同数据类型的转换。

  • ===（全等）只要数据类型不一样，就会返回false。

JS内置对象-Math(求绝对值,取整,随机数)

  • Math.random() 生成一个0-1之间的随机小数

  • Math.floor()/Math.ceil() 向下取整/向上取整

  • Math.round() 取整,四舍五入

  • Math.abs() 绝对值

  • Math.max()/Math.min() 求最大值/最小值

  • Math.sin()/Math.cos() 正弦/余弦

  • Math.pow/Math.sqrt() 求指数次幂/求平方根

JS内置对象-Date(处理时间和日期,基于1970年1月1日)

  • getTime() 返回毫秒数和valueOf()结果一样

  • getMilliseconds()

  • getSeconds() 返回0-59

  • getMinutes() 返回0-59

  • getHours() 返回0-23

  • getDay() 返回星期几 0代表是周日 6代表是周六

  • getDate() 返回当前月的第几天

  • getMonth() 返回月份,从0开始

  • getFullYear() 返回4位的年份 如 2016

Array数组相关方法

  • push()/pop(): 数组末尾添加/删除

  • unshift()/shift(): 在数组最前面插入项/删除数组中前面项

  • reverse(): 翻转数组(倒序)

  • sort(): 数组排序,返回排序后的数组。根据字符,从小到大排序

  • join(): 把数组中的所有元素拼接成字符串

  • slice(): 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始

  • splice(): 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)

  • indexOf(): 索引位置，数组中查找第一次出现的位置,未找到时返回-1

  • lastIndexOf(): 数组中从末尾往前查找第一次出现的位置,未找到时返回-1

  • concat(): 合并两个或多个数组,返回一个新数组

  • forEach(): 遍历数组不返回值,返回参数

  • map(): 对数组中的每一项数据进行加工处理,形成一个新的数组

  • filter(): 对数组中的每一项进行逻辑判断,将满足条件的项形成一个新的数组

  • some(): 判断数组中是否包含符合规则的数据,只要有一个元素符合就返回true,否则返回false,终止遍历的条件为return true

  • every(): 判断数组中是否所有数据都符合规则,只要有一个不满足就返回false,全部满足才会返回true

String字符串的相关方法

  • concat() 拼接字符串,等效于'+','+'更常用

  • slice(start,end) 从start位置开始，截取字符串,不包含结束位置的字符,起始位置不能大于结束位置,否则返回一个空字符串,不传参时返回整个字符串,返回值为截取后的字符串.原字符串不变

  • substring() 方法同slice，截取字符串,参数必须为正数,起始位置可以大于结束位置,会自动把两个位置调换

  • substr(start,length) 从start位置开始,截取到length个字符,如果没有length参数,则截取到最后

  • toLowerCase(): 把字符串转成小写

  • toUpperCase(): 把字符串转成全大写

  • search() 查找,返回找到的位置

  • replace() 替换,注意:一次只能替换一个

  • split() 将字符串以指定的字符分割为数组

  • trim(): 去掉字符串前后的所有空格

  • charAt():通过索引找到对应的字符,不传参数时默认为0,取值范围0-字符串的length-1,如果超出范围,返回一个空空字符串

  • charCodeAt():通过索引找到对应字符的Unicode编码,不传参默认为0,取值范围0-字符串length-1,如果超出范围,返回一个NaN

  • indexOf():通过字符去找对应的索引,找到字符首次出现的位置(从左往右),未找到时返回-1

  • lastIndexOf():跟indexOf作用一样,顺序是从右向左查找,找不到时返回-1

DOM

  • 动态操作DOM的方法

    • 创建节点的方法:

      • document.createElement() 创建一个元素节点

      • document.createTextNode() 创建一个文本节点

    • 添加:

      • appendChild 向元素的末尾追加一个节点

      • inserBefore(a,b) 意思是a节点会插入b节点的前面

      • innerText()

      • innerHTML()

    • 替换:

      • replaceChild() 替换节点

    • 删除:

      • removeChild() 删除一个子节点

    • cloneChild 复制节点,接收布尔值参数,true表示深复制(复制节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)

    • document.getElementsByTagName() 通过标签名称查找节点

    • document.getElementsByName() 通过元素的Name属性的值查找节点

    • document.getElementById() 通过元素ID查找节点

  • 事件的三个阶段

    • 事件冒泡: 当时使用事件冒泡时,子级元素先触发,父级元素后触发

    • 事件委托

    • 事件捕获: 当你使用事件捕获时,父级元素先触发,子级元素后触发

  • 阻止事件冒泡

    • event.stopPropagation()

    • e.cancelBubble = true //兼容IE

  • 阻止默认事件

    • e.preventDefault() 取消默认事件

    • return false //推荐使用

img

  • 事件捕获

    • addEventListener() // IE9以下不支持

BOM

  • window中的常用属性

    • window.document 也是DOM的顶级对象,用于操作浏览器中的页面功能

    • window.console 用于操作浏览器中的控制台功能

    • window.location 用于操作浏览器中的地址栏相关功能

    • window.history 用于操作浏览器中的历史记录相关功能

    • window.navigator 用于操作浏览器与系统的一些相关信息

  • window中的常用方法

    • window.alert(); -- 弹出提示框

    • window.confirm() ; ---弹出确认提示框

    • window.prompt(); -- 弹出一个提示框,允许用户输入内容

    • window.open(); 用于开启新窗口

    • window.close(); 用于关闭指定窗口

  • location对象 (地址栏相关功能)

    • location.href=''; 让页面跳转

    • location.reload(); 让页面刷新

    • window.location.hash ; 哈希值#后面

    • window.location.host; 服务器名+端口号

    • window.location.hostname; 服务器名

    • window.location.port; 端口

    • window.location.pathname; 路径名

    • window.location.protocol; 协议

    • window.location.search; 参数

如何获取页面元素位置?鼠标位置?滚动条的卷曲值?

  • 元素位置:offsetLeft(),offsetTop()

  • 鼠标位置:offsetWidth(),offsetHeight()

  • 卷曲值:scrollTop(),scrollLeft()

十八. async和await的理解:

  • 执行异步操作的时候能够以同步的方式写异步的方法,async定义在函数的前面,函数执行后返回一个promise,await后面只能跟一个promise函数.

二十. 实现继承有哪些方式?

  • 原型继承

  • 构造函数继承

  • 组合式继承

  • 寄生组合式继承

  • ES6中的class

二十一. 变量提升如何理解?

  • js中,函数及变量的声明都将被提升到函数的最顶部

  • js中,变量可以先使用再声明

  • js中只用声明的变量会提升,初始化的不会

call,apply,bind有什么区别

  • 共同点:

    • call和apply都可以调用函数

    • call和apply的参数1都可以设置本次调用中this的值

  • 区别:

    • 实参传入方式不同: call是在参数1后,设置多个参数作为实参,数据形式不限 apply是在参数2设置数组,数组中的每个元素为实参

  • bind设置的所有参数均为永久设置,无法修改(call,apply都不行)

    • bind方法的参数1,用于设置某个函数内的this

    • bind方法的后续参数,用于设置实参

    • bind方法的返回值为当前函数

    • bind()不会立即执行该函数,他的参数和call()相同

闭包函数

1.闭包及闭包的优缺点

  • 当函数执行时,首先会形成一个私有作用域,这个私有作用域保护私有变量不收外界的干扰,我们把这个体制称为闭包。闭包是指有权访问另一个函数作用域中变量的函数。简单来讲:函数A中有一个函数B,函数B可以访问到函数A中的变量,那么函数B就是闭包,就是有权访问另一个函数作用域中的变量

  • 当函数执行时,会形成一个私有作用域,会保护里面的私有变量不受外界的干扰,

  • 优点:

    • 避免全局变量污染，保护函数内的变量安全,加强了封装性;

    • 可以长久的在内存中保存一个私有变量(不被垃圾回收机制回收)

    • 安全性提高,使变量私有化(不会被随意修改)

  • 缺点:

    • 内存消耗；

    • 过多的使用闭包,可能导致内存泄漏(内存泄漏是指被分配的内存没有被使用,但是也不能被垃圾回收机制回收的一种现象)

递归函数

  • 递归函数即自调用函数,在函数体内直接或者调用自己本身函数

  • 优点:代码更加简洁清晰,可读性更好

  • 缺点:用多了可能出现死循环的情况。大量使用递归函数,会消耗空间,造成系统卡顿,非必要时建议不要使用递归函数。

    • 解决方式: 给递归限制执行次数,根据规律设置递归的结束条件

面向对象和面向过程

  • 面向过程:指的是在开发过程中专注于每个功能的具体实现方式

  • 面向对象:指的是在开发过程中,分析大体步骤,找到每个步骤可以辅助我们开发的对象(工具)进行操作

面向对象的三个特征

  • 封装性:多个相同操作的功能封装到一个对象中(例如内置的Math)

  • 继承性:让功能更好的复用

  • 多态性:让功能使用的灵活性增强

正则表达式

  • 对字符串进行操作的一组工具,作用:匹配,替换,提取功能

  • 正则匹配方式:test()参数为要匹配的字符串,返回值true表示匹配成功(字符串满足正则的规则)false表示是匹配失败

  • 正则替换操作:replace()参数1为要替换的内容,参数2为替换的目标值

  • 正则提取操作:

    • 字符串方法match()参数为正则表达式,返回值为数组形式,包含提取的内容

    • 正则方法exec()参数为要提取内容的字符串,返回值为数组,特性:通过同一个正则对字符串进行多次提取操作,内容会进行累计

/^$/ 这个是个通用的格式。

^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置

*匹配前面的子表达式零次或多次；

+匹配前面的子表达式一次或多次；

?匹配前面的子表达式零次或一次；

\d 匹配一个数字字符，等价于[0-9]

校验11位手机号案例:

 function checkPhone(){      var phone = document.getElementById('phone').value;     if(!(/^1[35678]\d{9}$/.test(phone))){          alert("手机号码有误，请重新填写");           return false;      }  }

校验邮箱案例:

 function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; return reg.test(str); }

prototype属性,原型链

  • 函数自带的属性--原型

  • 作用:用于保存构造函数中公用方法值

  • 使用方式: 将构造函数中的方法设置给prototype即可,所有通过当前构造函数创建的对象都可以使用prototype中的方法

  • 三者关系

    • 实例对象:都具有proto,就是原型对象

    • 原型对象:都具有constructor属性,就是构造函数

    • 构造函数:都具有prototype属性,就是原型对象

  • 原型链:

    • 当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没找到,则会去他的proto隐式原型上查找,既他的构造函数的prototype,如果没找到就会再在构造函数的prototype的proto中查找,一层一层的向上查找就会形成一个链式结构,称为原型链.

img

如何在JS中清空数组

 如：var list = [1,2,3,4]

  • 方法一：

    list= []; //设置一个新的空数组，如果从另一个变量引用到这个数组，那么原始的引用数组将保持不变。

  • 方法二：

    list.length=0; //这种方式会更新指向原始数组的所有引用变量。

  • 方法三：

    list.splice（0,list.length）; //也将更新对原始数组的所有引用。

  • 方法四：

    while(list.length){ list.pop(); }; //不建议经常使用该方式。

JS中的转义字符是什么

能够在不破坏应用程序的情况下编写特殊字符，转义字符（\）用于处理特殊字符，如单引号、双引号、撇号和&号，在字符前放置。

 如：console.log(" I am a \"beautiful\"girl")

宏任务和微任务(微任务要优先于宏任务执行)

  • 宏任务: 进入浏览器事件队列的任务

    • 定时器

    • 事件函数

    • ajax的回调函数

  • 微任务: 不进入浏览器事件队列,而是通过js方式模拟出自己的队列

    • Promise的相关回调: then/catch/finally

    • Object.observe()

    • MutationObserve监控DOM的变化

请描述一下cookies、sessionStorage、localStorage、session四者的区别？

存储大小： 　　cookie在4K以内。 　　sessionStorage和localStorage在5M以内。

有效时间： 　　cookie：如果未设置过期时间，关闭浏览器时清空；如果设置了有效时间则在到期后清空。 　　sessionStorage：关闭浏览器时清空。 　　localStorage：关闭浏览器不清空，手动清除时清空。

数据与服务器之间的交互方式： 　　cookie：自动携带数据发送到服务器。 　　sessionStorage和localStorage不自动发送数据给服务器，仅在本地保存。

数据作用域： 　　cookie和localStorage在同源窗口可以共享。 　　sessionStorage即使在同源窗口也不共享。

storage事件： 　　cookie和sessionStorage不支持。 　　localStorage支持。

path路径： 　　cookie有路径的概念，可以限制cookie只属于某个路径下。 　　sessionStorage和localStorage没有path的概念。

易用性： 　　原生的cookie接口不友好，需要自己封装。 　　sessionStorage和localStorage的接口调用更方便。

cookie和session有什么联系和区别： cookie：浏览器用来保存用户信息的文件，可以保存用户是谁，购物车中有哪些商品。 session：指我们访问网站的一个周期。用户打开一个站点，然后点击多个超链接查看各个网页，然后关闭浏览器，这个过程称为一个会话。

因为http协议是无状态的协议，也就是网页一旦关闭，浏览器和服务端的连接就会断开，下次打开网页又要重新连接，这样可以缓解服务器压力，但是随着网页内容越来越丰富， 单词请求成本增加，这样的效率就降低了。使用cookie和session可以缓解这种问题。

联系和区别： session需要借助cookie才能正常工作。 （1）存储位置：cookie存放在客户端，session存放在服务端。 （2）安全：cookie的安全性不是很高，任何人都可以在控制台输入document.cookie获取到cookie，考虑安全性应该要使用session。 （3）效率问题：session会在一定时间保存在服务器上，访问增多服务器压力增大，考虑到服务器性能应当使用cookie。 （4）大小：cookie的大小不能超过4K，session没有大小限制。 （5）登录信息等重要的信息存放在session中，其他信息可以放在cookie中

一.基础

页面渲染的全过程

输入url后，先拿到html文件，html下载完以后会开始对它进行解析

html在解析的过程中，如果文本里有外部资源链接，比如css、js和img时，会立即启用其他线程下载这些静态资源。

特殊的是当遇到js文件的时候，html解析会停下来，等js文件下载结束并且执行完，再进行html执行。

在html解析的同时，解析器会把解析完的html转化成DOM对象，构建成DOM树。

当css下载完，css解析器开始对css解析，把css解析成css对象，把css组装起来，构建CSSOM树。

DOM和CSSOM树构建完毕，浏览器根据两棵树建一颗渲染树。

1.前端如何优化网站性能？

1.减少 HTTP 请求数量：在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

2.CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。

3.合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者多个 JS 合并成一个文件。

4.采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

5.控制资源文件加载优先级：浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。一般情况下都是 CSS 在头部，JS 在底部。

6.利用浏览器缓存：浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

7.减少重排（Reflow）。基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过style 操作样式。

8.减少 DOM 操作

9.图标使用 IconFont 替换

10.代码校验：避免 CSS 表达式，避免重定向

11.页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

12.缓存利用：使用 CDN，使用外部 JavaScript 和 CSS，添加 Expires 头，减少 DNS 查找，配置 ETag，使 AjaX 可缓存

13.请求带宽：开启 GZip，精简 JavaScript，移除重复脚本，图像优化，将 icon 做成字体

14.请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域

谈谈以前端角度出发做好 SEO 需要考虑什么？

a. 了解搜索引擎如何抓取网页和如何索引网页

b. meta 标签优化

c. 关键词分析

d. 付费给搜索引擎

e. 链接交换和链接广泛度（Link Popularity）

f. 合理的标签使用

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

a. 图片懒加载，滚动到相应位置才加载图片。

b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。

c. 使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术，如果图片为 css 图片的话。

d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

请说出三种减少页面加载时间的方法

a. 尽量减少页面中重复的 HTTP 请求数量

b. 服务器开启 gzip 压缩

c. css 样式的定义放置在文件头部

d. Javascript 脚本放在文件末尾

e. 压缩合并 Javascript、CSS 代码

f. 使用多域名负载网页内的多个文件、图片

平时如何管理你的项目？

a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

d. 页面进行标注（例如 页面 模块 开始和结束）；

e. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）；

f. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译。

g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

对 BFC 规范的理解。

BFC 全称是 Block Formatting Context，即块格式化上下文。它是 CSS2.1 规范定义的，关于 CSS 渲染定位的一个概念。

BFC 是页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC 的一个最重要的效果是，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

利用 BFC 可以闭合浮动，防止与浮动元素重叠。

2.如何优化SPA应用的首屏加载速度慢的问题？

将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundel 的体积，在调用某个组件时再加载对应的js文件；加一个首屏 loading 图，提升用户体验。

3.网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

输入网址；

发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；

与web服务器建立TCP连接；

浏览器向web服务器发送http请求；

web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；

浏览器下载web服务器返回的数据及解析html源文件；

生成DOM树，解析css和js，渲染页面，直至显示完成。

请简述盒模型

IE6 盒子模型与 W3C 盒子模型。

文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界 margin, 边框边界 border, 内边距边界 padding 与内容边界 content。 CSS3 中有个 box-sizing 属性可以控制盒子的计算方式，

content-box：padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和。（W3C 盒子模型）

border-box：padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就等于设置的 width 值。（IE6 盒子模型）

二.Vue

1.谈谈你对MVVM开发模式的理解.

MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

View-Model 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 View-Model 来进行联系的，Model 和 View-Model 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

2.v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要频繁切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

3.简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 ​ 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

avatar
文章
阅读
粉丝