Code Monkey home page Code Monkey logo

36kr-lazyload's Introduction

36Kr-lazyLoad

  • 利用36kr的结构做的一个懒加载

  • 其实并不是懒加载,更像是懒渲染,因为给定的接口无法分次请求资源

  • 代码重构思路

  • 这里的代码性能上会偏差,因为如果直接将函数绑定在scroll上,当页面滚动时函数会被高频触发,这非常影响浏览器的性能

  • 采用函数节流处理,当我们进行一次滚动的时候我们为了避免连续的触发scroll事件,我们可以设置一个空闲时间,当时间大于这个空闲时间时才会触发。

  • 函数防抖处理,在处理一次scroll事件时其他的滚动事件不会被加入执行队列(js单线程),可以通过判断是否有在执行。

36kr-lazyload's People

Contributors

cqupt-yifanwu avatar

Watchers

 avatar  avatar

36kr-lazyload's Issues

该项目遇到的跨域问题

在项目中遇到这样一个问题,我这里有一个36kr的接口,但是这个接口是未设置cors的,同时后台的数据是XML格式,这意味着我们无法使用jsonp。这里我们可以使用node的请求转发代理来解决这个问题

var request = require('request');
//使用例子
// proxy(app,'/api','http://***');
//app是express中的app,route是本地api接口路径,remoteUrl是被代理的提供JSON数据的地址
function proxy(app,route,remoteUrl){
    app.use(route,function(req,res){//使用这个路径,即当浏览器请求route时所做的响应
      req.pipe(request(url)).pipe(res);//请求重新组合后的网址,再把请求结果返回给本地浏览器
    });
}
exports.setProxy = proxy;//导出函数

// 用于转发请求
proxy.setProxy(app,'/api/weather','http://op.juhe.cn/onebox/weather/query');
http.createServer(app).listen(port);

关于 viewport

viewport用法

<meta name="viewport" content="name=value,name=value">
//
指令
每对键值对都是一个指令,(ppk 大神的叫法)以下总计共有6对:
width
    设置layout viewport的宽度(css px)
initial-scale 
    设置页面的初始缩放比例同时可以设置layout viewport的宽度
minimum-scale
    设置最小缩放比例(指用户能够缩小到多小)
maximum-scale
    设置最大缩放比例(指用户能够放大到多大)
height
    设置layout viewport的高度,但暂时不怎么被支持
user-scalable
    设置是否允许用户放大缩小。ppk 指出这个属性很邪恶,最好别用(偷笑)

当我们的网页不使用viewport的时候网页在移动端显示的时候基本上看不清楚字体,为什么呢?因为我们将960px(当我们不做设置的时候viewport会自动的把我们的html给规定成980px)的内容压缩到320dpx(非css单位,在移动端中1px带至一个最小显示单位,一屏就是320px)。

解决方案

通过上述的例子我们知道基本上 viewport 的默认宽度是980px,且浏览器会将者 viewport 大小的 html 文档塞进有限的设备宽度内(浏览器会动态计算文档的布局及内容),所以我们看到的东西都很小。
那么我们想要清除的看清文档内的内容怎么办 ,没错,缩小 viewport 的大小,什么原理?
当我们缩小 viewport 的宽度的时候文档的宽度也对应的被缩小,即一样的设备宽度,我显示的东西少了(这时候浏览器重新计算文档布局及内容)可以看到的结果是字体被放大了,内容都被放大了!

详细解释

width

可以用width来设置viewport的宽度,以替代那些不合适的默认宽度。我们可以给其设定一个固定大小,但设定成device-width更加明智一些,这样我们可以兼容不同大小的屏幕。采用了之后就是我们上面所说的效果,虽然是显示的东西变少了但是我的字体变大了!

initial-scale

在移动设备上,用户有时会缩放,当页面缩放时,viweport的像素尺寸也会响应的改变,单css尺寸不会变。

比如,在一个400px宽的Viewport中有一个元素,设定width: 100px;,这时该元素就横跨了1/4的屏幕。如果用户把页面放大到两倍大小,这时Viewport宽度变成了200px,但元素仍然宽100个CSS像素。这时这个元素就占了半个屏幕了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.