浏览器
前端有关浏览器的知识
LuckXinXin
加油
展开
-
浏览器性能问题
重绘(Repaint)和回流(Reflow)重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。重绘是当节点需要更改外观而不会影响布局的,比如改变 color就叫称为重绘回流是布局或者几何属性需要改变就称为回流回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。所以以下几个动作可能会导致性能问题:改变 window 大小改变字体添加或删除样式文字改变定位或者浮动盒模型很多人不知道的是,重绘和回流其实和原创 2020-08-06 14:03:17 · 231 阅读 · 0 评论 -
浏览器缓存
缓存对于前端性能优化来说是个很重要的点,良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。通常浏览器缓存策略分为两种:强缓存和协商缓存。强缓存实现强缓存可以通过两种响应头实现:Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求,state code 为 200Expires: Wed, 22 Oct 2018 08:41:00 GMTExpires 是 HTTP / 1.0 的产物,表示资源会在Wed,22 Oct 2018 08:41:00.原创 2020-08-06 13:56:49 · 135 阅读 · 1 评论 -
Service worker
service workerService workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API目前该技术通常用来做缓存文件,提高首屏速度,可以试着来实现这个功能// index.jsif (navigator.serviceWorker) { navigator.se原创 2020-08-05 09:37:59 · 182 阅读 · 0 评论 -
什么是事件代理
如果一个节点中的子节点是动态生成的,那么子节点需要注册事件的话应该注册在父节点上<ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul><script> let ul = document.querySelector('#ul') ul..原创 2020-08-05 09:35:58 · 165 阅读 · 0 评论 -
如何解决跨域
因为浏览器出于安全考虑,有同源策略。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax请求会失败。我们可以通过以下几种常用方法解决跨域的问题JSONPJSONP 的原理很简单,就是利用 <script>标签没有跨域限制的漏洞。通过 <script>标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时<script src="http://domain/api?param1=a¶m2=b&callback=jso.原创 2020-08-05 09:34:56 · 195 阅读 · 0 评论 -
怎么判断页面是否加载完成?
Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载原创 2020-08-04 09:44:23 · 709 阅读 · 0 评论 -
cookie和localSrorage、session、indexDB 的区别
从上表可以看到,cookie 已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStorage和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。对于 cookie,我们还需要注意安全性...原创 2020-08-04 09:43:04 · 273 阅读 · 0 评论