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-store:直接禁止游览器缓存数据,
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
Memory Cache
Disk Cache
Push Cache
短暂性存储:我们只需要将数据存在内存中,只在运行时可用
持久性存储:可以分为 浏览器端 与 服务器端
浏览器:
cookie: 通常用于存储用户身份,登录状态等
localStorage / sessionStorage: 长久储存/窗口关闭删除, 体积限制为 4~5M
indexDB:浏览器提供的本地数据库
服务器:
分布式缓存 redis
数据库
存储大小:
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);
<head>
元素内容会先被解析,此时浏览器还没开始渲染页面<body>
元素内容开始被解析,浏览器开始渲染页面]js延迟加载的方式有哪些
基础版本
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/ypSharing/p/15632567.html
内容来源于网络,如有侵权,请联系作者删除!