• Home
  • 前端预览页面优化解决思路笔记

    比如可视化话数据仪表盘预览，如下图所示：常规的预览方案就是弹窗预览，比...
    custom element 创建自定义元素与new Event创建自定义事件

    custom element 创建自定义元素与new Event创建自定义事件 结合起来可以...
    vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

    此文为数据可视化vue-grid-layout拖曳布局实践总结，在实现过程中的一些避坑点
    target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

    在jQuery时代，$( e target ) closest( "li ") toggleClass( "hilig...
    HTML焦点元素获取： DOM activeElement元素-聚焦、失焦

    给一个元素获取鼠标焦点闪烁很简单，document getElementById( "inputID ...
    HTML转义字符：xss攻击与HTML字符的转义和反转义

    HTML常用转义字符对照表：最常用的字符实体 Character Entities、ISO 885...
    中断操作：AbortController学习笔记

    AbortController是一个DOM API。MDN上对它的介绍是 AbortController接口表...
    图片懒加载[lazyload images]之H5原生

    之前实现图片懒加载一般使用 jquery lazyload js，后面H5支持了loading=...
    web内容如何保护：如何有效地保护 HTML5 格式的视频内容?

    （Digital Rights Management）通过对数字内容进行加密和附件使用规则，对...
    如何纯CSS实现标题栏、表格头水平滚动垂直不滚动

    有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflo...
    图表列表性能优化：可视化区域内最小资源消耗

    本来想标题党：一个组件的自我修养之路。其实就是通过 (Intersection Resi...
    懒加载优化：JavaScript IntersectionObserver API监听元素是否可见

    传统的滚动加载，通过滚动，去判断元素是否可见，在去根据需求去加载元素。...
    前端性能监控：window.performance 属性分析

    window performance是用来测量网页和web应用程序的性能，他提供一组精确的...
    Preload与Prefetch的区别以及webpack项目中如何优化

    preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onl...
    混合内容页面：全域https下里面的http请求浏览器的安全处理

    https页面里面包含http请求内容。主要有两种类型的混合内容：混合被动 显示...
    ServiceWorker工作机制与生命周期：资源缓存与协作通信处理

    Service Worker可拦截客户端的请 向客户端发送消息 向服务器发起请求等...
    web messaging与Woker分类：漫谈postMessage跨线程跨页面通信

    跨文档通信(cross-document messaging)：跨就是我们国内更为熟知的HTML5 w...
    web安全：中间人攻击

    中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是...
    再谈BOM和DOM(4):DOM0/DOM2事件处理分析

    事件就是用户或浏览器自身执行的某种动作。响应某个事件的函数就叫事件监听...
    登录状态控制：cookies对比sessionStorage保持信息的分析

    sessionStorage 的有效期是页面会话持续，页面会话在浏览器打开期间一直保...

    htmlmore>>

    在web2 0之前，写jsp的时候虽然有es和JSTL，但是还是坚持jsp。后面在外包公司为了快速交货，还是用了php Smart技术。web2 0后，前后端分离，之前jsp或php的活全部到了前端……
    1. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载
    2. MIME类型：从限定选择文件类型看MIME类型 前后端设置
    3. HTML焦点元素获取： DOM activeElement元素-聚焦、失焦
    4. HTML转义字符：xss攻击与HTML字符的转义和反转义
    5. rel="unrelated"的作用，安全防备
    6. Doctype是什么？如何触发严格模式与混杂模式模式？区分它们
    7. HTML解析里的标记化算法—HTML文档解析和DOM树的构建
    8. 浏览器HTML解析里的容错机制

    html5more>>

    Service Worker可拦截客户端的请 向客户端发送消息 向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。Service worker是一个注册在指定源和路径下的事件驱动worker。用JavaScript控制..
    1. html头部meta属性大全——各种奇葩属性设置大归类
    2. HTML5离线存储实战之manifest的那些坑
    3. web messaging与Woker分类：漫谈postMessage跨线程跨页面通信
    4. iphone x全屏导航自适配页面，css兼容iphone x
    5. webapp移动开发所带来的坑
    6. iphone手机数字颜色css无法设置问题……
    7. 前端预览页面优化解决思路笔记
    8. custom element 创建自定义元素与new Event创建自定义事件

    webmore>>

    虽然Brotli 还是非主流，但是如新贴吧知乎就支持Brotli压缩。谷歌也提供了nginx Brotli 模块。开启方面也不用费什么力。而且cloudflare默认就提供这个支持。本文就Brotli做一些概述性科普和配置实践方法
    1. 浏览器http缓存机制剖析：存储策略与过期策略的机理分析
    2. Web内容的无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明
    3. Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意实现
    4. base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData
    5. Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要
    6. 再谈Hijacking——JavaScript ClickJacking原理浅析
    7. from属性EncType提交数据的格式详解—在angular中的应用
    8. target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

    xmlmore>>

    之前写《再谈BOM和DOM(4):HTML DOM Event 对象》时候，对event对象及各种dom事件没有详细道来，这里收集各种详细数据的表格备查。
    1. 再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表
    2. 再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX
    3. 再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性
    4. 再谈BOM和DOM(4):DOM0/DOM2事件处理分析
    5. 再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查
    6. 再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解
    7. 再谈BOM和DOM(1):BOM与DOM概述
    8. 详解Sitemap