延迟加载图像 图像延迟加载可以帮助开发人员提升网站性能和响应速度。 延迟加载可防止设备第一时间加载屏幕上尚不需要的图像。但是，当你向下滚动或靠近图像时，图像就会开始加载。...更改视口宽度时，你可能会注意到某些图像未按预期缩放。...Base URL 创建网站索引或站点地图时，这是我最喜欢的标签之一。 当你有很多锚标签重定向到某个 URL，并且所有 URL 都以相同的基础地址开头时，这个标签就会派上用场。...URL='https://google.com' /> 这里的 content 属性指定了重定向倒计时的秒数。...值得注意的是，尽管谷歌声称将这种形式的重定向与其他重定向一样对待，但除非确实需要，否则使用这种类型的重定向是不明智的。 因此应该只在某些情况下才使用它，例如在长时间不活动后重定向页面。
CSS 的 Media Query 媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。 使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。...speech 用于屏幕阅读器 比如：在屏幕显示与打印设备上不同的 CSS 效果 media 媒体 screen 屏幕 min-width 最小值，视口大于或者等于该值加载这个 css max-width...print; @media screen,print {...} 1.3 实现方式 1.3.1 外联式 外联式是作为单独的...文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。...，不像其他程序中使用 or 语法。
，记录载入时间最长的图片 parseDomTime：解析 DOM 树结构的时间，期间要加载内嵌资源 initDomTreeTime：请求完毕至DOM加载耗时 readyStart：准备新页面时间耗时 redirectTime...：重定向的时间 appcacheTime：DNS缓存耗时 lookupDomainTime：DNS查询耗时 connectTime：TCP连接耗时 requestTime：内容加载完成的时间 requestDocumentTime...TCP 建立连接完成握手的时间 TTFB：读取资源第一个字节的时间 requestTime：内容加载完成的时间 requestDuration：请求区间 redirectTime：重定向的时间 在一些商业性能采集的应用中...国内有“useragent”，有js和php多个版本，小测了一下，国内手机辨别率还挺高的。 ? img 2）分辨率 这个比较简单就是获取屏幕的物理宽度和高度，一句话就能获取。...简单的将各个收集过来的数据作为URL中的参数传过去，代码中可能有BUG。 ? img 发送以后就是保存数据了，可以将数据保存在Hadoop中。
它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。 我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。...当然，你也可以使用gb2312（简体中文），big5（繁体中文）等等其他字符集。 而目前我们一般推荐使用第一种写法，也是HTML5使用的写法。...4、页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页。...=1.0, user-scalable=no"> 由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。...width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素） height – viewport 的高度 （范围从 223 到 10,000 ） initial-scale
- 浏览器窗口的内部宽度 其他方法： window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo...() - 调整当前窗口的尺寸 Window Screen window.screen 对象包含有关用户屏幕的信息。...一些属性： screen.availWidth - 可用的屏幕宽度 screen.availHeight - 可用的屏幕高度 Window Location window.location 对象用于获得当前页面的地址...(URL)，并把浏览器重定向到新的页面。...location.assign() 方法加载新的文档。
2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。...，表达式又可以包含0到多个关键字，以及一种Media Type。...四、设备屏幕的输出宽度Device Width @media screen and (max-device-width:480px) { .body{...(条件2 and 条件2)，如果该表达式返回的是true，则执行内部css语句，反之则不执行，其他判断也可以以此类推。...480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。...如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。 三、图像大小的选择：srcset属性 + sizes属性 像素密度的适配，只适合显示区域一样大小的图像。...，每张图像的 URL 后面是一个空格，再加上宽度描述符。...宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。...属性给出屏幕尺寸的适配条件，每个条件都用srcset属性，再给出两种像素密度的图像 URL。
它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。 我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。...当然，你也可以使用gb2312（简体中文），big5（繁体中文）等等其他字符集。 而目前我们一般推荐使用第一种写法，也是HTML5使用的写法。...如果加url,则会重定向到指定网页。...7、viewport移动设备屏幕可视区域 由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。 ...width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素） height – viewport 的高度 （范围从 223 到 10,000 ） initial-scale
比如说，输入下面的代码到浏览器的控制台中，浏览器将会重定向到指定页面： window.location.href = '' >> "加载页面，而不是使用缓存的页面。 assign()方法可以用来从参数提供的URL中加载另一个资源。...控制窗口 可以使用window.open()方法打开一个新的窗口。该方法接收将要打开的页面URL作为第一个参数，窗口的标题作为第二个参数，以及一系列属性作为第三个参数。...和availWidth可用于查找屏幕的高度和宽度，其中不包括任何操作系统的菜单： window.screen.availWidth >> 1280 window.screen.availHeight >...'); document.write()方法也可以在文档中的标签内使用，用于将字符串注入到标记中。这不会覆盖页面上的其他HTML。
可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。...设备特性 width 浏览器宽度； height 浏览器高度； device-width 设备屏幕分辨率的宽度值； device-height 设备屏幕分辨率的高度值； orientation 浏览器窗口的方向纵向还是横向...解决方案： 如下栗子中针对不同屏幕宽度加载不同的图片；当页面宽度 在320px到640px之间时加载minpic.png；当页面宽度大于640px时加载middle.png 如下例子中添加了屏幕的方向作为条件...；当屏幕方向为横屏方向时加载_landscape.png结尾的图片；当屏幕方向为竖屏方向时加载 _portrait.png结尾的图片； <source media="(min-width
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...，工作量比较大 重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理 1.2.2 制作响应式页面 响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。...响应式页面缺点 制作复杂，同时对于移动端而言，需要加载非常多的 pc 端的样式和图片等资源，影响加载速度，同时费流量。国内流量非常贵。（这也是国内纯响应式网站不多的原因。）...我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。 为什么呢？...在这个流量和速度至上的时代，代码冗余先不说，多加载的这些无用的代码而消耗的流量，从某种意义上来说就已经损失了很多的效益。
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...，工作量比较大 重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理 1.2.2 制作响应式页面 响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。...响应式页面缺点 制作复杂，同时对于移动端而言，需要加载非常多的 pc 端的样式和图片等资源，影响加载速度，同时费流量。国内流量非常贵。（这也是国内纯响应式网站不多的原因。）...我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。 为什么呢？...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
link和@import的区别 两者都是外部引用CSS的方式，它们的区别如下： link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。...因为服务器返回302代码，搜索引擎认为新的网址只是暂时的。 使用场景： 当我们在做活动时，登录到首页自动重定向，进入活动页面。 未登陆的用户访问用户中心重定向到登录页面。...303 状态码通常作为 PUT 或 POST 操作的返回结果，它表示重定向链接指向的不是新上传的资源，而是另外一个页面，比如消息确认页面或上传进度页面。而请求重定向页面的方法要总是使用 GET。...该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。304 状态码返回时，不包含任何响应的主体部分。304 虽然被划分在 3XX 类别中，但是和重定向没有关系。...，表示资源已被分配了新的 URL 302 found，临时性重定向，表示资源临时被分配了新的 URL 303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源 304 not
通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...它们可以覆盖媒体查询外部的样式规则（根据选择器的优先级或者源码顺序，同理，也可能被其他样式覆盖。媒体查询本身不会影响到它里面选择器的优先级。 在媒体查询断点中推荐使用 em 单位。...不需要像 min-width 或者其他媒体特征那样加小括号。同理，针对屏幕样式，使用 @media screen。...不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。 图片作为流式布局的一部分，请始终确保它不会超过容器的宽度。
由于没有如何进行选择的标准方法，这个状态码极少使用。 永久重定向 说明请求的资源已经被移动到了由 Location 头部指定的url上，是固定的不会再改变。搜索引擎会根据该响应修正。...表明请求的资源被暂时的移动到了由Location 头部指定的 URL 上。浏览器会重定向到这个URL， 但是搜索引擎不会对该资源的链接进行更新。...被请求的资源必须通过指定的代理才能被访问。 临时重定向是表示重定向的响应状态码，说明请求的资源暂时地被移动到 Location 首部所指向的 URL 上。...Web Storage 包含如下两种存储机制： sessionStorage为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
HTTP 协议提供了一种特殊形式的响应—— HTTP 重定向（HTTP redirects）来执行此类操作，该操作可以应用于多种多样的目标：网站维护期间的临时跳转，网站架构改变后为了保持外部链接继续可用的永久重定向...浏览器在接收到重定向响应的时候，会采用该响应提供的新的 URL ，并立即进行加载；大多数情况下，除了会有一小部分性能损失之外，重定向操作对于用户来说是不可见的。 ?...另外一方面，它也提供了更多的可能性，比如在只有满足了特定的条件的情况下才可以触发重定向机制的场景。...3.JavaScript 的重定向机制总是作为最后诉诸的手段，并且只有在客户端开启了 JavaScript 的情况下才起作用。...假如开发人员修改了 HTTP 重定向映射而忘记修改 HTML 页面的重定向映射，那么二者就会不一致，最终结果或者出现无限循环，或者导致其他噩梦的发生。
开发者可登陆微信公众平台申请，开发完成后可以提交审核，公测期间咱不能发布。 我们前一段时间也进行了小程序开发，现在来对之前的开发体验做一个总结。 1. 小程序是什么？...小程序是否存在其他客户端安全问题，需要技术、时间来检验~ （二） 优化 登录： H5中，通过微信授权一般采用url重定向的方式获取code；在小程序中，通过wx.login获取code，这样避免了之前登录重定向的问题...2）打开的页面有5个的限制，在开发时需要主要控制打开页面的数量 wxss： wxss 不再支持媒体查询 增加了app的flex布局 引入rpx的概念 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应...规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。...web app的开发思维去思考~ 结语 从8月开始加入该项目的内测开发，期间经过了几次地动山摇的调整，及不断的痛苦的迭代，所幸的是框架、开发工具已经趋于完善稳定。
# 导航与打开新窗口 window.open()可以用于导航到指定URL，也可以用于打开新浏览器窗口 接收四个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否代替当前加载页面的布尔值...() 导航到新URL，并在浏览器历史记录中增加一条记录 给location.href或window.location设置一个URL，实际还是以同一个URL值调用assign()方法 常见的是设置location.href...，除了hash外，设置location的一个属性就会导致页面重新加载新URL 如果不希望增加历史记录，可以使用replace()方法，重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示的页面...屏幕像素高度减去系统组件高度(只读) availLeft 没有被系统组件占用的屏幕的最左侧像素（只读） availTop 没有被系统组件占用的屏幕的最顶端像素(只读) availWidth 屏幕像素宽度减去系统组件宽度...width 屏幕像素宽度 orientation 返回 Screen Orientation API 中屏幕的朝向 # history对象 history 对象表示当前窗口首次使用以来用户的导航历史记录
第二，你会注意到在projection之后，没有and，也没有任何特性/值的组合。没有后续表达式，意味着只要是projection就满足条件。本例中，样式会应用于所有的投影仪。...例如，将下面的代码插入样式表，在屏幕宽度小于等于400像素的设备上，h1元素的文字颜色就会变成绿色： @media screen and (max-device-width: 400px) { ...h1 { color: green } } 还可以使用CSS的@import指令在当前样式表中按条件引入其他样式表。...例如下面的代码会给视口最大宽度为360像素的显示屏设备加载一个名为phone.css的样式表。...除了能让IE支持HTML5新元素之外，它还能够基于一系列特性测试来有条件地加载更高级的腻子脚本（polyfill）、CSS文件以及额外的JavaScript文件。
这里可以理解为，大屏幕下图片宽度为 600px，小屏幕下图片宽度为 300px。...它们的作用是： srcset：定义多个不同宽度的图像源，让浏览器在 HTML 解析期间选择最合适的图像源 sizes：定义图像元素在不同的视口宽度时，可能的大小值 有了这些属性后，浏览器就会根据 srcset...> 标签同时写上高宽，可以在图片未加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。...到今天，其实我们有更多的其他便捷的方式去实现图片的懒加载。...但是，我们还有其他方式。 HTML5 新增了一个 loading 属性。 到今天，除了 IE 系列浏览器，目前都支持通过 loading 属性实现延迟加载。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
