整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、定义
<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
2、作用
meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：
浏览器的头部就会包括这些:
只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
3、meta的必需属性和可选属性
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：
必需属性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可选属性
在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。
http-equiv
http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子
name
第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:
<meta name="renderer" content="webkit">
这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档
常用meta标签大总结
接下来就是常用的meta标签大总结啦，我会尽可能的做到全
charset
charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
charset有两种写法
两个都是等效的。
百度禁止转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 优化部分
viewport
viewport主要是影响移动端页面布局的，例如：
content 参数：
各浏览器平台
Microsoft Internet Explorer
Google Chrome
360浏览器
UC手机浏览器
UCBrowser_U3_API
QQ手机浏览器
Apple iOS
Google Android
App Links
最后——移动端常用的meta
eact18内核探秘：手写React高质量源码迈向高阶开发
download: https://www.666xit.com/4202/
RN简介React Native(简称RN)是Facebook于2015年4月开源的跨渠道移动运用开发结构，是Facebook新近开源的JS结构React在原生移动运用渠道的衍生产品，现在支撑iOS和安卓两大渠道。RN运用Javascript言语，类似于HTML的JSX，以及CSS来开发移动运用，因此了解Web前端开发的技术人员只需很少的学习就能够进入移动运用开发范畴。
React Native
看起来很像
React
，只不过其根底组件是原生组件而非 web 组件。要了解
React Native
运用的根本结构，首要需求了解一些根本的
React
的概念，比如
JSX
语法、组件、
state
状况以及
props
特色。
React Native开发特色:
一次学习，随处编写:运用React Native可认为iOS和Android操作系统开发运用程序，不同渠道上的代码依据渠道会有一些微小的差异。混合开发:React Native代码开发的模块与原生代码开发的模块能够双向通信、无缝联接；高效的移动运用开发:（1）共同的UI完结结构（2）组件化开发（3）跨渠道移植代码敏捷（4）自动匹配不同屏幕巨细的手机高效的移动运用开发调试高效的运用热更新有效下降移动运用装置包体积学习门槛低、开发难度低运用React Native开发的价值为了得到React Native开发的长处，运用React Native开发的APP也需求付出必定的价值。（1）内存耗费大运用React Native开发的程序运行所需的内存比原生代码开发的程序略多。（2）运行速度运用React Native开发的代码运行速度比原生代码略慢。
React 与 React Native 除了在编码体现层都运用 JSX 语法外，在 React 与 React Native 的底层都有 Virtual DOM 与 DOM 之间的映射与转换，以完结了页面组件高效更新的前端体现。
现在最新版本是0.59React Native中文网
React Native
与
React
的关系及特色:
React
是根底结构，是一套根底规划完结理念，开发者不能直接运用它来开发移动运用或网页。在
React
之上开展出了
React.js
结构用来开发网页，开展出来
React Native
用来开发移动运用。底层原理是相同的，都是运用js完结虚拟dom树来驱动页面的烘托，react是驱动HTML dom的烘托，react native是驱动原生组件的烘托。
React.js
:目的 是为了使前端的V层更具组件化，能更好的复用，它能够运用简略的html标签创立更多的自界说组件标签，内部绑定事情，同时能够让你从操作dom中解脱出来，只需求操作数据就会改动相应的dom。
二者都是依据组件（
component
）开发，然后组件和组件之间经过
props
传递办法，每个组件都有一个状况
（state）
，当某个办法改动了这个状况值时，整个组件就会重绘，然后到达改写。另外，说到重绘就要说到
虚拟dom
了，便是用js模仿
dom
结构，等整个组件的
dom
更新结束，它会有一个
diff
的进程，对比出哪些组件发生了改动，然后才烘托到页面，简略来说只更新了比较之前改动了的部分，而不是全部改写，所以功率很高。
虚拟DOM（Virtual DOM）
的机制：在浏览器端用
Javascript
完结了一套
DOM API
。依据
React
进行开发时一切的
DOM
结构都是经过虚拟
DOM
进行，每当数据改动时，React都会从头构建整个DOM树，然后React将当时整个DOM树和上一次的DOM树进行对比，得到DOM结构的差异，然后只是将需求改动的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的改写，在一个事情循环（Event Loop）内的两次数据改动会被兼并。
2.React详解
React 官网React GitHub 地址React菜鸟教程React介绍学习生态介绍
Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + WebpackReact生态：React + React-Router + Redux + Axios + Babel + Webpack
2.1.React 简介
React是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。运用 React 能够将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
React
特色
1.声明式规划 React采用声明范式，能够轻松描绘运用。2.高效 React经过对DOM的模仿，最大极限地减少与DOM的交互。3.灵活 React能够与已知的库或结构很好地合作。4.JSX JSX是JavaScript语法的扩展。React 开发不必定运用 JSX ，但咱们主张运用它。5.组件 经过React构建组件，使得代码愈加容易得到复用，能够很好的运用在大项目的开发中。6.单向呼应的数据流 React完结了单向呼应的数据流，然后减少了重复代码，这也是它为什么比传统数据绑定更简略。2.2 React运用
1.React 环境装备装置
运用 React CDN 库经过 npm 运用 React运用 create-react-app 快速构建 React 开发环境2.3React render 烘托
屏幕输出：Hello, React
Title
ReactDOM.render(
,document.getElementById('root'));
3.React JSX
React 运用 JSX 来代替惯例的 JavaScript。
1.React JSX简介
JSX：JavaScript XML，一种类似于XML的JS扩展语法。也能够了解成：契合 XML 标准的 JS 语法。
JSX语法的实质：以 React.createElement 的形式来完结的，并没有直接把 用户写的 HTML代码，烘托到页面上。运用babel转换工具将 JSX语法 转换为 JS语法。
咱们不需求必定运用 JSX，但它有以下长处：
JSX 履行更快，由于它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译进程中就能发现错误。运用 JSX 编写模板愈加简略快速。
const element =
;
这种看起来或许有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。 咱们推荐在 React 中运用 JSX 来描绘用户界面。JSX 是在 JavaScript 内部完结的。
2.JSX的根本语法
（1）在 JSX内部 写 JS代码：假如要在 JSX 语法内部，书写 JS 代码，那么，一切的JS代码有必要写到 {} 的内部。在{}内部，能够写任何契合JS标准的代码。
例如：
var myTitle = '这是运用变量界说的 tilte 值'// 运用JSX语法 创立虚拟DOM目标var vDom = (
Hello, React!这是标题);
（2）当编译引擎在编译JSX代码的时分，假如遇到了<，会把它当作 HTML代码 去编译；假如遇到了 {}， 会把方括号里边的代码当作 一般JS代码 去编译。
（3）在JSX中，假如要为元素添加class特色，则有必要写成className，由于 class在ES6中是一个关键字；和class类似，label标签的 for 特色需求替换为 htmlFor。
代码举例：
// 运用JSX语法 创立虚拟DOM目标var vDom = (
Hello, React!千古壹号
);
（4）在JSX创立DOM的时分，一切的节点，有必要有唯一的根元素进行包裹。
（5）假如要写注释，注释有必要放到 {} 内部。例如：
// 运用JSX语法 创立虚拟DOM目标var vDom = (// 这一行是注释
Hello, React!
千古壹号
{/*这一行也是注释 */});
最后，再举个比如：
Document
//页面中的实在容器元素var containDiv = document.getElementById("app");var arr = []for (var i = 0; i < 6; i++) {var p = 这个是p标签
// 注意这个地方的写法： key = {i}arr.push(p)}//1、运用JSX语法 创立虚拟DOM目标var vDom = (Hello, React!{arr});//2、烘托虚拟DOM目标ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM目标；参数2：页面中的容器
4.React 组件 状况(State&props) 生命周期详解
React 把组件看成是一个状况机（State Machines）。经过与用户的交互，完结不同状况，然后烘托 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后依据新的 state 从头烘托用户界面（不要操作 DOM）。
创立组件的第一种方式:在React中，结构函数便是一个最根本的组件。假如想要把组件放到页面中，能够把结构函数的名称当作组件的名称，以 HTML标签形式引进页面中即可。创立组件的第二种方式：运用 class 关键字运用 function 创立的组件，叫做【无状况组件】；运用 class 创立的组件，叫做【有状况组件】。实质差异：有状况组件和无状况组件，最实质的差异，便是有无 state 特色。同时， class 创立的组件，有自己的生命周期函数，可是，function 创立的 组件，没有自己的生命周期函数。
state 和 props 主要的差异在于 props 是不可变的，而 state 能够依据与用户交互来改动。这便是为什么有些容器组件需求界说 state 来更新和修改数据。 而子组件只能经过 props 来传递数据。
组件API
设置状况：setState替换状况：replaceState设置特色：setProps替换特色：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判别组件挂载状况：isMounted
组件的生命周期可分成三个状况：
在组件创立、到加载到页面上运行、以及组件被毁掉的进程中，总是伴随着各式各样的事情，这些在组件特定时期，触发的事情统称为组件的生命周期。Mounting：已插入实在 DOMUpdating：正在被从头烘托Unmounting：已移出实在 DOM
生命周期的办法有：
componentWillMount 在烘托前调用,在客户端也在服务端。componentDidMount : 在第一次烘托后调用，只在客户端。之后组件现已生成了对应的DOM结构，能够经过this.getDOMNode()来进行拜访。 假如你想和其他JavaScript结构一起运用，能够在这个办法中调用setTimeout, setInterval或许发送AJAX请求等操作(防止异步操作阻塞UI)。componentWillReceiveProps 在组件接纳到一个新的 prop (更新后)时被调用。这个办法在初始化render时不会被调用。shouldComponentUpdate 回来一个布尔值。在组件接纳到新的props或许state时被调用。在初始化时或许运用forceUpdate时不被调用。能够在你确认不需求更新组件时运用。componentWillUpdate在组件接纳到新的props或许state但还没有render时被调用。在初始化时不会被调用。componentDidUpdate 在组件完结更新后立即调用。在初始化时不会被调用。componentWillUnmount在组件从 DOM 中移除之前马上被调用。1.组件创立阶段
组件创立阶段的生命周期函数，有一个明显的特色：创立阶段的生命周期函数，在组件的一辈子中，只履行一次。
getDefaultProps初始化 props 特色默认值。
getInitialState初始化组件的私有数据。由于 state 是界说在组件的 constructor 结构器当中的，只需new 了 class类，必定会调用 constructor结构器。
componentWillMount()组件将要被挂载。此刻还没有开端烘托虚拟DOM。
在这个阶段，不能去操作DOM元素，但能够操作特色、状况、function。相当于 Vue 中的Create()函数。
render()第一次开端烘托真实的虚拟DOM。当render履行完，内存中就有了完好的虚拟DOM了。
意思是，此刻，虚拟DOM在内存中创立好了，可是还没有挂在到页面上。
在这个函数内部，不能去操作DOM元素，由于还没return之前，虚拟DOM还没有创立；当return履行结束后，虚拟DOM就创立好了，可是还没有挂在到页面上。
componentDidMount()当组件（虚拟DOM）挂载到页面之后，会进入这个生命周期函数。
只需进入到这个生命周期函数，则必定阐明，页面上现已有可见的DOM元素了。此刻，组件现已显示到了页面上，state上的数据、内存中的虚拟DOM、以及浏览器中的页面，现已彻底保持一致了。
当这个办法履行完，组件就进入都了 运行中 的状况。所以说，componentDidMount 是创立阶段的最后一个函数。
在这个函数中，咱们能够放心的去 操作 页面上你需求运用的 DOM 元素了。假如咱们想操作DOM元素，最早只能在 componentDidMount 中进行。相当于 Vue 中的 mounted() 函数
2、组件运行阶段
有一个明显的特色，依据组件的state和props的改动，有选择性的触发0次或屡次。
componentWillReceiveProps()组件将要接纳新特色。只有当父组件中，经过某些事情，从头修改了 传递给 子组件的 props 数据之后，才会触发这个钩子函数。
shouldComponentUpdate()判别组件是否需求被更新。此刻，组件尚未被更新，可是，state 和 props 肯定是最新的。
componentWillUpdate()组件将要被更新。此刻，组件还没有被更新，在进入到这个生命周期函数的时分，内存中的虚拟DOM还是旧的，页面上的 DOM 元素也是旧的。（也便是说，此刻操作的是旧的 DOM元素）
render此刻，又要依据最新的 state 和 props，从头烘托一棵内存中的 虚拟DOM树。当 render 调用结束，内存中的旧DOM树，现已被新DOM树替换了！此刻，虚拟DOM树现已和组件的 state 保持一致了，都是最新的；可是页面还是旧的。
componentDidUpdate此刻，组件完结更新，页面被从头烘托。此刻，state、虚拟DOM 和 页面现已彻底保持同步。
3、组件毁掉阶段
一辈子只履行一次。
componentWillUnmount: 组件将要被卸载。此刻组件还能够正常运用。生命周期对比：
vue中的生命周期图React Native 中组件的生命周期
组件生命周期的履行次序总结
1、Mounting：
constructor()componentWillMount()render()componentDidMount()2、Updating：
componentWillReceiveProps(nextProps)：接纳父组件传递过来的特色shouldComponentUpdate(nextProps, nextState)：一旦调用 setState，就会触发这个办法。办法默认 return true；假如 return false，后续的办法就不会走了。componentWillUpdate(nextProps, nextState)render()componentDidUpdate(prevProps, prevState)3、Unmounting：
componentWillUnmount()5.React 事情处理
React 元素的事情处理和 DOM 元素类似。可是有一点语法上的不同:
React 事情绑定特色的命名采用驼峰式写法，而不是小写。假如采用 JSX 的语法你需求传入一个函数作为事情处理函数，而不是一个字符串(DOM 元素的写法)
//HTML 一般写法是：激活按钮//React 中写法为：激活按钮
浏览器的功能：显示在计算机中的网页实际上是位于许多不同的计算机文件中的元素的集合。因此，浏览器的功能首先是检索文件，然后将页面的各个部分组合起来，根据文本中的HTML命令排列这些部分。
浏览器内核分为两部分：渲染引擎 和 JavaScript引擎。其中，渲染引擎是浏览器内核中比较重要的部分，现在所说的内核一般指的都是渲染引擎。
常见的浏览器内核：
四大内核：
1、Trident内核，也称IE内核。
2、Webkit内核。
3、Gecko内核。
4、Presto内核。
各浏览器所用内核：
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
1. 从网络层（networking）获取请求文档的内容，解析HTML/SVG/XHTML，形成一个DOM树(DOM Tree)
默认情况下，加载和执行javascript都会阻止DOM tree的构建。
内部js脚本会在引入它的位置执行，外联脚本则是加载完毕后执行。
注意：因此，不管是内联脚本还是外部脚本，都应该尽量放在标签结束之前（除非某些脚本需要在页面加载完之前调用），这样可以保证在运行脚本之前，页面已经基本加载完成。
2. 解析CSS代码，计算出最终的样式数据，产生一个CSS规则树(CSS Rule Tree)
解析CSS的时候的顺序：浏览器默认设置，用户设置，外链样式，内联样式，html中的style
3. 解析JavaScript
通过DOM API来操作DOM Tree，通过CSSOM API来操作CSS Rule Tree
4. 解析完上述三种代码之后，就构建一个渲染树 (rendering tree)
渲染树和DOM树有所不同：
渲染树中不包括不需要渲染的节点 : html head meta link style script display : none的元素，渲染树中每一个节点都储存有对应的CSS属性，加载css会阻止render tree的构建
5. 开始渲染，页面初始化时会发生一次回流。
1. 什么是页面的重绘和回流
回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。（需要改变布局、几何属性）
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
因此回流必定影响重绘，重绘不一定引起回流。回流比重绘的代价要更高
2. 回流何时发生
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；（所以需要函数节流）
3. 浏览器对回流和重绘做的优化工作
浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会释放队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。(有点类似文档碎片frameElement感觉)
虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前释放队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器释放队列，比如：
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 请求了getComputedStyle(), 或者 IE的 currentStyle
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要释放队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。
4. 减少回流reflow和重绘repaint
(1) 不要一条一条修改DOM的样式
替换方法：
预先定义好css，然后修改DOM的className，修改style的style.cssText
(2) 把DOM离线后修改
先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
(3) 不要把DOM结点的属性值放在一个循环里当成循环的变量。
(4) 尽可能修改层级比较低的DOM
(5) 为动画的HTML元素使用fixed或者absolute的position
修改他们的CSS是不会reflow的，因为使用fixed或者absolute的元素会脱离文档流
(6) 千万不要使用table布局
注意：CSS匹配DOM Tree主要是从右到左解析CSS的Selector，CSS匹配HTML元素是一个相当复杂和有性能问题的事情。DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去。
欢迎关注。
*请认真填写需求信息，我们会在24小时内与您取得联系。
