【Web技术】400- 浅谈Shadow DOM

编者按:本文作者:刘观宇,360 奇舞团高级前端工程师.技术经理,W3C CSS 工作组成员. 为什么会有Shadow DOM 你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范围选择.音量控制等需求. 除了直接用组件库,聪明的你肯定已经想到了多种解决办法.如在数据驱动框架React/Vue/Angular下,你可能会找到或编写对应的组件,通过相应数据状态的变更,完成相对复杂的交互:如在小快灵的项目下,用jQuery的Widget也是一个不错的选择:再或者,你可以点开你的H…

【Web技术】399- 浅谈前端代码加密

作者简介:于航,PayPal Senior Software Engineer,在 PayPal 上海负责 Global GRT 平台相关的技术研发工作.曾任职于阿里巴巴.Tapatalk 等企业.freeCodeCamp 上海社区负责人.研究领域主要为前端基础技术架构.Serverless.WebAssembly.LLVM 及编译器等相关方向. 说到 Web 前端开发,我们首先能够想到的是浏览器.HTML.CSS 以及 JavaScript 这些开发时所必备使用的软件工具和编程语言.而在这个专…

【web安全】浅谈web安全之XSS

XSS定义 XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻击. 跨站脚本的重点不在‘跨站’上,而在于‘脚本’上.大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码.实际上是在目标网站的作用域下执行了这段js代码. 攻击手段: 1.盗用cookie 获取敏感信息 2.破坏页面结构插入恶意内容(反射性) 3.利用flash(了解) 4.DD…

Web 字体 font-family 浅谈

前言最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究. 不同的操作系统.不同浏览器下内嵌的默认字体是不同的,错误的字体设置会导致页面在不同环境渲染的混乱,选择一套合适的字体是打造优秀网页的第一步.通过本文,我们会介绍字体的知识点,并探索在PC和Mobile两端该如何正确的设置字体. 字体基础知识字体的分类 serif(衬线) sans-serif(无衬线) monospace(等宽)…

浅谈JavaScript DOM编程艺术读后感和一点总结

最近工作不是很忙就想想想JavaScript的内部组成和一些要点,就是从这本书开始的.对新手来说还好,简单易懂. 简单终结下我重书中学到的一些要点. 下面都是个人学习的要点提取: 1.给自己预留退路,现在浏览器基本都支持Javascript,但是当时可能有一些浏览器不支持还是怎么的,毕竟我没经历过那个年代.作者的这种做法很厉害,不管你的浏览器支持还是不支持Javascript,网站最基本的信息你是能看见的,不会出现不支持Javascript就什么都看不到.例子: <a href="http…

理解Web路由（浅谈前后端路由与前后端渲染）

1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路由返回不同的页面, 大致流程可以看成这样: (1)浏览器发出请求 (2)服务器端监听到80端口或者443有请求过来,并解析url路径 (3)根据服务器的路由配置,返回相应信息(可以是html文件,json数据,也可以是图片) (4)浏览器根据数据包的content-type来决定如何解析数据简单来…

浅谈 Virtual DOM 的那些事

背景我们都知道频繁的dom给我们带来的代价是昂贵的,例如我们有时候需要去更新Table 的部分数据,必须去重新重绘表格,这代价实在是太大了,相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

技术分析 | 浅谈在MySQL体系下SQL语句是如何在系统中执行的及可能遇到的问题

欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 SQL语句大家并不陌生,但某种程度上来看,我们只是知道了这条语句是什么功能,它可以给我们得到什么样的结果,但我们如果把这条语句写错或是数据库表设计上有什么缺陷,会引发什么错误我们却无从得知,所以今天想分享一下在MySQL体系下SQL语句大致上是如何在系统中执行的,在以后SQL语句提示错误时将更好定位问题. 1.问题导入我们以一条SELECT语句为例,我们知道SELECT语句是…

技术分享 | 浅谈mysql语法解析调试方法

欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答本文向您介绍一种利用mysql解析器和bison的调试选项进行sql语法解析跟踪的方法. 数据库开发过程中我们常会遇到修改sql语法的需求.我们知道,mysql的sql解析器是基于yacc文法,采用EBNF格式进行规则描述(sql/sql_yacc.yy),并借助bison工具生成(sql_yacc.h, sql_yacc.cc), 所以修改sql语法,不可避免地要和这些yac…

技术分享 | 浅谈MySQL闪回的实现

欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 1.闪回实现原理 2.binlog文件格式初探 3.闪回实现过程 1.闪回实现原理闪回的业务价值是,在DBA执行错误的数据提交操作之后,还能把数据恢复还原到之前某个时刻的状态,最大程度地挽回损失. 在MySQL中,binlog文件主要用于主从同步二进制数据日志.当主服务器数据发生变更时,会把变动明细持久化到binlog文件中,此时从服务器通过拉取并解析binlog文件,实现数…

防止apk反编译的技术分析浅谈--内存修改器篇

声明: 1.本帖转载自http://jingyan.baidu.com/article/a24b33cd509eb719fe002b94.html,仅供自用,勿喷 Apk反编译修改器有很多.拿其中的比较出名的八门神器来说,该应用通过修改正在运行的游戏的内存数据,可以非常方便地修改游戏的HP.MP.生命数等等参数.辛辛苦苦开发的游戏或应用被修改器一修改就悲催了. 就通过一个demo来讲下,怎么通过多数据关联来保护应用的重要数据不被修改.这个demo很简单,只有一个TextView和一个But…

