脚本宝典收集整理的这篇文章主要介绍了前端开发需要了解的浏览器通识,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
2007年之前,市面上浏览器都是单进程的,在同一个进程里会存在网络、插件、JavaScript运行环境、渲染引擎和页面等。 缺点
新的Chrome浏览器包括:
主要用途是与用户互动,以及操作DOM。如果JavaScript是多线程的,会带来很多复杂的问题。 Web Worker:为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。但是子线程完全受主线程控制,且不得操作DOM
进程:是 CPU 资源分配的最小单位(是能拥有资源和独立运行的最小单位)。 线程:是 CPU 调度的最小单位(是建立在进程基础上的一次程序运行单位)。
JS 是单线程的,同步执行任务会造成浏览器的阻塞,所以我们将 JS 分成一个又一个的任务,通过不停的循环来执行事件队列中的任务。
浏览器渲染一共有五步
第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染
浏览器缓存分为强缓存和协商缓存。
对一个网站而言,CSS、JavaScript、图片等静态资源更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。
通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,将静态内容设为永不过期,或者很长时间后才过期。
1、Cache-Control Cache-Control属性是在服务器端配置的,不同的服务器有不同的配置,apache、nginx、IIS、tomcat等配置都不尽相同。 以Apache为例,在http.conf中做如下配置:
<filESMatch ”.(jpg|jPEg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
</filesMatch>
问题:浏览器缓存的资源,若又想更新资源,如何实现? 解决:通过修改该资源的名称来实现。修改了资源名称,浏览器会当做不同的资源。 Cache-Control相关属性 no-cache:不使用本地缓存。 no-@R_304_1413@:直接禁止游览器缓存数据, public:可以被所有的用户缓存, PRivate:只能被终端用户的浏览器缓存, max-age:从当前请求开始, must-revalidate,当缓存过期时,
2、Expires Expires属性也是在服务端配置的,具体的配置也根据服务器而定。 问题:可能存在客户端时间跟服务端时间不一致的问题。 解决:建议Expires结合Cache-Control一起使用。
Cache-Control: public
Expires: Wed, Jan 10 2018 00:27:04 GMT
过程
览器在第一次访问页面时向服务器请求资源,并缓存起来,下次再访问时会判断在缓存中是否已有该资源且有没有更新过,如果已有该资源且未更新过,则直接从浏览器缓存中读取。
原理: 通过HTTP 请求头中的 If-Modified-since(If-No-Match) 和响应头中的Last-Modified(ETag)来实现 HTTP请求把 If-Modified-Since(If-No-Match)传给服务器 服务器将其与Last-Modified(ETag)对比,若相同,则文件没有被改动过,则返回304,直接浏览器缓存中读取资源即可。
Service Worker
离线缓存: 这个应用场景比如PWA,它借鉴了Web Worker思路,由于它脱离了浏览器的窗体,因此无法直接访问DOM。它能完成的功能比如:离线缓存、消息推送和网络代理,其中离线缓存就是Service Worker Cache。
Memory Cache
内存缓存:从效率上讲它是最快的,从存活时间来讲又是最短的,当渲染进程结束后,内存缓存也就不存在了。
Disk Cache
存储在磁盘中的缓存:从存取效率上讲是比内存缓存慢的,优势在于存储容量和存储时长。
Push Cache
推送缓存:这算是浏览器中最后一道防线吧,它是HTTP/2的内容
存储大小: cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
有效期时间: localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
九种实用的前端跨域处理方案
网站安全问题汇总
PWA渐进式web应用
JavaScript之BOM和DOM及其兼容操作详细总结 (1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)
(3)查找
getElementById();
getElementsByName();
getelementsbytagname();
getElementsByclassname();
querySelector();
querySelectorAll();
(4)属性操作
getAttribute(key);
setattribute(key, value);
hasAttribute(key);
removeAttribute(key);
当我们打开网址的时候,浏览器会从服务器中获取到 HTML 内容
浏览器获取到 HTML 内容后,就开始从上到下解析 HTML 的元素
<head>
元素内容会先被解析,此时浏览器还没开始渲染页面
当浏览器解析到这里时(步骤 3),会暂停解析并下载 JavaScript 脚本
当 JavaScript 脚本下载完成后,浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后,控制权会交回给渲染引擎,渲染引擎继续往下解析 HTML 页面
此时<body>
元素内容开始被解析,浏览器开始渲染页面]
js延迟加载的方式有哪些
基础版本
从浏览器接收url到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系)
开启网络线程到发出一个完整的HTTP请求(这一部分涉及到dns查询,TCP/IP请求,五层因特网协议栈等知识)
从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
后台和前台的HTTP交互(这一部分包括HTTP头部、响应码、报文结构、cookie等知识,可以提下静态资源的cookie优化,以及编码解码,如gzip压缩等)
单独拎出来的缓存问题,HTTP的缓存(这部分包括http缓存头部,ETag,catch-control等)
浏览器接收到HTTP数据包后的解析流程(解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树,然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentLoaded等)
CSS的可视化格式模型(元素的渲染规则,如包含块,控制框,Bfc,IFC等概念)
JS引擎解析过程(JS的解释阶段,预处理阶段,执行阶段生成执行上下文,VO,作用域链、回收机制等等)
其它(可以拓展不同的知识模块,如跨域,web安全,hybrid模式等等内容)
以上是脚本宝典为你收集整理的前端开发需要了解的浏览器通识全部内容,希望文章能够帮你解决前端开发需要了解的浏览器通识所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。