刷前端面经笔记(五)

1.XML和JSON的区别?

1)数据体积方面
JSON相对于XML来讲,数据的体积小,传递的速度更快些
2)数据描述方面
JSONJavaScript交互更加方便,更容易解析处理,更容易交互
3)数据描述方面
JSON对数据的描述性比XML
4)传输速度方面
JSON的速度要远远快于XML

2.前端需要注意哪些SEO?

合理的titledescriptionkeywords:搜索对着三项的权重逐个减少,title值强调重点即可,重要关键词不要超过两次,而且要靠前,不同页面的title要有所不同;
description把页面的内容高度概括,长度合适,不可过分分堆砌关键词,不同页面的description有所不同;
keywords列举重要关键词即可;

// title标题
标题
// keywords 关键词

// description 内容摘要

语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页;
重要内容的HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,所以要保证重要内容一定会被抓取;
重要内容不要用JS输出:爬虫不会执行JS获取内容;
少用iframe:搜索引擎不会抓取iframe中的内容;
非装饰性图片必须加alt
提高网站速度:网站速度是搜素引擎排序的一个重要指标;

3.HTTP的几种请求方法用途?

1)GET方法
发送一个请求来取得服务器上的某一资源
2)POST方法
URL指定的资源提交数据或附加新的数据
3)PUT方法
POST方法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有
4)HEAD方法
只请求页面的首部
5)DELETE方法
删除服务器上的某资源
6)OPTIONS方法
它用于获取当前URL所支持的方法。如果请求成功,会有一个Allow的头包含类似“GET,POST”这样的信息
7)TRACE方法
TRACE方法被用于激发一个远程的,应用层的请求消息回路
8)CONNECT方法
把请求连接转换到透明的TCP/IP通道

4.如何进行网页性能优化?

1)content方面
减少HTTP请求:合并文件、CSS精灵图
减少DNS查询:DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量
2)Server方面
使用CDN
配置ETag
对组件使用Gzip压缩
3)Cookie方面
减少cookie大小
4)CSS方面
将样式表放到页面顶部
不使用CSS表达式
使用不使用@import
5)JavaScript方面
将脚本放到页面底部
JavaScriptCSS从外部引入
压缩JavaScriptCSS
删除不需要的脚本
减少DOM访问
6)图片方面
优化CSS精灵
不要再HTML中拉伸图片

5.语义化的理解

HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有CSS样式情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫依赖于标记来确定上下文的各个关键字的权重,利于SEO
使阅读源代码的人更容易将网站分块,便于阅读维护理解;

6.WEB标准以及W3C标准是什么

标签闭合、标签小写、不乱嵌套、使用外链CSSJS、结构行为表现的分离

7.说说对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的;
即作用域就是变量与函数的可访问范围,即作用域控制这变量与函数的可见性和生命周期;

8.如何实现瀑布流

1)瀑布流布局的要求要进行布置的元素等宽;
然后计算元素的宽度,
与浏览器宽度之比,得到需要布置的列数;
2)创建一个数组,长度为列数,
里面的值为以已布置元素的总高度(最开始为);
3)然后将未布置的元素的依次布置到高度最小的那一列,
就得到了瀑布流布局;
4)滚动加载,scroll事件得到scrollTop
与最后盒子的offsetTop对比,
符合条件就不断滚动加载。
瀑布流布局核心代码:

/**
 * 实现瀑布流的布局
 * @param {string}parentBox
 * @param {string}childBox
 */
function waterFull(parentBox, childBox) {
    // 1. 求出父盒子的宽度
    //  1.1 获取所有的子盒子
    var allBox = $(parentBox).
         getElementsByClassName(childBox);
    // console.log(allBox);

    // 1.2 求出子盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // console.log(boxWidth);

    // 1.3 获取窗口的宽度
    var clientW = document.
        documentElement.clientWidth;
    // console.log(clientW);

    // 1.4 求出总列数
    var cols = Math.floor(clientW / boxWidth);
    // console.log(cols);

    // 1.5 父盒子居中
    $(parentBox).style.width = cols * boxWidth + 'px';
    $(parentBox).style.margin = '0 auto';

    // 2. 子盒子定位
    //  2.1 定义变量
    var heightArr = [], boxHeight = 0, 
        minBoxHeight = 0, minBoxIndex = 0;

    // 2.2 遍历所有的子盒子
    for (var i = 0; i < allBox.length; i++) {
        // 2.2.1 求出每一个子盒子的高度
        boxHeight = allBox[i].offsetHeight;
        // console.log(boxHeight);
        // 2.2.2 取出第一行盒子的高度放入高度数组中
        if (i < cols) { // 第一行
            heightArr.push(boxHeight);
        } else { // 剩余行的盒子
            // 2.2.3 取出数组中最矮的高度
            minBoxHeight = _.min(heightArr);
            // 2.2.4 求出最矮高度对应的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            // 2.2.5 盒子定位
            allBox[i].style.position = 'absolute';
            allBox[i].style.left = minBoxIndex * boxWidth + 'px';
            allBox[i].style.top = minBoxHeight + 'px';
            // 2.2.6 更新最矮的高度
            heightArr[minBoxIndex] += boxHeight;

        }
    }
}

/**
 * 根据内容取出在数组中对应的索引
 * @param {object}arr
 * @param {number}val
 * @returns {boolean}
 */

function getMinBoxIndex(arr, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === val) return i;
    }
}

/**
 * 判断是否具备加载子盒子的条件
 * @returns {boolean}
 */
function checkWillLoadImage() {
    // 1. 获取最后一个盒子
    var allBox = $('main').getElementsByClassName('box');
    var lastBox = allBox[allBox.length - 1];

    // 2. 求出高度
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 3. 求出窗口的高度
    var clientH = document.documentElement.clientHeight;

    // 4. 求出页面滚动产生的高度
    var scrollTopH = scroll().top;

    // 5. 对比
    return lastBoxDis <= clientH + scrollTopH;
}
9.原生JS都有哪些方式可以实现两个页面间的通信?

1)通过url地址栏传递参数;
例如:点击列表中的每一条数据,跳转到一个详情页面,在URL中传递不同的参数区分不同的页面;
2)通过本地存储cookielocalStoragesessionStorage
例如京东的登陆,把登陆后获得的页面信息存储到本地,其他页面需要用户信息的话就从本地的存储数据中获取;
3)使用iframe
例如在页面中嵌入页面,在中可以通过一些属性和实现方法和页面的通信;
4)利用postMessage实现页面间的通信
例如父窗口往子窗口传递信息,子窗口往父窗口传递信息

欢迎关注

你可能感兴趣的:(刷前端面经笔记(五))