分类 HTML 下的文章

响应式图片srcset属性学习笔记


介绍

以下参考了MDN,并添加了一些细节和自己的测试结论

<img/>的属性,设置srcset之后不同屏幕密度加载不同图片。

其值为:以逗号分隔的一个或多个字符串列表表明不同User Agent可能设置的图像资源。

每一个字符串由以下组成:

  1. 一个图像的 URL
  2. 可选的描述符,空格后跟以下的其一:
    • 一个宽度(w)描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度=sizes属性给出的资源(source)大小*像素密度。该值需配合sizes使用。
    • 一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。该值其实指的就是dpr。若像素密度描述符直接命中的话,就不考虑sizes和w描述符了,但是建议一般所有字符串仅用其中一个 如果没有指定描述符,那它会被指定为默认的 1x。


yahoo前端优化建议-个人总结_


内容

1.尽量减少HTTP请求数

  1. 资源合并
  2. 小图片base64编码
  3. 多图合并为单图
  4. CSS Sprites,通过background-image和background-position属性来定位要显示的部分

2. 减少DNS查找

组件分散到2-4个主机名,这是同时减少DNS查找和允许高并发下载的折中方案

3. 避免重定向

HTTP 重定向是一项用于将客户端重定向到设备专用网址的常用技术。

但采用重定向会增加延迟。

若必须重定向的话,请使用HTTP重定向(响应体为空)并用301(永久转移)或302(暂时转移)状态码。(两者区别在于302会被url拦截,具体百度

因为系统会根据 HTTP 请求标头中的用户代理来执行重定向。 例子:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

若难以实现HTTP重定向,则用js再去做。该做法多了文档下载,js解析的过程。

注意1:有一种常见的极其浪费资源的重定向,就是URL尾部缺少一个斜线的时候。

例如,跳转到http://astrology.yahoo.com/astrology会返回一个重定向到http://astrology.yahoo.com/astrology/的301响应(注意添在尾部的斜线)。

在Apache中可以用Alias,mod_rewrite或者DirectorySlash指令来取消不必要的重定向。

注意2:进行双向重定向与单向重定向

将访问桌面版网页的移动用户重定向到对应的移动版网页 -- “单向”重定向

在移动用户以及桌面设备用户分别访问桌面版网站和移动网站上的网页时,对他们进行重定向 --“双向”重定向

https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls#automatic-redirection


趣味js-只用1和特殊字符生成字符串


180306更新:发现有个http://www.jsfuck.com/ ,上面就做了我想做的东西。也找到了C的生成方法

同时,由于+[]=0,+!+[]=1。我们可以把1也给省略


前言

今天逛justjavac 老哥的博客看到了类似下面的代码

(+([]+(11^(1<<1))+((1+1)<<(1+1))+(11>>>1)+(1^1)+((11>>1)+(1<<1))+(-~1)+(-~1+1)+(1^1)+(1^1)))[(!!1+[])[1^1]+([]+{}+[])[1]+(([]+{})[([]+{})[11-1>>1]+[[],[]+{}+[]][[]+1][1]+(/^/[1]+[])[1|1>>1|1]+[{},11^1,!{}+[]][1+1][1<<1^1]+(11/!{}+{})[~1+(11^1)+~1]+[!!{}+{}][[]&111][1&1]+(/^/[111]+[])[11^11]+[{},[{}]+{},1][1+[]][11-~1+11>>1]+(!!1+{})[1&1>>1]+([]+{1:1}+[])[1|1]+[[]+!!1][111>>>111][1<<1>>1]]+[])[([]+![111])[1|1<<1|1]+[/=/,[]+[][11]][1|[]][1>>1]+([{}]+{})[1+!![1]]+[1,!1+/~/][1%11][1^1<<1]+(!!1+[])[1^1]+[!!/-/+/-/][11%11][+!!1]](11^1<<1,-~11>>1)](~1-~(11^1)<<1<<1)

输出:gahing

实现的原理是什么?

原理

了解 js 隐式类型转换(不懂可以参考这里)的都知道

我们可以通过执行!1+[]得到"false"

具体原理是 false+object 操作会先去调用object的valueOf()方法 发现其值=this

继续调用toString()方法得到"", 结果即false+"" = "false"(又去做了隐式转换)

故我们通过数组下标就可以拿到想要的字符f,a,l,s,e

类似的方法我们还能够拿到

!1+[] = "false"
!!1+[] = "true"
1/[]+[] = "Infinity"
[]/[]+[] = "NaN"
[]+{} = "[object Object]"
[]+/^/[1] = "undefined" /* /^/是正则 */
[]+/\:@$/ = "/\:@$/" /*键盘可见特殊字符放/\ /其中(\用于转义)获取比如拿:就是[1]*/

//可拿到的小写字母有=abcdef ijln orst uy

然后你会发现,26个字母还是有好多不在上面的,并不能通过每次去上面拿字符然后再做拼接


puppeteer初探-测试webrtc


介绍

puppeteer是什么?

它是一个nodejs的库,支持调用Chrome的API来操纵Web 它的dom操作可以完全在内存中进行模拟而不打开浏览器

功能强大,可用于截图、pdf生成、UI测试、表单提交、数据爬取、性能诊断...

官方接口地址:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

安装

通过npm i puppeteer安装

正常是会报错的。

解法方法1:

1.采用cnpm i puppeteer

解法方法2:

1.使用npm i --save puppeteer --ignore-scripts安装并忽略chromium的下载 2.自行下载 chromium 或 采用本地chrome (后面会说明这样的好处)


Vue 第一个组件,浏览器后退无法触发beforeRouteLeave的问题与解决


已提issue: https://github.com/vuejs/vue-router/issues/1951

现象

加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为待监听组件)时,正常跳转其他页面可以触发beforeRouteLeave。 但是按浏览器的后退按钮监听不到该事件。

解决方案

目前采用比较土且不实用的解决方案。加一层组件,再router.push到待监听组件,使得待监听组件非第一个组件,可以正常监听beforeRouteLeave事件。

注意点:

由于打乱了原来的路由。需要在main.js中添加全局的路由监听

router.beforeEach((to, from, next) => {
  if (to is '用于跳转的组件' && from is '待监听组件') {
    router.go(-1) 
    next(false)
  } else {
    next()
  }
  // 这样当从一个普通页面A进入待监听组件时,在待监听组件中按返回键时能正常进入A
})

存在的问题:

  1. 若访问不是访问中转组件而是直接访问待监听组件,则没有效果
  2. 增加路由后,多了白屏时间。

可能官方有什么解决方案,或者我用错了。欢迎评论

后记:

VUE路由控制是基于h5的history API实现

beforeRouteLeave又是基于window.onpopstate

该事件的官方描述:

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.

简而言之:该事件仅在按了浏览器按钮或者调用history.back()方法时生效,且在同一document的两条历史记录条目间的导航才会生效,而上文出现的原因正是不属于同一document