- 博客(16)
- 收藏
- 关注
原创 同源策略与跨域资源共享
1.同源策略同源策略,就是限制JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容。浏览器的整个安全体系均建立在此之上。支持同源策略的浏览器其实并不会阻止跨域请求的发送和响应的接收,它仅仅是阻止程序不能访问返回的数据而已。同源策略限制:1.无法读取非同源网页的cookie,localstorage,IndexDB;2.无法接触非同源网页的dom;3.无法获取非同源网页的请求(可以接受,浏览...
2016-09-23 11:41:05 1829
转载 响应式设计
响应式设计响应式是什么?Responsive Web Design(RWD),应用程序在不同设备或者不同尺寸大小的终端屏幕上做不同内容的展示;自适应是什么?Adaptive Web Design(AWD),应用程序使用多个版本用户界面,针对不同设备,服务端返回不同版本用户界面;响应式vs自适应响应式是一套用户界面,后者是多套;自适应需要服务端检测请求设备分辨率相关信息,返回对应版本渲染;渐进增强以...
2018-03-06 16:35:38 332
原创 polyfill处理浏览器API兼容
polyfill是一段代码插件,处理浏览器兼容问题,一般写在webpack配置文件的入口位置。工作原理:首先检查浏览器是否支持某个API,如果不支持则加载对应的 polyfill,比如IE低版本中增加XMLHttpRequest,内部靠ActiveXObject实现;shim是将不同的API封装成一种,比如jquery的ajax封装了XMLHttpRequest和IE的ActiveXObject方法
2018-03-05 15:09:44 1065
原创 polyfill处理浏览器API兼容
polyfill是一段代码插件,处理浏览器兼容问题,一般写在webpack配置文件的入口位置。工作原理:首先检查浏览器是否支持某个API,如果不支持则加载对应的 polyfill,比如IE低版本中增加XMLHttpRequest,内部靠ActiveXObject实现;shim是将不同的API封装成一种,比如jquery的ajax封装了XMLHttpRequest和IE的ActiveXObject方...
2018-03-05 15:02:40 1222
原创 CSS3新特性(二)
更多的选择器框模型背景和边框文本效果和字体2D/3D 转换动画多列布局用户界面用户界面新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等resizebox-sizingoutline-offsetdiv{ border:2px solid; padding:10px 40px; width:300px; //resize 属性规定是否可由用户调
2016-10-04 20:18:13 521
原创 CSS3新特性(一)
CSS3中增加了一些模块:更多的选择器框模型背景和边框文本效果和字体2D/3D 转换动画多列布局用户界面更多的选择器真的是加了好多的选择器,更好的进行查找,解决了很多我们之前需要用 JavaScript 脚本才能解决的问题。有意思的是属性选择器那三个的 ^,$ 用到了正则表达式的规则,分别对应开头,结尾符。nth-child(n)在表格的样式中很好用。背景和边框背景:增加了
2016-10-04 16:20:18 354
原创 HTML5新特性
HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search canvas 元素 HTML5 的
2016-10-04 11:55:13 632
转载 link和import的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值页面头部内嵌调用外面链接调用 其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> <style type=
2016-10-03 15:17:28 451
原创 meta标签作用?常用的http-equiv属性及其作用
meta标签<meta> 标签的属性定义了与文档相关联的名称/值对,可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。meta标签分两大部分:http-equiv 和 name 属性。http-equivhttp-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为co
2016-09-19 16:48:10 760 1
原创 cookies , Session,sessionStorage , localStorage
Session 、cookies是程序员永远讨论的话题之一。(1) Cookies是保存在客户端的小段文本,随客户端请求发送该url下的所有cookies到服务器端,在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。(2) Session则保存服务器段,通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器,服务器根据s
2016-09-18 18:18:58 974
原创 Cookies
什么是cookies?Cookies就是服务器暂时存放在你的浏览器端的资料,好让服务器用来辨认你的计算机。当你在浏览网站发送请求给服务器时,Web服务器将网站上输入的ID,密码,浏览过的网页、停留的时间等信息存储在浏览器上的Cookies里。当下次你再访问同一个网站时,Web服务器会依据Cookie里的内容来判断使用者,送出特定的网页内容给你。
2016-09-18 12:22:49 452 2
原创 正则表达式
想当初第一次看Douglas的高级程序设计时,每个正则表达式的字符都被我笔记记得密密麻麻,现在看来,当初也没记住啥,这种对象的学习还是得写几个常用的正则表达式来学习,不然图样图森破还是不懂。常见的几种方法: - RegExp.exec(string) //匹配字符串并返回捕获的数组,无则返回null - RegExp.test(string) //检查制服穿是否匹配,返回true/false - R
2016-09-18 09:51:07 362
原创 使用jQuery ajax提交表单
场景:对于本身表单就可以提交,或者jquery,js原生都可以提交并进行验证,不知道ajax多个返回数据要用来干嘛,今天笔试的题目就是如标题所示的要求。html代码:<form id="myForm" name="myForm" method="post"> <label> username:</label> <input name="username" id="username"
2016-09-17 22:01:24 669
原创 提升脚本对Web应用整体性能的影响
1. 尽量减少DOM访问和标记加载访问DOM某个元素的方式是搜索整个DOM树,从中查找匹配的元素,减少访问的次数的办法是,把第一次搜索到的结果保存在变量中,然后取变量值进行访问。 另外,过多不必要的标签只会增加DOM树的规模,进而增加访问的成本。2. 合并和放置脚本使用外部脚本,通过<script>加载,如果<script>标签数量过多,加载页面时就会发送多少个请求,所以合并脚本文件通常在性能优
2016-09-17 15:06:58 290
原创 层叠上下文 z-index
今天看到一张层叠上下文的图片还蛮有意思,到底子元素的 z-index 值是在父元素的z-index上叠加值,还是以root元素作为参考,一张图就搞定了这几个疑问。 在这个例子中,每个被定位的元素都创建了独自的层叠上下文,因为他们被指定了定位属性和 z-index 属性。层叠上下文的层级如下:Root DIV #1 z-index 为 5DIV #2 z-index 为 2DIV #3
2016-09-17 12:15:05 444
原创 CSS级联与优先级
CSS级联与优先级级联就是CSS声明前加了限制条件 ps:善用 CSS 的级联属性 比如在你需要选定的对象元素前加上更多的元素,使选择的范围缩小,你的选择器就变得更有针对性,从而提高优先级比如:下面这段代码结果红色。<h1 class="A B">标题颜色<h1>h1.B{ color: red } .A{ color: blue }优先级 优先级就是分配给指定的CSS声明的一
2016-09-17 11:10:36 2724
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人