51浏览器零碎知识

注意：谷歌浏览器的控制台打印console.log(result),result定义处的打印结果也分为当前值和最终值，二者常常不一致。当前值直接可见，当前值的右侧有个向右的三角号，点击可获取最终值。1、引起回流（Reflow）的操做：（1）改变DOM元素的大小或位置：（2）增长、删除 DOM 结点时。（3）Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。（4）设置 style 属性的值。注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，由于没有发现位置变化。Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每一个结点都会有 reflow 方法，一个结点的 reflow 颇有可能致使子结点，甚至父点以及同级结点的 reflow。2、浏览器解析工做流程的五个步骤：一个渲染引擎大体包括HTML解释器，CSS解释器，JavaScript引擎解析渲染该过程主要分为如下5个步骤：（1）生成DOM树：用HTML解析器解析HTML生成DOM树，放在内存上，（2）生成样式规则：用CSS解析器解析CSS生成style rules（3）生成Render树：（1）（2）合并，生成Render树，放在内存上，（4）布局Render树：把Render树布局到浏览器上（5）绘制Render树：把Render树绘制到浏览器上![图片描述](attimg://article/content/picture/201805/20/194545evognvaninidi7lr.png)重绘：尺寸和位置没有变化回流：尺寸或位置有变化3、http请求的过程：（1）浏览器查找当前URL是否存在本地缓存（2）浏览器开启线程，解析URL，经过CDN、DNS找到服务器（3）浏览器经过三次握手，与服务器创建链接（4）浏览器请求报文--服务器响应报文--浏览器接受数据--浏览器渲染页面（5）浏览器与服务器经过四次挥手，断开链接4、主要浏览器的内核及其前缀（1）IE trident -ms-（2）欧朋 presto -o-（3）谷歌 webkit -webkit-（4）火狐 gecko -moz-5、栈和队列的区别（1）栈：先进后出（2）队列：先进先出6、验证用户是否登陆的逻辑：1)用户密码登陆时，在后台的req中记住session.2)若是用户保存登陆密码，则记住cookie，不然把当前用户的cookie设置为空;3)每次用户须要向后台进行请求时，进行状态检验：session是否存在？若存在，则继续进行请求操做，并将session的有效时间从新设置一次；若session不存在，则判断cookie是否存在？若存在，使用该cookie完成自动登陆，即完成了一次 “ 在后台的req中记住session ” );若不存在，则页面重定向到登陆页面。来源，http://blog.csdn.net/xixi880928/article/details/693893377、怎么让Chrome支持小于12px 的文字？span{font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}8、前端路由与单页页面一、路由就是指随着浏览器地址栏的变化，展现给用户的页面也不相同。二、传统的网页根据用户访问的不一样的地址，浏览器从服务器获取对应页面的内容展现给用户。这样形成服务器压力比较大，并且用户访问速度也比较慢。在这种场景下，出现了单页应用。三、单页应用，就是只有一个页面，用户访问一个网址，服务器返回的页面始终只有一个，就算用户改变了浏览器地址栏的内容且页面发生了跳转，服务器不会从新返回新的页面。四、优势：（1）没有了网络延迟，用户体验会有至关大的提高。后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。（2）前端路由作单页面网页，页面变了Url也会变，用户能复制到想要的url。用ajax请求作不到这一点五、缺点：（1）首次加载时间相对较长。在第一次加载的时候，须要将全部前端资源进行加载，前端资源会比多页面应用大一些，加载时间相对较长。（2）对搜索引擎不友好： 单页应用只有一个页面，没法对每个路由作SEO。（3）没有合理地利用缓存：使用浏览器的前进，后退键的时候会从新发送请求。9、扩展谷歌浏览器插件的步骤（以“React Developer Tools”为例）：（1）打开http://www.cnplugins.com/，（2）在“输入Chrome插件名称”里输入“React Developer Tools”（3）点击“插件下载”（4）点击“高速下载器下载”（5）打开chrome://downloads/找到“React Developer Tools”（6）打开chrome://extensions/ ，并将React Developer Tools”拖拽至这个页面10、清除缓存（1）用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control。xmlHttp.setRequestHeader("If-Modified-Since","0");xmlHttp.setRequestHeader("Cache-Control","no-cache");（2）直接用cache:false（3）用随机数（4）随机时间11、不一样页面之间的通讯（1）使用localStorage+storageA、使用localStorage.setItem(key,value);添加内容B、使用storage事件监听添加、修改、删除的动做（2）使用cookie+setInterval　（3）iframe（4）postmessage　12、window对象window对象是相对于web浏览器而言的，它并非ECMAScripta规定的内置对象，内置对象的定义是：“由ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行以前就已经存在了。”window对象是宿主对象也就是在必定的环境中才会生成的对象（这里也就是指浏览器），而global对象是在任何环境中都存在的。window对象具体也就是指浏览器打开的那个窗口。十3、编程方式（1）面向过程编程：根据业务逻辑直接写代码。（2）函数式编程：把运算过程封装成函数。（3）面向对象编程：对函数进行分类和封装。十4、动态添加样式（1）obj.style.width = '400px'; obj.style.height = '300px';（2）obj.style.cssText = "width:400px; height:300px;";十五：设置一个主机用两块显示屏右键=>屏幕分辨率=>（多显示器）复制显示改成扩展显示十六：解决：使用驱动器G中的光盘以前须要将其格式化（1）Windows键+X（2）输入chkdsk G:/f（其中G是你U盘的盘符，f是fix修复的意思）。十七：debugger一、在js代码里写debugger；二、刷新网页；三、按f12四、触发debugger所在的代码块五、按f8(暂停/继续)、f10(单步执行，不会进入函数内部)、f11(单步进入，会进入函数内部)十8、删除（360、unlocker）没法删除的文件参见：http://www.d9soft.com/school/soft_jiaocheng/37851.html（1）新建记事本，在记事本内容中写入如下命令：DEL /F /A /Q \\?\%1RD /S /Q \\?\%1（2）将文件另存为：类型为“全部文件”，名字为任意，后缀为“.bat”的文件；（3）而后将要删掉的文件拖至这个.bat文件上。十9、用cmd在D盘建立目录aaa并进入（1）window+r（2）输入cmd，点击肯定（3）输入cd/（回到c盘根目录）（4）d:（进入d盘）（5）md aaa（6）cd aaa二10、安装包（1）本地本文件夹安装 npm install AAA（2）本地全局安装 npm install -g AAA查看本地全局文件的安装位置 npm prefix -g（3）开发依赖 npm install AAA --save-dev（4）开发生产依赖 npm install AAA --save不上线的项目用（1）（2），上线的项目用（3）（4）二11、谷歌浏览器，开启“容许网站运行flash”步骤设置----显示高级设置----隐私设置----内容设置----flash----(勾选)容许网站运行flash二12、cnpm安装和使用,来源https://npm.taobao.org/一、安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org二、卸载cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org三、使用cnpm：cnpm install aaaa或cnpm install node-sass@latest四、查看npm版本：npm -v五、查看cnpm版本：cnpm -v六、npm和cnpm不互斥（四、5能够前后运行，不会干扰或覆盖）二十3、安装某个包的某个版本一、npm install --save-dev react-router@2.8.1二十5、webstorm代码冲突解决```javascript<<<<<<< HEAD本地向服务器提交的内容（我写的）=======服务器下载到本地的内容（人家写的）>>>>>>> b0ef58d69851fedad4169878a62033c0ce16246c```附：乌班图1、乌班图之打开pycharm软件,编辑内容一、python@ubuntu:~s cd /opt/pycharm-2016.3.1/bin/二、python@ubuntu:/opt/pycharm-2016.3.1/bin$ sudo su三、[sudo]python的密码: python 四、root@ubuntu:/opt/pycharm-2016.3.1/bin# ls四、root@ubuntu:/opt/pycharm-2016.3.1/bin# ./pycharm.sh2、乌班图之另起命令页面ctrl+shift+t3、乌班图之服务器启动一、python@ubuntu:/opt/pycharm-2016.3.1/bin$ cd/二、python@ubuntu:/$ ls三、python@ubuntu:/$ cd home/python四、python@ubuntu:/$ sudo su五、[sudo]python的密码: python 六、root@ubuntu:/home/python#workspace cd audit-web/七、root@ubuntu:/home/python/audit-web# ls八、root@ubuntu:/home/python/workspace audit-web# python manage.py runserver4、WebStrom Live Template 建代码块来源：https://blog.csdn.net/liangrongliu1991/article/details/79626960一、File—editor—live templates—javascript，+，abbreviation:(简写代码，好比ccc)，templates text: (详写代码，好比console.log())，define(勾选，好比javascript,typescript)，apply，ok5、函数注释```javascript/** * Publishes an event so that it can be dispatched by the supplied plugin.//说明函数用途 * @param {object} dispatchConfig Dispatch configuration for the event.//参数 参数数据类型 参数名 参数用途 * @param {object} PluginModule Plugin publishing the event.//参数 参数数据类型 参数名 参数用途 * @param {string} eventName Plugin publishing the event.//参数 参数数据类型 参数名 参数用途 * @return {boolean} True if the event was successfully published.//返回值 返回值数据类型 返回值含义 * @private //全局函数仍是私有函数 */function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {}```附1、获取某张单色图片真实颜色的步骤：（1）用微信截图，在截图的过程当中，有rgb颜色提示，记下这三组数字；（2）再经过https://www.sioe.cn/yingyong/yanse-rgb-16/转换成十六进制颜色代码。