公告:携程集团2022年春季校园招聘会内推!!

谈谈CSS3 硬件加速(GPU 加速)

前言

CSS3 硬件加速又叫做 GPU 加速,是利用 GPU 进行渲染,减少 CPU 操作的一种优化方案。页面css做图片滑动,滚动,特别是手机端,可能出现卡顿,闪白等情况,解决这些动画卡顿的情况,我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint,所以能大大提高网页的性能。

如何开启 GPU 加速

CSS 中的以下几个属性能触发硬件加速:

transform

opacity

filter

will-change

JSONP及内容安全策略CSP

前言

今天主要讲讲JSONP的实现及内容安全策略CSP,JSONP跨域方案是很老的一种形式,我们用封装好的ajax基本都提供了这个功能,例如jquery的jsonp,请看之前文章:https://www.haorooms.com/post/jquery_ajax_wg ,及跨域解决方案之JSONP,都有提及,但是究竟怎么实现的,没有写,今天主要写一下JSONP的简单实现,及内容安全策略CSP,就是一个网站,可以设置运行访问的域名安全策略。

JSONP实现

JSONP的原理非常简单,就是HTML标签中,很多带src属性的标签都可以跨域请求内容,比如我们熟悉的img图片标签。同理,script标签也可以,利用script标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的,来执行跨域的javascript代码。

采用Service Workers让网站动态加载WebP图片

前言

网站性能优化,对于图片的处理,使图片采用webp格式,可以大大降低图片size,提高网站性能具有重要意义。但是webp格式有兼容问题,一般是判断浏览器是否支持webp,才采用webp格式。其实,页面种使用动态使用webp格式图片有很多方案,今天主要介绍的是采用Service Workers方案,关于Service Workers,我之前文章也有过介绍,HTML5之离线缓存的方法。主要是用pwa离线方案。本博客就采用Service Workers技术。

Service Workers加载webp图片

每个图片加载请求可以通过accept获取是否支持webp格式,例如如下图

JS 实现 点击按钮复制文本到剪贴板中

前言

js复制文本到剪切板有很多方法,很多朋友会用开源库,其实纯js的方式实现也很简单。关于复制和剪切板,之前也写过很多文章,例如。 javascript execCommand,复文本框神器 记录一下js光标位置及复制和剪切板 文件上传之剪切板上传及大文件分片上传和断点续传

今天分享一下简单的copy方案。

navigator.clipboard.writeText 方案

这个方案不支持ie,比较简单

前端跨页面通信方案介绍

前言

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说的跨页面通信方案,那么目前有哪些跨页面的通信方案呢?本文重点介绍一下。

同源页面之间跨页面通信

同源页面之间跨页面通信一般有如下几种方案。

一、BroadCast Channel