Web全栈
文章平均质量分 81
Web前端与调优
郎涯技术
微信搜一搜:【郎涯技术】关注我。
卖码为生,有代码洁癖。不爱广度,爱深度 — 专注分享Java / 在线教育 / 视音频领域等技术。
想和你一起,每天进步一点点,做一个不凡的人!
展开
-
一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB
【代码】一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB。原创 2023-01-16 08:30:00 · 285 阅读 · 0 评论 -
WebApp 移动web资源整理
原文 http://www.cnblogs.com/PeunZhang/p/3407453.html转载 2017-06-28 17:23:29 · 566 阅读 · 0 评论 -
web性能优化 高性能网站建设进阶指南
脑图原创 2017-08-18 13:37:08 · 632 阅读 · 0 评论 -
web性能优化 高性能网站建设指南
公司的平台需要对访问速度等进行优化,大致的方向就是从缓存、压缩、减少请求等方面进行处理,不光需要对网络有一定的理解,也需要对浏览器的机制以及前端的技术等有些许的了解,在这个过程中,阅读了《高性能网站建设指南》,其中就描述了雅虎的工程师们,总结出的“性能黄金法则”: “只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上”。原创 2017-08-04 16:32:40 · 632 阅读 · 0 评论 -
web性能优化 HTTP 缓存
通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信,这会延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用。因此,缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。好在每个浏览器都自带了 HTTP 缓存实现功能。您只需要确保每个服务器响应都提供正确的 HTTP 标头指令,以指示浏览器何时可以缓存响应以及可以缓存多久。 注:如果您在...原创 2017-06-28 16:04:12 · 566 阅读 · 0 评论 -
web性能优化 JS/CSS CDN加速公共库
CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的原创 2016-11-24 08:25:58 · 4041 阅读 · 0 评论 -
web性能优化 页面性能优化小结
总览HTML缩减资源的大小缩减首屏内容的大小启用压缩功能按视口调整内容尺寸压缩HTML代码避免meta设置字符集HTML内嵌小资源CSS优化CSS发送过程合并外部CSS简化CSSCSS移至头部避免CSS @Import避免CSS表达式优先主要CSSJavaScript转载 2016-08-23 17:57:14 · 1497 阅读 · 1 评论 -
Html5 在 Android/IOS 浏览器不自动播放视频
相信很多Web前端开发小伙伴因为工作的需求,在研究怎么通过HTML5实现视频在手机浏览器的自动播放(主流浏览器)。在这里,我要告诉大家:Chrome for Android 从版本54开始支持静音视频自动播放Safari for iOS 10 从版本602开始支持静音视频自动播放Autoplay, whether muted or not, is already supported on...原创 2018-03-02 16:13:23 · 33293 阅读 · 0 评论 -
Javascript Form表单知识点总结
在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,因此与其他HTML元素具有相同的默认属性;HTMLFormElement有自己以下属性和方法;acceptCharset: 服务器能够处理的字符集;等价于HTML中的accept-charset特性;action: 接收请求的U转载 2017-05-25 09:03:20 · 942 阅读 · 0 评论 -
Javascript 事件详解
一:事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档);如下代码:div id = "div"> span转载 2017-05-24 22:20:23 · 579 阅读 · 0 评论 -
CSS/CSS3 属性大全
"CSS" 列指示该属性是在哪个 CSS 版本(CSS1、CSS2 或 CSS3)中定义的。CSS3 动画属性(Animation)属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @key...转载 2016-09-21 23:07:56 · 1182 阅读 · 0 评论 -
CSS/CSS3 文本
属性 描述 CSS color 设置文本的颜色。 1 direction 规定文本的方向 / 书写方向。 2 letter-spacing 设置字符间距。 1 line-height 设置行高。 1 text-align 规定文本的水平对齐方式。 1 text-decoration 规定添加...转载 2016-09-20 23:17:46 · 455 阅读 · 0 评论 -
CSS/CSS3 选择器
1、基础选择器 .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 <p> 元素。 1 2、组合选择器 el...转载 2016-09-18 22:48:42 · 1226 阅读 · 0 评论 -
HTML5 本地存储Web Storage
HTML5中新增的重要功能可以在客户端本地保存数据便是Web Storage。在HTML4中我们是通过cookies在客户端保存网站用户名等信息,但是cookies的局限性也在长期的使用过程中被发现:1. Cookies大小被限制在4KB,Cookies数目有限(20-300)。2. Cookies随HTTP事务一起被发送,这样会浪费一部分带宽。3. Cookies很难被操纵,因为原创 2016-09-08 17:24:29 · 878 阅读 · 0 评论 -
HTML5 标签大全
基础标签描述 定义文档类型。定义 HTML 文档。定义文档的标题。定义文档的主体。 to 定义 HTML 标题。定义段落。定义简单的折行。定义水平线。定义注转载 2016-09-07 17:22:34 · 16800 阅读 · 5 评论 -
HTML5 新增的结构元素——能用不代表用对了
我们需要让标签语义化,清晰的结构,更好的 seo,利于特殊终端的阅读(无障碍),此时 html5 标签的作用就很明显了,并不是说能用就好。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。HTML5 新增结构元素分为主体结构元素和非主体结构元素主体结构元素: article、section、nav、aside、time非主体结构元素:header、hgroup、foot原创 2016-09-07 17:16:37 · 813 阅读 · 0 评论 -
Waypoints.js Javascript/jQuery 页面滚动监听插件
官网:http://imakewebthings.com/waypoints/页面滚动监听很简单,不多说,写个Demo: WayPoints .stuck { position:fixed; top:0; } test1 test2 test3 tes原创 2016-08-17 13:51:44 · 5791 阅读 · 0 评论 -
hash.js Javascript/jQuery 解析/监听url hash
1、什么是hashsearch、hashpath 其实那,hashsearch、hashpath这两个词是我自造的。在javascript语言里称url改变该部分不会影响页面重新加载的部分为hash,在后台语言里称之为fragment(碎片)。在这里,我们统称为hash。 在js里获取hash部分,可以使用如下语句获取:// 获取当前浏览器的hash部分// 如...原创 2016-08-16 18:18:49 · 8925 阅读 · 0 评论 -
SASS/SCSS 使用指南
关于sass 3.3.0更新说明——3.3.0sublime相关插件为:scss语法高亮,sass语法高亮,编译,保存即编译,格式化 文件后缀名sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后...转载 2016-08-16 10:07:54 · 3654 阅读 · 0 评论 -
scrollUp.js Javascript/jQuery 页面返回顶部
顾名思义,ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮,点击该按钮页面滚动条移动到顶部。ScrollUp是一个轻量级的Jquery插件,它创建一个可自定义的“滚动到顶部”的按钮,在任意的网站中进行简单的调用就能达到效果。ScrollUp提供了四种样式tab样式胶囊按钮样式链接样式圆型图片样式也可以自定义样式源码地址:https://github.c原创 2016-08-10 12:47:28 · 1755 阅读 · 0 评论 -
Javascript 浏览器检测
Navigator //获取当前的浏览器信息 var sys = GetBrowserInfo(); //sys.browser得到浏览器的类型,sys.ver得到浏览器的版本 document.write(sys.browser + ":" + sys.ver); function GetBrowserInfo() { var ua = navigator原创 2016-08-07 16:39:58 · 466 阅读 · 0 评论 -
Javascript 设置Cookie
Cookie是在客户端开辟的一块可存储用户信息的地方;Session是在服务器内存中开辟的一块存储用户信息的地方.JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie. 在程序中,会话跟踪是很重要的事情。理论上,一个用户的所有请求操作都应该属于同一个会原创 2016-08-07 11:14:10 · 1043 阅读 · 0 评论 -
jQuery 从零开始学习 (六) 工具函数
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作对象和数组提供了便利条件. 二.前言 大部分人仅仅使用jQuery的选择器选择对象, 或者实现页面动画效果. 在处理业...转载 2016-07-31 21:53:10 · 509 阅读 · 0 评论 -
jQuery 从零开始学习 (五) 动画
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单! 二.前言 本系列文章的实例都是针对某一个技术...转载 2016-07-31 19:23:57 · 441 阅读 · 0 评论 -
jQuery 从零开始学习 (四) 事件与事件对象
一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借...转载 2016-07-31 16:55:19 · 614 阅读 · 0 评论 -
jQuery 从零开始学习 (三) 属性与css样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签:<img src="image...转载 2016-07-31 09:05:40 · 557 阅读 · 0 评论 -
jQuery 从零开始学习 (二) 选择器
一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a...转载 2016-07-30 22:43:19 · 596 阅读 · 0 评论 -
jQuery 从零开始学习 (一) 开天辟地入门篇
jQuery是一套Javascript脚本库. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事....转载 2016-07-30 22:02:25 · 563 阅读 · 0 评论 -
Javascript Browser Window对象方法详解
Window 对象Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。Window 对象集合集合描述转载 2016-07-12 22:55:37 · 3269 阅读 · 0 评论 -
Javascript DOM Document|Element|Attribute对象方法详解
Document对象是浏览器Window(窗口)对象的一个主要部分。它包含了网页显示的各个元素,是最常用的对象之一。通过document对象可以访问HTML文档中包含的任何HTML标记,并可以动态地改变HTML标记中的内容,如表单、图像、表格和超链接等。Document 对象集合集合描述all[]提供对文档中所有原创 2016-07-10 12:16:47 · 5450 阅读 · 0 评论 -
Viewer.js Javascript/jQuery图片查看器
简介Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择。Viewer.js 有以下特点:支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件原创 2016-07-04 22:36:24 · 13770 阅读 · 6 评论 -
javascript 异常处理(try…catch…finally window.onerror)
try catch finally 语句说明try catch finally是javascript语言提供的异常处理机制。语法结构如下 1 try { 2 //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 3 4 } 5 catch (e) { 6 // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 7转载 2016-07-04 17:47:16 · 940 阅读 · 0 评论 -
Javascript FileSystemObject 读取/创建本地文件及目录文件夹的方法
注:以下操作只在IE下有效! Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读、写和删除,就象在VB、VC等高级语言中经常做的工作一样。怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作。一、功能实现转载 2016-07-03 15:40:24 · 10774 阅读 · 0 评论 -
Javascript 对象访问语句
for...in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。不要用for in遍历数组,全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array ) with语句用于设置代码在特定对象中的作用域。with语句将检查该方法是否是本地函数,如果不是,它将检查伪对象,看它是否为该对象的方法。with 语原创 2016-06-30 17:52:35 · 892 阅读 · 0 评论 -
Javascript DOM Event对象方法详解
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!1、事件句柄 (Event Handlers) HTML4.0的新特性之一是能够使HTML事件触发浏览器中的行为,比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,可将之插入 HTML原创 2016-06-30 15:58:14 · 4274 阅读 · 0 评论 -
Javascript String|Date|Array|Math|Boolean|Number对象方法详解
1、String 字符串是 JavaScript 的一种基本的数据类型。 String对象的length属性声明了该字符串中的字符数。String类定义了大量操作字符串的方法,例如从字符串中提取字符或子串,或者检索字符或子串。需要注意的是,JavaScript的字符串是不可变的(immutable),String类定义的方法都不能改变字符串的内容。像String.t原创 2016-06-30 14:01:32 · 767 阅读 · 0 评论 -
Javascript Object对象方法详解
一、Object类介绍Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数。可以在程序运行时为Javascript对象随意添加属性,因此可以很容易地创建自定义对象。二、Object类主要属性1.constructor:对象的构造函数。2.prototype:获得类的prototype对象,static性质。原创 2016-06-29 15:47:39 · 3161 阅读 · 0 评论 -
JavaScript 函数
一、JavaScript函数的分类 1、自定义函数(我们自己编写的函数),如:function funName(){} 2、系统函数(JavaScript自带的函数),如alert函数。二、函数的调用方式 1、普通调用:functionName(实际参数...) 2、通过指向函数的变量去调用: var myVar=函数名; myVar(实原创 2016-05-12 12:04:22 · 808 阅读 · 0 评论 -
JavaScript 基础
一、JavaScript语言特点1.1、JavaScript是基于对象和事件驱动的(动态的)它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标,移动窗口,选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。 1.2、JavaSc...转载 2016-05-09 22:48:17 · 1229 阅读 · 0 评论 -
Javascript 初识Javascript
JavaScript是由Netscape公司开发的一种脚本语言(scripting language),或者称为描述语言,在HTML基础上,使用Javascript可以开发交互式Web网页,Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多的元素和更加精彩的内容。运用Javascript编写的程序需要支持Javascript语言的浏览器,Netsc原创 2016-05-04 11:47:40 · 709 阅读 · 0 评论