搞懂分布式技术21：浅谈分布式消息技术 Kafka

搞懂分布式技术21:浅谈分布式消息技术 Kafka 浅谈分布式消息技术 Kafka 本文主要介绍了这几部分内容: 1基本介绍和架构概览 2kafka事务传输的特点 3kafka的消息存储格式:topic和parition 4副本(replication)策略:主从broker部署和partition备份,以及选主机制 5kafka消息分组,通过comsumergroup实现主体订阅 6push和pull的区别,顺序写入和消息读取,零拷贝机制 Kafka的基本介绍 Kafka是最初由Linkedi…

视频基础知识：浅谈视频会议中H.264编码标准的技术发展

浅谈视频会议中H.264编码标准的技术发展浅谈视频会议中H.264编码标准的技术发展数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促使了许多视频编码标准的产生.ITU-T 与ISO/IEC 是制定视频编码标准的两大组织,ITU-T 的标准包括H.261.H.262.H.263.H.264,主要应用于实时视频通信领域,如会议电视:MPEG 系列标准是由ISO/IEC制定的,主要应用于视频存储(DVD).广播电视.因特网或无线网上的…

【Web技术】401- 在 React 中使用 Shadow DOM

本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾.然后,打开一个支持 HTML5 播放的视频网站.比如 Youtube: 可以看到 video 内部有一个 #shadow-root ,在 ShadowRoot 之下还能看到 div 这样的普通 HTML…

横向浅谈移动技术------（原生，混合，web --- 谁能问鼎移动开发的明天）

目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式.谈论那种模式最好实际上事非常无聊的事情. 1.1. APP三种开发模式智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网等).餐饮(饿了吗.美团等)……反正只要是个企业,无论规…

【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

[微信小程序项目实践总结]30分钟从陌生到熟悉前言我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的UI库 5. 微信小程序开发03-这是一个组件 6. 微信小程序开发02-小程序基本介绍 7. 微信小程序开发01-小程序的执行流程是怎么样的? 阅读本文之前,如果大家想对小程序有更深入的了解,或者一些细节的了解可以先阅读上述文章,本文后面点需要对…

浅谈Hybrid技术的设计与实现第二弹

前言浅谈Hybrid技术的设计与实现浅谈Hybrid技术的设计与实现第二弹浅谈Hybrid技术的设计与实现第三弹——落地篇接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) 上文说了很多关于Hybrid的概要设计,可以算得上大而全,有说明有demo有代码,对于想接触Hybrid的朋友来说应该有一定帮助,但是对于进阶的朋友可能就不太满足了,他们会想了解其中的每一个细节,甚至是一些Native的实现,小钗这里继续抛砖引玉,希望接下来的内容对各位有一定帮助. 进入今天的内容…

浅谈Hybrid技术的设计与实现

前言浅谈Hybrid技术的设计与实现浅谈Hybrid技术的设计与实现第二弹浅谈Hybrid技术的设计与实现第三弹——落地篇随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP. 作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&…

【shadow dom入UI】web components思想如何应用于实际项目

回顾经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀,形成的组件如图所示: 这样做基本可以规避css污染的问题,解决绝大多数问题,但是更优的方案总是存在,比如web components中的shadow dom! javascript的组件基本是不可重用的,几个核心原因是: ① 组件实例与实例之间的html.css.Javascript很容易互相污染…

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化…

浅谈DOM性能考虑

浅谈DOM性能考虑很多人都会忽视脚本对Web应用整体性能的影响.为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题.一.尽量减少访问DOM和尽量减少标记访问DOM的方式对脚本性能会产生非常大的影响.以下面代码为例: if(document.getElementByTAgName("a").length > 0){ var links = document.getElementByTAgName("a"…

【架构】浅谈web网站架构演变过程

浅谈web网站架构演变过程前言我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变. 该系统具备的功能: 用户模块:用户注册和管理商品模块:商品展示和管理交易模块:创建交易和管理阶段一.单机构建网站网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.mave…

使用shadow dom封装web组件

什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <video controls=""> <source src="https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/ogg"> </v…

浅谈PHP技术应用

序号:1210-41 黑龙江省高等教育自学考试本科毕业论文题目浅谈PHP技术学员姓名夏滟专业计算机及应用准考证号 010311192585 指导教师马大龙学院地理科学学院哈尔滨师范大学 2012年10月1日目录摘要………………………………………………………………………………1 一.PHP技术简介…………………………………………………………………1 二.PHP开发语言的特点……………………

浅谈web应用的负载均衡、集群、高可用(HA)解决方案（转）

1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安全Socket层(SSL)等等,目前互联网主要使用它做静态资源服务器,也可以做代理服务器转发请求(如:图片链等),结合tomcat等 servlet容器处理jsp.1.2.ngnix —— 俄罗斯人开发的一个高性能的 HTTP和反向代理服务器.由于Nginx 超越 Apache 的高性能和稳…

Web Service进阶(七)浅谈SOAP Webservice和RESTful Webservice

浅谈SOAP Webservice和RESTful Webservice REST是一种架构风格,其核心是面向资源,REST专门针对网络应用设计和开发方式,以降低开发的复杂性,提高系统的可伸缩性.REST提出设计概念和准则为: 1.网络上的所有事物都可以被抽象为资源(resource) 2.每一个资源都有唯一的资源标识(resource identifier),对资源的操作不会改变这些标识 3.所有的操作都是无状态的 REST简化开发,其架构遵循CRUD原则,该原则告诉我们对于资源(包括网络资源…