前端

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

admin web前端 暂无评论 89 浏览

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>
…
Read more

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

admin web前端 暂无评论 118 浏览

先看几个网站的效果：

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

 

…

        
Read more

移动端字体自适应

admin web前端 暂无评论 111 浏览

完美适口：

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

为了使开发出来的应用或页面大小能适合各种高端手机使用，我们采用了h5的viewport来解决手机分辨率和屏幕大小的不同

    <meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
…
            
Read more

响应式网页设计–css设置网页字体大小自适应

admin web前端 暂无评论 117 浏览

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？

IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。

em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。

比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{font-size:62.5%;
…
            
Read more

深入理解前端性能监控

admin web前端 暂无评论 59 浏览

页面的性能问题是前端开发中一个重要环节，但一直以来我们没有比较好的手段，来检测页面的性能。直到W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下，通过JavaScript可以访问到它。

使用性能API

你可以通过以下方法来探测和兼容performance：

var performance = window.performance || 
    window.msPerformance || 
    window.webkitPerformance;
if (performance) {
    // 你的代码
}
复制代码

先来了解一下performance的结构：

performance.memory是显示此刻内存占用情况，它是一个动态值，其中： usedJSHeapSize表示：JS 对象（包括V8引擎内部对象）占用的内存数 totalJSHeapSize表示：可使用的内存 jsHeapSizeLimit表示：内存大小限制 通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。

performance.navigation显示页面的来源信息，其中：

…
        
Read more

原网页的图片，js ,css ,视频 都加 http accept-ranges头，以提高性能

admin Nginx 暂无评论 115 浏览

网页的图片，js ,css ,视频 都加 http accept-ranges头，以支持多线程加载，断点续传，提高性能！目前各大网站都在使用此方式！

nginx 设置为：

server {
  listen 80;
  server_name p2hp.com;
  location ~ ^/(img/|js/|css/|upload/|font/|fonts/|res/|video) {
    add_header Access-Control-Allow-Origin *;
    add_header Accept-Ranges bytes;
    root /var/www/...;
    access_log off;
    expires 30d;
  }
  ...
}

…

                    
Read more

讲讲PWA

admin web前端 暂无评论 340 浏览

一、背景

文章2017 前端大事件和趋势回顾，2018 何去何从？中提到了2017年前端值得关注的十大事件，其中就提到了PWA。

大家都知道Native app体验确实很好，下载到手机上之后入口也方便。它也有一些缺点:

  • 开发成本高(ios和安卓)
  • 软件上线需要审核
  • 版本更新需要将新版本上传到不同的应用商店
  • 想使用一个app就必须去下载才能使用，即使是偶尔需要使用一下下
…
                    
Read more

毫秒必争，前端网页性能最佳实践

admin web前端 暂无评论 677 浏览

你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。

最佳实践

最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。…

        
Read more

移动前端不得不了解的html5 head 头标签

admin web前端 暂无评论 681 浏览

本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签。

移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。

 

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
…
    
Read more