2018-03-07-2

1.1 Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

<!DOCTYPR html> 用以通知浏览器用什么文档类型规范来解析文档 严格模式:浏览器按照w3c标准解析代码! 混杂模式:浏览器按照自己的方式解析代码!

如何区分:浏览器采用严格模式或者混杂模式,与网页中的DTD相关。

DTD有三种模式: 1.严格的(Strict) 2.过渡(Transitional) 3.框架(Frameset)

1.2.HTML5 为什么只需要写<!DOCTYPR html> ? html5中没有DTD,自然没有严格模式与混杂模式之分,html5有相对宽松的语法,已经 尽可能实现向后兼容!

意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式, 那么许多旧网站必然受到影响,如果只存在混杂模式, 那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

1.3 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 行内:a,button,textarea,img,input,span,label,select 块级:div,ul,li,p,h1-h6,blockquote 空元素:link,br,hr,input,img

1.4 页面导入样式时,使用link和@import有什么区别? link --> xhtml标签 @import --> css样式

link --> 会与页面同时加载 @import --> 页面加载完在加载

@import 旧浏览器不支持!!!

1.5 介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些? 渲染引擎:渲染页面的 JS引擎:解析和运行JS代码

chrome,safari: webkit FireFox:Gecko IE,360,sougou:IE内核

1.6 HTML语义化的理解? 给合适的内容添加合适的代码,结构化,便于阅读 为什么这么做: 1.结构清晰 2.利于SEO,有助爬虫,爬虫是依赖于标签确定 上下文和关键字的权重 3.便于团队开发和维护 4.利于移动设备展现网页(css支持较弱)

2.1 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? CSS盒子模型:由四个属性组成的外边距(margin)、内边距(padding)、 边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不一样

  标准的css盒子模型宽高就是内容区宽高;

  低端IE css盒子模型宽高 内边距﹢边界﹢内容区;

background-color会渲染padding和内容区

2.2 CSS选择符有哪些?哪些属性可以继承? 类,id,tag,后代,>(子代),属性选择器,伪类选择器 可继承属性: font-family color font-size

不可继承: margin,padding,border,width,height,

优先级: !import > 内联 > id > class > tag

伪类选择器: :active 激活的元素 :focus 键盘输入交点 :hover 悬停 :link 未被访问 :visited已访问 :first-child 第一个子元素 :lang 有lang属性的

伪元素: :before 元素之前 :after 元素之后 :first-letter 首字母 :first-line 首行

伪元素和伪类的区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 伪元素本质上是创建了一个有内容的虚拟容器; CSS3中伪类和伪元素的语法不同;

CSS3新增伪类: [元素]:nth-child(n) 先找[元素]的父元素,再找父元素下的第n个元素,若是[元素]则渲染 [元素]:nth-last-child(n) 倒着数 [元素]:only-child 父元素只有一个[元素] [元素]:nth-of-type(n) 父元素下‘沿着’[元素]往下数n个数 [元素]:nth-last-of-type(n) 倒着数

【lang】

2.3 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? div水平居中:margin:0 auto; 垂直居中:父元素{display:flex;align-items:center}

浮动元素水平居中:float使得margin无效,所以margin:0 auto无效了 水平居中:{


我是浮动的

  .outerbox{  
    float:left;   
    position:relative;   
    left:50%;   
  }   
  .innerbox{    
    float:left;   
    position:relative;   
    right:50%;   
  }  
}

绝对定位的div: 水平居中:{ margin:0 auto; left:0;//important right:0;//important }

2.4 position static:默认static,意思是它不会‘positioned’! fixed:固定定位,相对于视窗而言! relative:相对于自己,left,right,top,bottom可用,其他元素不会因为他的 位置变化,而变动; absolute:absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最 近的“absolute”或者“relative”祖先元素。如果绝对定位(position属性的值为absolute)的 元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随 着页面滚动而移动。

2.5 css3新增特性 1.shadow(text-shadow) 2.border-radius 3.新增的伪类和伪元素 4.弹性布局 5.渐变 6.特效: (1):过渡效果 (2):2D转换 (3):动画特效

2.6 gif,jpg,png,webp

  1. gif 小的动态图
  2. jpg 有损 适合颜色层次丰富,颜色数量较多的图片,比如摄影图
  3. png 无损 适合颜色数量较少的图片
  4. webp 压缩率高,支持无损和有损 成像质量好 但是浏览器支持较少safari和 firefox,ie不支持

3.1 介绍JavaScript的基本数据类型。 两种:原始类型和对象类型 原始类型: number,string,bool,null,undefined 对象类型: 函数对象,日期对象,数组对象,Set,Map...

对象是动态的属性集合!!!

需要跟家规范的“键值对”Map更合适,Map的键不局限于字符串, 各种类型的值都可以当做键。

3.2 数组map和forEach map返回新数组 forEach不返回

3.3 说说写JavaScript的基本规范? (1) == --> ===类似这种 (2) 不要使用with --> 可能导致意外错误 (3) var转换成let,const (4) 不要使用eval --> 安全和性能问题 (5) 单行快结构 加上大括号

3.4 var arr = ["1", "2", "3"].map(parseInt) [ 1, NaN, NaN ]

forEach和map中的函数默认接受三个参数:当前的元素,索引值,被调用的数组 parseInt接受两个参数:需要转换的元素,进制 上面相当于: parseInt('1',0) //1 parseInt('2',1) //NaN parseInt('3',2) //NaN

【反转字符串】 Array.from(str).reverse().join('')

3.5 JavaScript原型,原型链 ? 有什么特点? 特点:影响性能 3.6 JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型), 你能画一下他们的内存图吗? 3.7 Javascript如何实现继承? (1) 构造继承 (2) 原型继承 (3)

