登陆后,如何得知已登录?
前端把服务器返回的认证信息(cookie
/token
/sessionID
)等存储在本地(localstorage
,sessionstorage
,cookie
),表明已经登录,并设置超时时间。
前端性能优化的方法
浏览器渲染机制,减少使用重绘重排。
事件处理程序,使用事件委托。
网络请求优化,善用缓存,不重复加载相同资源,减少HTTP请求。
静态资源使用内容分发网络
CDN
内容分发网络是一种分布式网络,通过在网络各处部署节点服务器加快用户访问应用的速度。
特点:
- 分布式部署,
CDN
会在指定范围内设置多个节点服务器,自动选择离用户最近的节点提供资源,减少网络延迟,提高访问速度。 - 负载均衡,根据网络流量和服务器负载,智能将用户请求分配到合适的节点,避免单点过载,提高网络的可靠性和稳定性。
- 缓存机制,
CDN
使用缓存机制存储和提供资源。当用户首次请求资源时,CDN
会把资源缓存到离用户最近的节点服务器,当用户再次请求相同资源时,CDN
直接从缓存中读取,不需要再次请求服务器,提高内容访问速度。 - 成本优化,减少对源服务器带宽和存储要求,降低运营成本。
DNS
域名解析器,域名转化为对应的IP地址。
流程:用户在浏览器输入域名,浏览器先在本地DNS
服务器的缓存中查找,查询根DNS
服务器,查询顶级域DNS
服务器,查询顶级域DNS
服务器
浏览器输入url
后发生了什么
-
DNS
解析:域名解析成IP地址 -
TCP
连接:三次握手 -
发生HTTP请求
-
服务器处理请求并返回响应
-
浏览器接受响应并渲染页面
- 解析HTML,生成
DOM
树。树状结构,包含网页的结构和内容。 - 解析CSS,生成
CSSOM
树。样式信息。 DOM
树和CSSOM
树合并结合,生存渲染树。包含可见的DOM
节点及样式信息。- 布局。根据渲染树,浏览器计算每个节点的几何属性,大小位置等。
- 绘制。将布局好的节点绘制到屏幕上。浏览器可能将页面分成多个层(固定元素,动画元素),最后合并不同层。
- 在构建
CSSOM
和DOM
的时候,JavaScript
会介入。遇到script
时候,DOM
会暂停,直至脚本执行完成。JavaScript
可以修改和DOM
和CSSOM
。JavaScript执行会阻塞页面渲染,实际上我们使用async
或defer
属性,异步加载,避免阻塞页面渲染。
性能优化:减少重绘重排(减少使用引起重绘的
css
属性),优化资源加载(懒加载和异步加载延迟非关键资源加载),使用浏览器缓存和CDN
,减少DOM
节点数量(长列表使用虚拟化技术) - 解析HTML,生成
-
断开连接:四次挥手
css
加载会造成阻塞吗?
CSS
不会阻塞DOM
解析,但会阻塞DOM
渲染。
DOM
和CSSOM
并行建构,所以CSS加载不会阻塞DOM
解析。但是渲染树 (Render Tree)依赖于CSSOM
和DOM
,需要等两者加载完毕完成响应构建,才开始渲染,所以CSS
阻塞DOM
渲染。
CSS
不会阻塞js
文件下载,但会阻塞js
执行。
js
文件和css
文件下载是并行的,所以css
不会阻塞js
文件下载。css
文件有时候很大,js
需要等待,为什么js
执行要等css
,因为如果js
是获取元素样式,那么就需要依赖css
,样式表在js
执行执行前加载完毕,所以css
会阻塞js
执行。
JavaScript
可以操作修改css
和dom
,如果JavaScript
修改元素的同时渲染页面,那么渲染前后元素数据可能不一致,所以浏览器设置GUI
渲染线程和JavaScript互斥。
为什么js
会阻塞页面加载?
过程:js
加载或执行都会阻塞DOM
树,只有js
执行完,DOM树才会继续解析,没有DOM树,浏览器就无法渲染。当js
很大时候,可以看的页面长时间空白。
原因:js
会操作修改节点,会影响DOM
树,如果先生成DOM
树,js
修改节点,浏览器需要重新解析生成DOM
树,性能差,所以需要js
执行完再执行DOM
解析。