一个专注于WEB开发的技术的个人博客

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例) 在浏览器地址栏输入URL 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤如果资源未缓存，发起新请求如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期 ...

在掘金上看见了面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒，正巧自己对Babel工作原理和Babel插件开发也不够了解，赶紧来补一波吧。 基础概念首先我们这里需要了解一些基本的概念，这篇文章介绍的很详细，我这边只提一下。 BabelBabel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。意思是说你为 ...

从年前就开始梳理浏览器的工作原理（主要对webkit内核的浏览器进行分析）到现在差不多快一个月了，本文意在帮助前端工程师了解浏览器的工作原理，并据此来优化我们的网页性能。主要查阅了WebKit技术内幕、MDN、W3C等网站资料，下文中有若干图片摘自于《WebKit技术内幕》，在此表示感谢。本文略长，如有不适，实属意外。如有不正确的地方，还望指正，毕竟传播真理才不会误导其他同学，共同进步才是目的。 ...

React virtualDOM（batching）在React中，render执行的结果返回的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。通过 React 的 diff，再由虚拟 DOM 来确保只对界面上真正变化的部分进行实际的DOM操作，这样就极大提升了性能。batching把所有的DOM操作搜集起来，一次性提交给真实的DOM。 DO ...

demo地址 什么是 IndexDB？IndexedDB 是一个用于在浏览器中储存较大数据结构的 Web API, 并提供索引功能以实现高性能查找. 像其他基于 SQL 的 关系型数据库管理系统 (RDBMS) 一样, IndexedDB 是一个事务型的数据库系统. 然而, 它是使用 JavaScript 对象而非列数固定的表格来储存数据的. IndexDB 的特点IndexDB 和大多数web存 ...

基础svg的使用 img的src background-image: url() object: data embed: src foreignObjectforeignObject元素允许包含外来的XML命名空间，其图形内容是别的用户代理绘制的。样式的写法（优先级逐渐降低）1.内联style<g style="fill: red;"></g>2.cla ...

先放上demo，打开控制台试试 什么是Web WorkerWeb Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞/放慢。局限性：在worker内不能直接操作DOM节点，或者使用window对象的默认方法和属性。 Worker特性检测12345if(windo ...

介绍Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。其实Geolocation 就是用来获取到当前设备的经纬度（位置）带有此接口的对象可以用由 Navigator实现的属性NavigatorGeolocation.geolocation 来获得。PS：鉴于该特性可能侵犯用户的隐私，除非 ...

理论介绍拖放（Drag 和 drop）是 HTML5 标准的组成部分。DataTransfer 对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。draggable 属性：为需要拖拽的元素设置该属性。Event.effectAllowed 属性：就是拖拽的效果。Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要 ...

防止网页被嵌入框架的代码任何页面都不可嵌套1234// 判断当前的window对象是否对顶层top对象还可以使用window.top !== window.selfif (window !== top) // 如果不是，将top对象的网址自动导向被嵌入网页的网址top.location.href = window.location.href; 本地域名可嵌套，其他域名不可12345678try&# ...