20200601 前端开发日报

前端性能优化:当页面渲染遇上边缘计算;探究seoVue首屏渲染及其解决方案;jQuery实现视频展示效果;Webpack 详解之代码分割(code-splitting);JavaScript – 原生JS实现滚轮翻页;这才是真正的 Git 分支合并;JDK14性能管理工具:jstack使用介绍;AV1 vs HEVC:WebRTC 编解码器之争卷土重来?(四)

  1. 前端性能优化:当页面渲染遇上边缘计算

    简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点。本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN 的边缘计算能力,将静态内容与...

  2. 探究SEO与VUE首屏渲染及其解决方案

    前言 【音乐博客】 上线啦! 开开心心部署到服务器,然后满怀欣喜打开首页,结果发现有点小慢,这就很不愉快啦 下面来解决vue首屏渲染 五个方面 1. SPA单页面应用 首屏打开速度很慢,因为用户首次加载需要先下载SPA框架及应用程序的代码,然后再渲染页面。 不利于...

  3. jQuery实现视频展示效果

    本文实例为大家分享了jQuery实现视频展示的具体代码,供大家参考,具体内容如下 效果: 用户可以单击左上角的左右箭头,来控制视频展示的左右滚动。当单击向右箭头时,下面的展示视频会向左滚动,同时新的视频展示会以滚动方式显示出来。 思路: 当视频展示内容处于最后一个版面时,如果再向后,...

  4. Webpack 详解之代码分割(code-splitting)

    本文所有的内容均基于 webpack@4.42.0 所撰写。阅读本文之前需了解 Webpack 的一些基本概念,如: entry 、 chunk 、 module 等。 代码分割是 Webpack 最引人注目的特性之一。这个特性允许开发者将代码分割成不同的包,然后可以按需加载或并行加载这些包。它可以用来实现更小的包,并控制资源加载优先级,如果...

  5. JavaScript – 原生JS实现滚轮翻页

    当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个...

  6. 这才是真正的 Git 分支合并

    本文通过讲解三向合并和 Git 的合并策略,介绍 Git 如何完成一次合并。

  7. JDK14性能管理工具:jstack使用介绍

    简介 在之前的文章中,我们介绍了JDK14中jstat工具的使用,本文我们再深入探讨一下jstack工具的使用。 jstack工具主要用来打印java堆栈信息,主要是java的class名字,方法名,字节码索引,行数等信息。 更多精彩...

  8. AV1 vs HEVC:WebRTC 编解码器之争卷土重来?(四)

    有关最新WebRTC视频编解码器的常见问题解答 web WebRTC是否支持HEVC(H.265)? 不,并没有正式支持。 苹果正在Safari中添加对HEVC的支持,但是其他浏览器没有添加,或表示有此计划。 我可以在WebRTC中使用HEVC吗? 可以,但浏...

  9. 不一定知道的 iOS 中的 JS

    飞猪前端中有3个点,分别为开放、追求极致、全栈,本篇文章发于 2 年前的内网 ATA,恰逢最近飞猪微信公众号刚开通,借此分享给更多有需要的同学,用来加强对全栈跨端方向的理解,全文如下: 最近主要在研究 ios 中的 JS 这一块内容,本文打算从为什么不能单纯地搞前端、JSCore 的原理和通信机制、OC 底层...

  10. 一文了解如何将JavaScript隐藏在PNG图片中来绕过CSP

    将一个恶意的JavaScript库隐藏到一个PNG图片中,并在twitter上发布,然后利用XSS攻击绕过其内容安全策略(CSP),将其包含在一个易受攻击的网站中。是不是觉得很科幻,本文我就将详细解锁这个过程。 使用HTML Canvas可以将任何JavaScript代码或整个库隐藏到一个PNG图片中,方法是将每个源代码字符转换为一个像素。然后,...

  11. 前端|AJAX入门

    欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! ajax是什么 AJAX 全称为 Asynchronous JavaScript And XML,是一种从网页访问 Web 服务器的技术AJAX 的作用有从 web ...

  12. The process: Making Vue 3

    Lessons from rewriting the next major version of Vue.js.

  13. JS 的核心语法

    语句(statement) 完成某种操作,一般不需要返回值 表达式(expression) 一个为了得到返回值的计算式 语句、表达式的区别 语句主要为了进行某种操作一般不需要返回值 表达式是为了得到返回值且一定会返回一个值 JS 中预期为值的地方都可用表达式,如赋值语句等号右边预期是值,所以可放置...

  14. 解读新一代 Web 性能体验和质量指标

    衡量一个 Web 页面的体验和质量一直有非常多的工具和指标 ... 每次我们去关注这些指标的时候都会非常痛苦,因为这些指标真的是又多又难理解,测量这些指标的工具也非常多。

  15. 【Vue2】2. 文本响应式更新(响应式原理)

    Vue是数据驱动视图模式,数据变更后,会自动更新视图。开发很便利,不要手动管理视图更新。哪 Vue 是如何实现自动更新,也就是响应式的? 以原生 JS 为例,数据变化了需要手动获取 Dom 节点,然后使用相关 Api 去修改视图 而 Vue 数据变化后需要自动更新视图,所以流程应该: 从图可以大致感...

  16. 前端开发中常见的跨域解决方案汇总

    跨域 是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域 : 资源跳转: A 链接、重定向、表单提交 资源嵌入: <link> 、 <script> 、 <img> 、 <frame> 等 dom 标签,还有样式中 background:url() 、 @font-face() 等...

  17. CSS 创意构想

    分享的内容很棒,里面有很多技巧, 有的很实用, 有的很华丽。 听完之后, 我觉得十分受用, 就想结合自己的一些理解,再次整理一番, 加深印象, 二次吸收, 所以就有了今天的文章。

  18. JavaScript 的浅拷贝和深拷贝

    拷贝:指拷贝源对象到目标对象,又分为浅拷贝和深拷贝两种 浅拷贝:如拷贝的对象有属性值是非基础类型(即对象),则浅拷贝拷贝的是对象的引用,而非对象本身,拷贝完成以后更改目标对象,源对象也会被更改 深拷贝:深拷贝完美解决了浅拷贝存在的问题,目标对象是一个全新的对象,更改目标对象不会影响到源对象 ...

  19. JS 里使用的 undefined 是个变量

    学习 JS,都知道语言里包含一个 Undefined 类型,该类型中只包含一个值 undefined 。 我们可能写过这样的代码: let sometThing = undefined 复制代码 这里的“undefined”其实是个变量,何以见得?下图为证: 因为历史原因, ECMAScript 标准并没有把 undefined 列为保留字 。也就是,我们平常里使用的&...

  20. 女朋友要我教她CSS,我就写了这一篇长文,感动哭了?

    写作背景 女朋友要我教她CSS,于是我就折腾了一周,终于完成了这篇长文... 然后,然后?然后当我发布这篇文章的时候,她会感动到哭吗? 熟悉HTML知识 HTML常见元素 head 部分 body部分 doctype的意义是什么 让浏...

  21. webpack优化解决项目体积大、打包时间长、刷新时间长问题

    在大家的日常开发中,特别是开发大型项目,大家有没有每次打包想要骂娘的冲动!反正我是很痛苦,每次打包20分钟起,这漫长的等待时间,让人非常焦虑,遇见一些特殊问题(比如测试微信分享),必须要打包部署,看效果,你会发现,一天时间全部浪费在打包上,真所谓改代码两分钟,打包代码两小时,于是闲暇之余,研究了一...

更多内容请关注公众号【前端开发博客】每日更新
20200601 前端开发日报

原文:20200601 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200601.html)