3.8 JavaScript中的call和apply Function.prototype.call[apply] 指定Function中的属性‘挂在’this对象上 apply(this,[param1,...]) call(this,param1,...)

function Person(name,age){ this.name = name; this.age = age; }

function Teacher(name,age,prof){ //Person.call(this,name,age); //Person.apply(this,[name,age]); this.prof = prof; }

var wkk = new Teacher('wkk',28,'IT'); //Teacher { name: 'wkk', age: 28, prof: 'IT' }

3.9 ES6中的class super(...args) 会先调用父类的构造函数,创建this对象,然后子类对其进行 改造,而ES5是先创建子类实例对象,再将父类方法添加到this对象上,这是两者的 区别。

3.10 手写表单验证

3.11 ajax ajax指代用脚本发起HTTP通信,利用的是XMLHttpRequest对象; var ajax = new XMLHttpRequest(); ajax.open(type,url)

4.1 react应用场景?

4.2 react的生命周期? 三个阶段:创建/更新/卸载

创建: 以下五个函数一定会且只会创建一次: 1.getDefaultProps:从父元素获得Props,并有机会对其进行修改 2.getInitalState:初始化state 3.componentWillMount:有机会修改state,先调父元素的componentWillMount,再调子元素的 componentWillMount(感觉类似c++中的构造函数) 4.render:返回只有一个根节点的虚拟DOM 5.componentDidMount:组件加载完成,先调用父元素的componentDidMount,在调用自己的

更新: 1.componentWillReceiveProps:响应父组件传来的Props发生变化时的响应函数 2.shouldComponentUpdate:当Props或者state发生变化可以触发该函数,可以决定是否发生render 3.componentWillUpdate:重新render之前触发,将新的props和state设置到this.props和this.state上 4.componentDidUpdate:重新render之后,生成真实DOM之后触发,参数是之前的props和state 卸载: 1.componentWillUnmount:释放内存,可以执行比如撤销事件监听等类似的工作

4.3 render的触发条件 1.初次创建 2.this.setState() 3.父组件render,子组件也得render 4.props发生变化 5.this.forceUpdate

4.4 实现组件有哪些方式? 1.UI组件: function Component(props){

        }
        (1).无状态管理
        (2).渲染性能得到提升
2.ES5
    React.createClass
3.ES6
    React.Component

4.5 应该在React生命周期的什么阶段发出ajax请求,为什么?

应该放在componentDidMount之中,基于两点: 1.服务端渲染时,componentWillMount调两次,一次server端,一次client端,而componentDidMount 只会在server调用一次,结果明确 2.保证在render之前不会请求数据,提醒正确设置state,不会发生没有定义state的错误

4.6 当组件的setState函数被调用之后,发生了什么? 新的state存入临时队列,当一个 transaction 完成后,mergin state产生new state 然后render

4.7 为什么循环产生的组件中要利用上key这个特殊的prop? react利用key可以记住那些元素是新建的,哪些是位置变化引起的,提升效率。

4.8 redux数据流? redux是实现了Flux思想的数据流框架。 React没有解决的方面: 1.组件之间通信 2.代码结构 redux使用场景,多交互,多数据源 redux设计思想: 1.Web应用是一个状态机,试图与状态一一对应 2.所有状态放在一个对象中 https://segmentfault.com/a/1190000008287154 redux-thunk使得dispatch接受函数作为参数 reudx-Promise使得dispatch接受Promise作为参数 这两个中间件使得可以处理异步action

其他中间件:redux-logger redux-form

4.9 redux如何做到可预测 ?

4.10 redux三大原则 1.state只读 2.使用纯函数进行修改 3.单一数据源 4.11 redux的两种组件 1.容器组件: 从state获取数组需要的属性 2.展示组件: 渲染和自身的state管理

4.12 redux如何将state注入到component上?

4.13 react-redux 1.Provider: 使得子组件可以访问到store 2.connenct connect(mapStateToProps,mapDispatchToProps) mapStateToProps(state){ return 所需state数据 }

4.14 react 16新特性 重要事件: MIT协议 新的核心架构fiber,fiber主要是负责react16的新特性,重写了react 体积更小,效率更高 未来要加的特性 1.异步渲染 2.不再需要key属性 废弃的内容: 1.服务端渲染要使用React.hydrate,而不是render 2.React.PropTypes和React.createClass被废弃 1.render的return可以返回数组或者字符串 2.错误边界error boundaries,react的try{}catch{}

Error boundaries are React components that catch JavaScript 
errors anywhere in their child component tree, log those 
errors, and display a fallback UI instead of the component 
tree that crashed. Error boundaries catch errors during 
rendering, in lifecycle methods, and in constructors of the 
whole tree below them.
Note that error boundaries only catch errors in the 
components below them in the tree. An error boundary can’t 
catch an error within itself. If an error boundary fails 
trying to render the error message, the error will propagate 
to the closest error boundary above it. This, too, is similar
to how catch {} block works in JavaScript.

3.portals(挂在方式)
    可以将渲染的children插入到一个DOM节点,而这个节点可以是存在于当前
组件dom结构外的其他节点。
4.更好的服务端渲染
    利用这一特性,所有浏览器能更早的开始解析和渲染页面文档。
5.支持自定义的DOM属性
    取代之前忽略不识别的HTML和SVG属性的方式,新的版本将会把它们传递给
    DOM元素。这个新特性会让我们摆脱可用的React属性白名单,从而减少文件
    的大小。
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。