网页性能优化的方法概述 网页性能优化的9个方法合并操作 DOM的多个读写操作(或多个写操作),应该放在一起。不要两个读操作之间加入一个写操作。 不要一条条的改变样式,而要通过改变class,或者csstext属性,一次性的改变样式 缓存 如果某个样式是通过重排得到的,那么最好缓存结果。避免下一次用到的时候,浏览器又要重排 操作非真实DOM 尽量使用离线DOM,而不是真实的网面dom,来改变元素样式。(比如,操 2021-12-25 场景应用
前端开发中导致页面卡顿的因素 之前在做实习的一个项目的时候碰到了一个让我抓狂的BUG,需求是让我实现一个实时刷新获取消息列表的功能,但是后台返回的接口数据是成百上千的,页面卡的不得了,笔记本的风扇都呼呼的,所以这篇博客是为了总结一下导致页面卡顿的原因。 一.页面卡顿的原因大体上可以分为两种类型1.渲染不及时,页面掉帧 长时间占用js线程 页面回流和重绘较多 资源加载堵塞 我觉得这就是我上次碰到的哪个问题的原因,每一次请求 2021-12-25 浏览器
页面重绘与回流 一.什么是页面的重绘与回流浏览器在渲染一个页面的时候,从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性生成渲染树(不包括display:none,head节点但是会包括visibility:hidden节点),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的样式对应的渲染这些节点。在这个过程中,回流与dom树和渲染树有关,重绘与渲染树有关。 比如我们删除一个dom节 2021-12-25 浏览器
Css概述 前言:我把CSS样式的一些基础知识总结了一下,作为自己的复习 1.内联与块内联元素:内联元素不会占用一整行,他只会占用他自己元素大小的空间块级元素:会独占一行的元素,无论他的内容有多少他都会独占一整行a元素可以包含除了他本身以外的任意元素,p元素不能包含其他任何块元素 2.CSS选择器 选择器 语法 元素选择器 标签名{} id选择器 #id属性值{} 类选择器 .class属 2021-12-25 Css
Cookie与Webstorage 基本概念cookie是往返于客户端与服务端的一小段存储信息,由响应头的Set-cookie设置,客户端浏览器在接收到响应之后就会在cookie中存储配置信息与数据,并且在向服务端发起请求的时候都会在请求头中带上这一段cookie传给服务端。 LocalStorage是WebStorage的一种,可以在浏览器中长期保存的一种本地存储类型,除非被清除,或者设定的过期时间到了,否则会一直保存在浏览器中 2021-12-25
Form Data与Request Payload的区别 前端向后端发起get请求的时候,get会把传递的参数拼接在url的后面,所以get请求一般适用于数据量不大的情况之下,在数据量比较大的时候,我们就需要选择Post请求的方式了. 方式一:Form Data形式当POST请求的请求头里设置Content-Type: application/x-www-form-urlencoded(默认), 参数在请求体以标准的Form Data的形式提交,以&am 2021-12-25 浏览器
应用鉴权 应用鉴权就是当一个用户进入APP时,我们需要判断他所拥有的权利,根据权力来判断他所能进行的一个行为,最为常见的就是购物网站的登录以及购物支付等操作。 一.鉴权的需求背景Http的请求是无状态的,就是说在一个Http请求中的请求方和响应方都是无法维护状态,是一次性的,所以我们就不知道请求前后都发生了什么。所以我们需要标记的功能,而浏览器的sessionStorage,localStorage,全局 2021-12-25 场景应用
JSONP详解 jsonp是一个比较常见的跨域解决方法,这篇博客使用来详解它的用法以及实现原理 1.实现原理script标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行,这种性质致使我们可以通过script标签来实现jsonp跨域 2.实现模式假设A网站需要获取B网站中的某些数据程序B 123//调用callback函数,并以json数据形式作为阐述传递,完成回调callback( 2021-12-25 浏览器
从输入URL到页面展示的详细过程 1.输入网址url:统一资源定位符,用于定位互联网综上的资源url构成:协议类型://<主机名>:<端口>/<路径>/文件名?参数名#锚点 2.浏览器查找域名的IP地址(域名解析)浏览器缓存浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束系统缓存浏览器会查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规 2021-12-25 浏览器
跨域问题 一.为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议( 2021-12-25 浏览器