前端

jQuery性能优化指南

admin web前端 暂无评论 944 浏览

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  1. 总是从ID选择器开始继承
  2. 在class前使用tag
  3. 将jquery对象缓存起来
  4. 掌握强大的链式操作
  5. 使用子查询
  6. 对直接的DOM操作进行限制
  7. 冒泡
  8. 消除无效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库
…
            
Read more

我应该使用哪些媒体查询断点？

admin web前端 暂无评论 1,330 浏览

在弄清楚要使用哪些媒体查询断点之前，我们需要查看我们要设计的设备。

我已经研究了一些常见的设备分辨率，并且大多数可以分为几类。我列出了这些类别，以及它们可以满足的分辨率：

  • 移动肖像（320像素至414像素）—适用于4“至6.9”屏幕的设备。
  • 移动横向（568像素至812像素）—相同，但横向。
  • 平板电脑肖像（768像素至834像素）—适用于设备7“至10”
  • 平板电脑横向（1024像素至1112像素）—同上，肖像上也有12英寸平板电脑
  • 笔记本电脑和台式机显示器（1200px +）-变化很大，但通常为1200px以上

下一步：那么我们如何理解这些设备？

…
            
Read more

Head标签里面的dns-prefetch，preconnect，prefetch和prerender

admin web前端 暂无评论 945 浏览

开始

今天突然心血来潮想起前端性能优化的问题，这基本是老生常谈的事情了，面试随便都能说上几个，但是还是有点疑问：就是Head标签了，记忆中Head可是藏龙卧虎，各种技能都有，当然这些不可能都一一记住，太伤脑细胞了，于是打开神奇的Github，来到这个 HEAD项目,翻一翻就会看到今天的主角dns-prefetch，preconnect，prefetch和prerender兄弟了，究竟他们有何区别，是怎样的一家人尼。

…
    
Read more

CSS 定位详解

admin web前端 暂无评论 750 浏览

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。

本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。

 

…
    
Read more

原响应式图像正确设置方法

admin web前端 暂无评论 844 浏览

响应式图像正确设置方法，代码如下：

PC,平板，手机显示良好：

我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像，适应不同像素密度的屏幕。

通过 媒体查询，来为不同宽度的屏幕设置不同的图片。

其中，1x 2x 3x 代表设备像素比。

通常 pc的设备像素比为1，iphone7为2，iphone7 plubs为3，一些手机为4，还有一些为1.5，3.65等非整数值。

在下面，所有的设备像素比都要用同一张图片，这样才能显示正常。…

                
Read more

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

admin web前端 暂无评论 736 浏览

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

 

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

Read more

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

admin web前端 暂无评论 1,167 浏览

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

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

admin web前端 暂无评论 2,059 浏览

先看几个网站的效果：

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前端 暂无评论 2,101 浏览

完美适口：

移动设备上的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