浏览器零碎知识

原创 前端工程师_钱成 随笔 工具 365阅读 2018-04-15 21:25:29 举报

一、引发回流(Reflow)的操作:
(1)改变DOM元素的大小或位置:
(2)增加、删除 DOM 结点时。
(3)Resize 窗口的时候(移动端没有这个问题),或是滚动的时候。
(4)设置 style 属性的值。
注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。

二、浏览器解析工作流程的五个步骤:
一个渲染引擎大致包括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树绘制到浏览器上

重绘:尺寸和位置没有变化
回流:尺寸或位置有变化

三、http请求的过程:
(1)浏览器查找当前URL是否存在本地缓存
(2)浏览器开启线程,解析URL,通过CDN、DNS找到服务器
(3)浏览器通过三次握手,与服务器建立连接
(4)浏览器请求报文--服务器响应报文--浏览器接受数据--浏览器渲染页面
(5)浏览器与服务器通过四次挥手,断开连接
四、主要浏览器的内核及其前缀
(1)IE trident -ms-
(2)欧朋 presto -o-
(3)谷歌 webkit -webkit-
(4)火狐 gecko -moz-
五、栈和队列的区别
(1)栈:先进后出
(2)队列:先进后出
六、验证用户是否登录的逻辑:
1)用户密码登录时,在后台的req中记住session.
2)如果用户保存登录密码,则记住cookie,否则把当前用户的cookie设置为空;
3)每次用户需要向后台进行请求时,进行状态检验:
session是否存在?若存在,则继续进行请求操作,并将session的有效时间重新设置一次;若session不存在,则判断
cookie是否存在?若存在,使用该cookie完成自动登录,即完成了一次 “ 在后台的req中记住session ” );若不存在,则页面
重定向到登录页面。
来源,http://blog.csdn.net/xixi880928/article/details/69389337
七、怎么让Chrome支持小于12px 的文字?
span{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
八、前端路由与单页页面
1、路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。
2、传统的网页根据用户访问的不同的地址,浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大,而且用户访问速度也比较慢。在这种场景下,出现了单页应用。
3、单页应用,就是只有一个页面,用户访问一个网址,服务器返回的页面始终只有一个,就算用户改变了浏览器地址栏的内容且页面发生了跳转,服务器不会重新返回新的页面。
4、优点:(1)没有了网络延迟,用户体验会有相当大的提升。后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。(2)前端路由做单页面网页,页面变了Url也会变,用户能复制到想要的url。用ajax请求做不到这一点
5、缺点:(1)首次加载时间相对较长。在第一次加载的时候,需要将所有前端资源进行加载,前端资源会比多页面应用大一些,加载时间相对较长。(2)对搜索引擎不友好: 单页应用只有一个页面,无法对每一个路由做SEO。(3)没有合理地利用缓存:使用浏览器的前进,后退键的时候会重新发送请求。
九、扩展谷歌浏览器插件的步骤(以“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”拖拽至这个页面
十、清除缓存
(1)用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control。xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
(2)直接用cache:false
(3)用随机数
(4)随机时间
十一、不同页面之间的通信
(1)使用localStorage+storage
A、使用localStorage.setItem(key,value);添加内容
B、使用storage事件监听添加、修改、删除的动作
(2)使用cookie+setInterval 
(3)iframe
(4)postmessage 
十二、window对象
window对象是相对于web浏览器而言的,它并不是ECMAScripta规定的内置对象,内置对象的定义是:“由ECMAScript实现提供的、不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在了。”window对象是宿主对象也就是在一定的环境中才会生成的对象(这里也就是指浏览器),而global对象是在任何环境中都存在的。window对象具体也就是指浏览器打开的那个窗口。
十三、编程方式
(1)面向过程编程:根据业务逻辑直接写代码。
(2)函数式编程:把运算过程封装成函数。
(3)面向对象编程:对函数进行分类和封装。
十四、动态添加样式
(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
1、在js代码里写debugger;
2、刷新网页;
3、按f12
4、触发debugger所在的代码块
5、按f8(暂停/继续)、f10(单步执行,不会进入函数内部)、f11(单步进入,会进入函数内部)

十八、删除(360、unlocker)无法删除的文件
参见:http://www.d9soft.com/school/soft_jiaocheng/37851.html
(1)新建记事本,在记事本内容中写入以下命令:
DEL /F /A /Q \\?\%1
RD /S /Q \\?\%1
(2)将文件另存为:类型为“所有文件”,名字为任意,后缀为“.bat”的文件;
(3)然后将要删掉的文件拖至这个.bat文件上。

十九、用cmd在D盘创建目录aaa并进入
(1)window+r
(2)输入cmd,点击确定
(3)输入cd/(回到c盘根目录)
(4)d:(进入d盘)
(5)md aaa
(6)cd aaa
二十、安装包
(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)
二十一、谷歌浏览器,开启“允许网站运行flash”步骤
设置----显示高级设置----隐私设置----内容设置----flash----(勾选)允许网站运行flash
二十二、cnpm安装和使用,来源https://npm.taobao.org/
1、安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
2、卸载cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
3、使用cnpm:cnpm install aaaa或cnpm install node-sass@latest
4、查看npm版本:npm -v
5、查看cnpm版本:cnpm -v
6、npm和cnpm不互斥(4、5可以先后运行,不会干扰或覆盖)
二十三、安装某个包的某个版本
1、npm install --save-dev react-router@2.8.1

二十五、webstorm代码冲突解决

附:乌班图
一、乌班图之打开pycharm软件,编辑内容
1、python@ubuntu:~s cd /opt/pycharm-2016.3.1/bin/
2、python@ubuntu:/opt/pycharm-2016.3.1/bin$ sudo su
3、[sudo]python的密码: python
4、root@ubuntu:/opt/pycharm-2016.3.1/bin# ls
4、root@ubuntu:/opt/pycharm-2016.3.1/bin# ./pycharm.sh
二、乌班图之另起命令页面
ctrl+shift+t
三、乌班图之服务器启动
1、python@ubuntu:/opt/pycharm-2016.3.1/bin$ cd/
2、python@ubuntu:/$ ls
3、python@ubuntu:/$ cd home/python
4、python@ubuntu:/$ sudo su
5、[sudo]python的密码: python
6、root@ubuntu:/home/python#workspace cd audit-web/
7、root@ubuntu:/home/python/audit-web# ls
8、root@ubuntu:/home/python/workspace audit-web# python manage.py runserver
四、WebStrom Live Template 建代码块
来源:https://blog.csdn.net/liangrongliu1991/article/details/79626960
1、File—editor—live templates—javascript,+,abbreviation:(简写代码,比如ccc),templates text: (详写代码,比如console.log()),define(勾选,比如javascript,typescript),apply,ok

五、函数注释

附一、获取某张单色图片真实颜色的步骤:(1)用微信截图,在截图的过程中,有rgb颜色提示,记下这三组数字;(2)再通过https://www.sioe.cn/yingyong/yanse-rgb-16/转换成十六进制颜色代码。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复