什么是同源:
源:如果两个页面的协议,端口和域名是相同的,则两个页面具有相同的源。
同源策略限制从一个源加载的文档或脚本与另一个不同的源的资源进行交互。
即一个页面不能调用另一个不同源中的脚本。(可以引用,例如src,但不能读写)
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。如果非同源,共有三种行为受到限制。
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得。
- AJAX 请求不能发送。
性能优化?
- 使用 CDN
- 图片懒加载
- 使用外部 JavaScript 和 CSS
- 压缩 JavaScript 、 CSS 、字体、图片等
- 优化 CSS Sprite
- 减少 HTTP 请求数
- 减少 DNS 查询
- 减少 DOM 元素数量
- 减少 DOM 操作
- 把脚本放在页面底部
一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
- 图片懒加载,滚动到相应位置才加载图片。原理是这个可以用js监控滚动的位置,当初图片位置出现或者即将出现在可视区域时,进行加载。
- 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
- 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。
- 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
<label>标签为input元素定义标注(标记)
label元素不会向用户呈现任何特殊效果,不过,它为鼠标用户改进了可用性,如果您在label元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
<label>标签的for属性应当与相关元素的id属性相同
注意:for属性可把label绑定到另外一个元素,请把for属性的值设置为相关元素的id属性的值