Month: 五月 2019

进阶必备的网络基础

前言

在不那么遥远的一些年以前,一个在江湖中行走的前端,只需要了解“前端三剑客”就足以找到一份工作。很多前端只限于 CSS,HTML、JS,网络基础,数据结构之类的都不甚了解。不过这个时期的前端也是最受鄙视的时期,这个时期前端的大量工作依赖于后端,且不需要动画效果和交互效果。

现如今前端圈已经发生翻天覆地的变化, Vue,React,ES6,HTML5,CSS3,Webpack,PostCss 等技术层出不穷。作为一个有格局的前端,对网络基础定是要了然于心的。

如果你对网络基础还不太了解,以下的内容可以给你提供一个思路;如果你对此已经了然于心,以下的内容烦请批评指正。

入题

任何事物的诞生,最初都是服务于极少数人的。渐渐地被这极少数人推而广之,我们大众就开始接触了解它,互联网是如此,麻将亦是如此。不管是互联网还是麻将,它们都增强了人与人之间的交流。接下来我会讲以下内容:

  1. 五层因特网协议栈

  2. HTTP 与 HTTPS 的区别

  3. TCP/IP 协议

  4. 三次握手和四次挥手

  5. DNS 域名解析

  6. 五类 IP 地址

  7. 跨域的原因及处理方式

  8. 正向代理和反向代理

  9. CDN 带来的性能优化

  10. HTTP 强缓存&协商缓存

五层因特网协议栈 TOP

五层因特网协议栈这个知识点对你来说或许有点枯燥,不过当你对这个协议栈有了一个初步的了解之后,你之前的某些疑问就会很明朗。

一、应用层

            

如何在不破坏事物的情况下创建黑暗主题

我的名字是弗拉基米尔,我为Yandex Mail开发移动前端。我们的应用程序暂时有一个黑暗的主题,但它不完整:只有界面和普通的电子邮件是黑暗的。具有自定义格式的消息仍然很轻,并且在黑暗的界面上脱颖而出,在晚上伤害了用户的眼睛。

 

今天我会告诉你我们是如何解决这个问题的。您将了解两种对我们不起作用的简单技术以及最终实现这一技巧的方法 - 自适应页面重新着色。我还将分享一些关于使图像适应黑暗主题的想法。公平地说,使用自定义CSS的页面变暗是一项相当特殊的任务,但我相信你们中的一些人可能会发现我们的经验很有帮助。…

我们的程序是如何编译成二进制的

几乎你们每个人都必须编写一个程序,编译它然后运行它以查看你辛苦劳动的成果。终于看到你的程序正常工作感觉很好,不是吗?但为了使所有这些工作,我们还有其他人也要感恩。这就是你的编译器(当然,假设你使用的是编译语言,而不是解释的语言),这也在幕后做了很多努力。

在本文中,我将尝试向您展示您编写的源代码如何转换为您的机器实际上能够运行的内容。我选择Linux作为主机,C作为编程语言,但这里的概念足以应用于许多编译语言。

注意:如果您想在本文中进行操作,那么您必须确保在本地计算机上安装了gcc,elfutils。…

        

PHP 早已不是十年前的模样

开发者 Brent 发布了一篇文章,详细介绍了 2019 年的 PHP 是怎么样的。

原文地址:https://stitcher.io/blog/php-in-2019

Brent 承认 PHP 当前仍然存在一些问题,比如许多核心函数仍然有不一致的方法签名、配置设置还是令人困惑,但是以他自己的开发经验来看,他认为 PHP 是 Web 开发的绝佳选择,使用 PHP,他可以创建可靠、可维护和高质量的应用,并且自己与客户对最终结果都满意。…

解决Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题。

Slick 是个网页轮播组件 https://github.com/kenwheeler/slick

Animate.css是一个css3动画库https://github.com/daneden/animate.css

两者常结合使用,能达到比较好的效果。

但是 Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题,可以用以下方法解决!

html代码:

<div id="hero-slider">
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/1');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInLeftBig" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="fadeInUpBig" data-delay="1s">LEARN MORE</a>
                </div>
                

聊聊你不知道的网页无闪烁刷新效果

先看几个网站的效果:

1.CSDN首页

 

2.QQ.com

 

3.GraphQL中文网

4.phalcon中文网

 

现象研究:

仔细查看上面的4个视频,

上面演示的是用chrome浏览器打开以上网站的首页完成后,点击刷新按钮,页面呈现的刷新效果。

第1个是csdn的首页,刷新后可以看到的是整个页面都在闪。

第2个是QQ.com首页,刷新后,可以看到只有一少部分局部区域在闪。

第3个是GraphQL中文网,刷新后,可以看到也是一局部区域在闪(是一个动画效果)

第4个是phalcon中文网,刷新后,整个页完全不闪。

 

普及知识:

在现代浏览器比如:chrome,firefox等浏览器中,当一个页面完全加载完成后,会缓存到内存中,这时再去点刷新按钮或按Ctrl+R去刷新页面,页面通常来说是不会闪的。

如果发生了闪的现象,一般原因是,有些元素是动态js生成的,或在页面加载后期由css或js 改变了其位置或大小造成的。

但是当你按Ctrl+F5去强制刷新页面或清空浏览器缓存后再刷新页面,这时就会发生页面闪的现象。因为这是重新去服务器获取页面,而不是从浏览器缓存读取!

 

注:用IE浏览器刷新的话,一般总是会发生闪的现象的(未测试所有IE版本)

 

 

原创文章,转载请注明来自Lenix的博客,地址https://blog.p2hp.com/archives/6276