浏览器零碎知识

原创 前端工程师_钱成 随笔 浏览器 267阅读 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)用HTML解析器解析HTML生成DOM树,放在内存上,
(2)用CSS解析器解析CSS生成style rules
(3)(1)(2)合并,生成Render树,放在内存上,
(4)把Render树布局到浏览器上
(5)把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修复的意思)。

当白色的选择块完全覆盖了我们要复制的内容(文字)后,松开鼠标左键,按下鼠标右键,会弹出一个快捷菜单,但不用理会了,因此此时已经完成了复制工作了,也就是已经把我们刚在在CMD命令窗口选择的文字已经复制下来了。

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

赶紧努力消灭 0 回复